There are different ways you can draw attention to text on a web page. You can make it橙子, for example. You canbold或者下划线it. You can highlightone phrasein a sentence.

In addition to these formatting options, you can also change the font size of text to draw the reader’s eye and establish a visual hierarchy. You’ll notice in this blog post that the title (

）字体尺寸最大。接下来是我的标题元素（

,

, and

），大于

elements beneath them. This way, the visitor (you) knows where different sections begin.

HTML headings aren’t the only way to change the font size on your site. Let’s say you want to shrink or enlarge the default heading sizes, or you want to change the font size of other elements on the page. In that case, you can change the font size inCSS。让我们浏览以下过程。

How to Change Font Size in CSS

font-sizeis the CSS property that controls the size of the font on a webpage. There are several different values you can use to define thefont-sizeproperty. Take a look at the example below, which includes different values and units you can use in CSS.

See the Pen字体大小:不同的值by Christina Perricone (@hubspot) onCodePen。

These values offer different approaches to setting the font size on your web page. The one you choose will depend on the needs and goals of your site. Let’s take a closer look at these values, weighing the pros and cons of each.

Font-size Property Values to Decrease and Increase Font Size

In CSS,font-sizecan be specified with any of the following values. For each property value, I’ll give an example of its syntax and a brief description.

Absolute-size keyword

element { font-size: small; }

Absolute-size keywords are based on the default font size. Most commonly, the default font size ismedium(which translates to 16 pixels or 1em) though it can differ by browser and font family. Note that in HTML the default font size is 16px.

The absolute-size keywords are:

• xx-small
• x-small
• small
• medium
• large
• x-large
• xx-large
• xxx-large

Here’s how each looks in a browser:

See the Penfont-size: absolute sizeby Christina Perricone (@hubspot) onCodePen。

Absolute-size keywords make it easy to set text to a specified size and create a font hierarchy for your page. However, they do not allow a user to change the text size in all browsers, which makes it a poor choice for accessible design. To be more inclusive of all users, try relative-size keywords.

Relative-size keyword

element { font-size: larger; }

Relative-size keywords set the font larger or smaller relative to the parent element's font size. These relative sizes are roughly based on the ratio of the absolute-size keywords described above.

So if the parent element has a font size oflarge, a child element with a defined relative size ofsmaller字体尺寸为medium。Let’s look at the code of this hypothetical.

See the Pen字体大小：相对大小by Christina Perricone (@hubspot) onCodePen。

Notice that I've used the class selector ".relative" to target one H2 rather than using the type selector, which would target both H2s. You canlearn more about CSS selectors in our explainer。

Relative-size keywords make it easy to set the size of text relative to surrounding elements. Their advantage over absolute-size keywords is that they allow users to change the text size in all browsers, which makes it a good choice for accessibility.

Length

There are a few length values that can define the font-size property in CSS. Here, we’ll focus on the three most common: pixels, em units, and rem units.

Pixels

element { font-size: 32px; }

Using pixels (px) as your length value will enable you to set your font size with precision, regardless of the browser a visitor is using. You can specify exactly the number of pixels in height that you want a browser to render your text (although the results may vary slightly depending on the algorithms the browsers use).

See the Penfont-size: pxby Christina Perricone (@hubspot) onCodePen。

However, the fixed nature of pixels is also a drawback. They’re not optimized for all devices — CSS-Tricks found that websites on the iPad minirender the same as websites on the iPad, for example — and they’re not an accessible length value. Because users cannot change the font size in some browsers, there are more inclusive and responsive options you can use.

Ems

element { font-size: 2em; }

EM单元相对于父元件的字体大小设置字体大小。因此，给文字一个font-size的2emwill make this text twice the size of its surrounding text.

Setting font size in em units is ideal for an inclusive design. Since ems are a relative unit, users can adjust the text size in all browsers.

The only drawback is that ems compound. So, say aelement with a font size of 2em contains another元素。那嵌套了element would be twice the size, or 4em. See the code below.

See the Penfont-size: emby Christina Perricone (@hubspot) onCodePen。

Rems

element { font-size: 2rem; }

REMS是像EMS这样的相对单位，但它们并不复杂。这是因为EMS是字体相关单元，这意味着字体大小相对于父元件的字体大小，而REMS基于根。含义，字体大小相对于根部元素使用的字体的大小，或element at the top of the document.

Say I set the font size of the root element to12pxso that any text in the document that isn’t modified by CSS will be 12 pixels. But, I also want to change the font size of a

element that’s similar to the one mentioned in the example above. Let’s look at the code for that below.

Notice how the nested element is the same font size as the other element.

See the Penfont-size: remby Christina Perricone (@hubspot) onCodePen。

Percentage

元素{字体大小:110%;}

A percentage value sets the font size of an element relative to the parent element's font size.

说

element that’s set to36px包含一个

element and twoelements. Thefont-size的theelements are set to 50% and 200% respectively. Then theelement with the 50% value will be 18px and theelement with the 200% value will be27px。Here’s how that code looks in action:

See the Penfont-size: percentageby Christina Perricone (@hubspot) onCodePen。

Responsive Font Size in CSS

The property values described above all have one thing in common: They are not responsive. If you’d like to set your font size to be responsive for all devices and displays, you can use the viewport width unit, shortened to vw.

元素{font-size：10vw;}

The vw unit is another relative unit. It’s not relative to a parent element or root element but to the width of the viewport, 1% of the viewport to be exact. Meaning, if the viewport is 100 cms wide, 1vw = 1 cm. If the viewport is 50 cm wide, 1vw = 0.5 cm, and so on.

Say I want the font size of my paragraph to be 10% of the width of the browser window. Here’s what the code looks like:

See the Penfont-size: vwby Christina Perricone (@hubspot) onCodePen。

And here’s what the text looks like when we resize the viewport:

Max Font Size in CSS

When setting your font size in vm units, be careful that your text doesn’t get too big on large screens. Unfortunately, CSS doesn’t have max-font-size property, but you can prevent your font from getting too big by using media queries.

You just have to use the media query at a certain screen size breakpoint and force the font size back into a set pixel value. Say I want to force my font size back to 30px when the viewport exceeds 1000px. Here’s what the code looks like:

See the Penfont-size: vw with media queryby Christina Perricone (@hubspot) onCodePen。

And here’s what the text looks like when we resize the viewport:

控制字体尺寸

Changing font size in CSS is complex when compared to the ease of changing font size in Google Docs or Microsoft Word — but it can be mastered with some practice in HTML and CSS.

Editor's note: This post was originally published in May 2020 and has been updated for comprehensiveness.

Originally published May 28, 2021 7:00:00 AM, updated August 23 2021

Topics:

Bootstrap & CSS

Don't forget to share this post!