A Walkthrough of CSS Length Units You Can Use for Font Size

This article was peer reviewed by Tom Hodgins. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

CSS provides a lot of units for developers to specify the length of different properties like margin, padding, line-height or font-size. The reason we have many units is that they are designed to serve different purposes. Even though you can use these units to specify the same value for a given CSS property, the actual magnitude of that value is calculated differently. This can make some units useful for situations where other units might not do that well. For example, if you want the width or height properties of an element to be dependent on the width or height of the viewport, the only trustworthy units to accomplish that are vh, vw, vmin and vmax.

In this article, you will learn about different length units and how they affect the font size of elements they are applied to.

Pixel Unit (px)

Pixels are fixed size units. They are generally referred to as a single dot on the user’s screen. However, devices nowadays can have different pixel densities. This means that the size of this dot we generally call pixel will be about 1/4th on a device whose pixel density is 4 times that of a standard device. This problem is avoided by calculating the size of CSS pixels using a reference pixel. The reference pixel is defined as the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length ( equal to 28 inches). This makes the size of a pixel equal to about 0.26mm.

Setting the font-size of different text elements on your webpage in pixels is neither easily maintainable nor user friendly. If you are redesigning a very big website, changing the fonts of all elements can turn into a bit of a nightmare. You will also have to adjust the font-size of a lot of elements at different breakpoints to accommodate different screen sizes. Moreover, any user who wants to make the text smaller or larger using their browser font size setting, won’t be able to do so.

Let’s see how a font size set in pixels affects the computed font-size value for different elements. Here is the markup that we will be using as a reference for the next few sections.

<div class="container-box">
  This text is directly inside the parent div element.
  <p>This is the first paragraph of our container.</p>
  <p>The second paragraph contains a link to <a href="http://en.wikipedia.org/">WikiPedia</a>, the free encyclopedia.</p>
  <p>I have also included a link to SitePoint as a direct child of the containing div element.</p>
  <a href="https://www.sitepoint.com/">A link to SitePoint.</a>
</div>

Here is the CSS to set the font-size property for all the elements in pixels.

div {
  font-size: 20px;
}

code {
  font-size: 18px;
}

p, a {
  font-size: 22px;
}

See the Pen Setting Font Size in Pixels by SitePoint (@SitePoint) on CodePen.

As you can see in the demo, the font-size of each element is equal to the pixel value that you have provided. It has no relation with the nesting of that element. For example, the font-size for both links is 22px. You can also try and change the text size setting in your browsers but it will not affect the font size of these elements.

In short, this lack of flexibility is a good reason why you should avoid using pixels when setting the font-size of an element.

Em Unit (em)

Using the em unit for setting the font size can help you avoid any issues related to overriding user preferences. The value of 1em will depend on the value of the default font-size in the browser. Unless changed by you or the user, by default this value is equal to 16px.

The value of this unit for an element is determined by the computed font-size inherited by that element. This means that if an element inherits a font-size of 25px, the value of 2em for that element will be computed as 50px.

The following CSS sets the font-size of all elements from our previous example in em units:

