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

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.

[code language=”html”]
<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>
[/code]

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

[code language=”css”]
div {
font-size: 20px;
}

code {
font-size: 18px;
}

p, a {
font-size: 22px;
}
[/code]

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:

[code language=”css”]
div {
font-size: 1.2em;
}

code {
font-size: 0.9em;
}

p, a {
font-size: 1em;
}
[/code]

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

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.

[code language=”css”]
div {
font-size: 1.2rem;
}

code {
font-size: 0.9em;
}

p, a {
font-size: 1em;
}
[/code]

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

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 (%)

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


Source: Sitepoint