SYSK 214: in cm mm pt px pc em… You guessed it – this post is about font sizes

  • Article

Did you know that the “best practice” in terms of font sizes is to use em not px? Interested? Then read on…

 

When it comes to font sizes, they can be fixed, a.k.a. absolute, or relative, a.k.a. variable. As the name suggests, fixed font sizes do not vary based on browser settings or parent element’s style.

 

Absolute font-sizes were meant for printed pages; unfortunately, many web page authors use them for displayed pages because it’s less work and you can make it look “picture perfect”… just like the graphics designer’s mockup. On another hand, using relative font sizes allows the user to resize (increase/decrease) the text’s font size. People with visual disabilities are heavy users of this!

 

W3C recommendation is clearly stated: “Only use absolute length units when the physical characteristics of the output medium are know” (http://www.w3.org/WAI/GL/css2em.htm).

 

The following are the fixed sizes:

  • in (inches; 1 inch is equal to 2.54 centimeters)
  • cm (centimeters; 1 centimeter =10 millimeters)
  • mm (millimeters)
  • pt (points; the points used by CSS2 are equal to 1/72th of an inch)
  • pc (picas; 1 pica is equal to 12 points)

 

W3C relative units are:

  • em – “the 'font-size' of the relevant font” The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element.
  • ex -- the 'x-height' of the relevant font.
  • px -- pixels, relative to the resolution of the viewing device.

 

In Internet Explorer, when you change the size of the font, the pixel height stays the same, while the em size changes as expected. So considering accessibility issues, and the fact that as of Sept-30-2006 about 62.1% of web users use IE 5, 6 or 7 (source: W3Schools), you should use em.

 

Note: 1 em is equivalent to no size declarations. 0.8 em is approximately same size as 11 px, and is frequently used as the primary font size for the main body of the page.

 

What about the font size keywords? There are seven absolute-size keywords: xx-small, x-small, small, medium, large, x-large, and xx-large. These keywords often result in slightly different sizes on different browsers, but do maintain a relation to one another.

 

Finally, you can define sizes using percentages. This falls into the “relative” category. Note: 1em is effectively the same as 100% in terms of font sizing; 1.5em is the same as 150%, and 2em is 200%, and so on.

 

A bit of history: the em measurement unit has its origin in so-called “em box” or “design space” used in print typography, which is a

box 1

em high and 1 em. Usually, it’s big enough to contain any character for a given font. In other words, the font-size provides the size for the em box of the given font, and not the size of actual characters.

 

As you can see in the example below, the three capital letters X using Verdana 12 pt, Arial Narrow 12 pt and Courier 12 pt fonts correspondingly, appear as different sizes:

M M M

I used the capital M in this example, as, roughly speaking, 1 em box is determined by the capital M.