Curious Case of Font Size Units in Web Development

If you have worked on any web front end, you know that there are multiple ways to specify the font size in css. This article describes each of the font size units and provides recommendations on which one to use when. Lets dive into it.

Pixels (px)

This is the most commonly used unit of font size. You must have used/seen font sizes depicted with postfix px. Thats how this unit is indicated. Now you know screen displays are made up of pixels. Thats exactly what this unit indicates. Whatever the size you mention, thats the number of pixels browser will use to render your font text.

Using pixels might affect the accessibility though as it wont honor the font sizes that users will do through browser settings. In other words font sizes wont be responsive.

Users can still press ( cmd + ) to zoom in which will increase the font size.

Point (pt)

This is another absolute unit for defining font sizes. 1 point = 1/72 of an inch. This has the same issue as pixels with accessibility.

Em

This unit makes the font sizes relative to the parent element. So if you set font-size: 1.5em; that the font size will be 1.5 times of the parent element. Em units scale seamlessly.

Rem (Root EM)

This unit makes the font sizes relative to the root element. When used the size wont be affected by the parent font sizes. The issue with rems is they arent supported in some of the older browsers.

Percentages (%)

This is another font unit which defines font size in relative terms. When used this specifies the font size relative to the parent. Beware this has the same issue as rem/em where font size increases can cascade into adverse effects in child element.

Viewport based font sizing ( vh, vw)

NOTE : THIS MIGHT NOT BE THE BEST WAY TO DO FONT SIZES

Vh / Vw units indicate the font size relative to the view port size. This is another great way to make font sizes responsive. You would need to check if the browser supports these units though.