div {
  font-size: 1.2em;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

The second div in the above demo is nested inside another div element. We have also set the font-size for div elements to be 1.2em. This means that the font size of all the elements in the second div will be bigger by a factor of 1.2 than the corresponding element in the first div. For example, the computed font-size of the WikiPedia link in the first div is 19.2px and the computed font-size of the WikiPedia link in the second div is 23.04px. The ratio is exactly equal to 1.2.

If you want to scale up or scale down the font-size of different elements in a responsive website at certain breakpoints, you can simply do so by specifying a different font-size from the html and body elements at that breakpoint. The font size of all other elements will then scale accordingly.

Since the value of this unit depends on the inherited font-size of a given element, this unit is particularly useful when you want to set font sizes for related elements inside independent sections of a website, for instance elements inside independent modules.

Rem Unit (rem)

The only problem with em units is that you don’t always want the font-size of child elements to scale according to their parent’s font-size. This inheritance of the font-size can make the process of calculating a correct em value a lot more complex than it should be.

You can overcome this drawback of the em unit using the rem unit. The value of 1rem is always equal to the value of the font-size for the root element. This way you will not face any problem with font-size inheritance.

The following CSS sets the font-size of our containing div in rem unit. The rest of the elements still have their font-size in terms of em unit.

div {
  font-size: 1.2rem;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

Setting the font-size of the container div in rem units helps us avoid the issue with inherited font-size.

As evident from the example, you can use this unit to set a font-size value for the parent container of different independent modules. This way, the font-size of all the elements inside the module can be based on their parent and at the same time be independent of other modules.

Percent (%)

Percents behave like em units. They are generally used to set the font-size for root elements at different breakpoints to make calculations in responsive web design easier. Here is an example:

html {
  font-size: 62.5%;
}

div {
  font-size: 2rem;
}

code {
  font-size: 0.9em;
}

p, a {
  font-size: 1em;
}

Since the default value for the font-size in browsers is 16px, setting the font-size for the html element equal to 62.5% computes to exactly 10px. This makes the calculation of font sizes for all other elements very easy. For example, you can now just set the font-size of an element to 3rem to make it 30px, 4.2rem to make it 42px, and so on.

Viewport Units (vw, vh, vmin, vmax)

Viewport units are pretty interesting. They allow you to set the font-size for different elements based on the dimensions of the viewport. When done properly, this can eliminate the need for setting a different font-size value at multiple breakpoints. This is because the value of these units will keep changing continuously based on the width or height of the viewport. For instance, 1vw will be equal to 4px when the viewport is 400px wide and it will be equal to 10px when the viewport is 1000px wide. There is already an article on SitePoint that discusses viewport units and their applications. Go and check it out if you’d like to know more.

The only problem with these units is that the computed font-size could make the text hard to read at very small and very large viewport sizes. The trick here is to use these units in combination with other units so that the text doesn’t become too small or too large. This technique has been discussed in more detail in this article about viewport unit based typography.

Other Absolute Units

CSS also has defined a lot of absolute units which are of little use on screens but play an important role in print media. You can use points (pt) and picas (pc) to set the font-size in print stylesheets. Both these units have a fixed value of 0.0138 inches and 0.1666 inches respectively. Similarly, you can use inches (in), centimeters (cm) and millimeters (mm) to set the page margins in print stylesheets.

Using Keywords to Set Font Size

Another option to set the font-size is to use keywords. These keywords are of two kinds: absolute and relative. Absolute keywords that are used to specify the font-size refer to a font size table computed by different user agents. These absolute keywords are xx-small, x-small, small, medium, large, x-large and xx-large.

If you decide to use relative keywords, the font-size will be calculated based on the values in the font size table and the computed font-size of the parent element. There are two relative keywords: larger and smaller. If the parent element has a font-size value close to x-small, a font-size of larger will set our element’s font-size to small. Here is an example:

div {
  font-size: larger;
}

code {
  font-size: smaller;
}

p, a {
  font-size: small;
}

The second container div in our demo is nested inside another div. Since we have set the font-size of the div to be larger, the nesting increases the font size of our second container. Also note that the nesting has no effect on the text inside the paragraphs. This is because their font-size has been set using an absolute keyword.

Browser Support

Before deciding to use any of these units in production, you should also make sure that your target browsers have decent support.

Absolute units like px, pt, pc, in, cm and mm are supported in all browsers. Similarly, the em unit is supported in all major browsers, including older versions of IE.

However, the rem unit is not supported in IE8 and lower. Even in IE9 and IE10, using rem with the shorthand font property will make the whole declaration invalid. These two browsers don’t support rem units on pseudo elements.

Out of all the units discussed in this article, viewport units have the least browser support. Also note that IE11 and Edge don’t support the vmax unit.

Conclusion

In this article, we have discussed different length units in CSS and how they affect the font-size of an element. In general, you should avoid using absolute units whenever possible and try to use relative units. Among relative units, you should use em for setting font sizes of child elements within a module and rem for setting font sizes of independent elements, for example the root parent element in a module. You can also use viewport units in combination with other units to make sure that your typography scales well with any changes in the viewport width or height.

For more on web typography, check out our video on AtoZ CSS: Text and Typography.