In this post, I’d like to look into the CSS property known as font-size. This property is very widely used and can be seen on nearly every site. You might have guessed that it allows the developer to define the size of the text, but it can be implemented in a number of useful ways. Let’s take a look.  

Font-size can be specified in several different ways. When font-size is absolute, a fixed size is given to the text. This can come in the form of a keyword such as “xx-small” or “large”, or a unit of measurement. Pixels, inches, points, picas, millimeters, and centimeters are all accepted units. A notable drawback of using absolute font–size is that the user is unable to change the size unless they change it on their browser. Do people do this? As a matter of fact they do. Still, from an accessibility standpoint, this is not ideal. This CodePen shows the static nature of absolute text. Click ‘Edit on CodePen’ in the upper right corner. Note how that when the window is resized, the text size does not change.

See the Pen
absolute example by Andy Miller (@AndyMiller)
on CodePen.

Relative units are more flexible than absolute units and can be useful when building responsive sites. Keywords such as “larger” or “smaller” set the size of the text in relation to that of its parent element. A percentage value can be used as well. Percentages are always relative to another value. The em unit is based on the font–size the current element. Like percentage units, ems are both scalable and responsive. Here is an example from the Penn State in which text size is set using ems: 

Fun fact: The em got its name from the early days of metal type in which the capital ‘M’ was cast in a square block; its height and width the same.

Another unit, the rem, disregards styling from all parents except the root, or html, element (hence rem, root + element). Here is a CodePen example of the rem in action. Notice how the font sizing in the h3 bypasses its parents’ size and takes its size directly from html element.

See the Pen
rem example by Andy Miller (@AndyMiller)
on CodePen.

Yet another option for setting font-size is in relation to the dimensions of the viewport.  When using viewport height, a value is placed before vh. For example, 25vh indicates the font-size as 25% of the entire height of the viewport.  The CodePen below shows text that has been sized using viewport width. Try resizing the window horizontally and notice how, unlike in the first example, the text changes with the window size. 

 

See the Pen
viewport example by Andy Miller (@AndyMiller)
on CodePen.

So, which is the best way to set font-size on your site? As with most absolute units, it can be seen as bad practice to rely on pixels, as they are static and do not scale when browsers resize. However, pixels can serve as a practical choice if the actual size one is designing for is not known or if text needs to be sized in relation to an image, which would be measured in pixels. Pixels are the most common unit when working with absolute font-size. Save pt, in, mm, and cm for print work. Relative units are great for building responsive sites because they can scale up and down. It is important to keep in mind the sizes of the parents when using them. Inherited sizes can cause a lot of confusion. When your goal is to have font-size scale, it is best to think of what you want it to scale in relation to on your site.