There are different ways you can draw attention to text on a web page. You can make it orange, for example. You can bold or underline it. You can highlight one phrase in 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 (<h1>)has the largest font size. Next up are my heading elements (<h2>, <h3>, and <h4>), all larger than the <p> 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 in CSS. Let’s walk through the process below.

Download Now: Free Intro Guide to HTML & CSS

How to Change Font Size in CSS

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

See the Pen font-size: different values by Christina Perricone (@hubspot) on CodePen.

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-size can 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 is medium (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 Pen font-size: absolute size by Christina Perricone (@hubspot) on CodePen.

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 of large, a child element with a defined relative size of smaller will have a font size of medium. Let’s look at the code of this hypothetical.

See the Pen font-size: relative size by Christina Perricone (@hubspot) on CodePen.

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 can learn 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 Pen font-size: px by Christina Perricone (@hubspot) on CodePen.

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 mini render 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; }

The em unit sets the font size relative to the font size of the parent element. So, giving text a font-size of 2em will 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 a <span> element with a font size of 2em contains another <span> element. That nested <span> element would be twice the size, or 4em. See the code below.

See the Pen font-size: em by Christina Perricone (@hubspot) on CodePen.

 
Rems

 
element { font-size: 2rem; }

Rems are a relative unit like ems, but they don’t compound. That’s because ems are font-relative units, meaning the font size is relative to the parent element's font size, while rems are root-based. Meaning, the font size is relative to the size of the font used by the root element, or <html> element at the top of the document.

Say I set the font size of the root element to 12px so 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 <div> 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 <span> element is the same font size as the other <span> element.

See the Pen font-size: rem by Christina Perricone (@hubspot) on CodePen.

 

Percentage

 
element { font-size: 110%; }

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

Say a <div> element that’s set to 36px contains a <p> element and two <span> elements. The font-size of the <span> elements are set to 50% and 200% respectively. Then the <span> element with the 50% value will be 18px and the <span> element with the 200% value will be 27px. Here’s how that code looks in action:

See the Pen font-size: percentage by Christina Perricone (@hubspot) on CodePen.

 

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.

 
element { 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 Pen font-size: vw by Christina Perricone (@hubspot) on CodePen.

 

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

a visual demonstration of font size changing as the browser viewport changes

 

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 Pen font-size: vw with media query by Christina Perricone (@hubspot) on CodePen.

 

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

a visual demonstration of font size changing as the browser viewport changes, then shrinks at the 1000px breakpoint

Controlling Font Size

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.

New Call-to-action

 css introduction

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

Topics:

Bootstrap & CSS