A Walkthrough of CSS Length Units You Can Use for Font Size
May 16, 2017 - 2:00pm
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.
This text is directly inside the parent div element.
<p>This is the fi
Continue reading this article »