Understanding Font Sizes & Dimensions

Fonts can be sized using several different units. Three common ways are discussed below.

Pixels

You can size fonts by giving them specific pixel dimensions. Computer screens are made up of thousands of tiny little square pixels. Each pixel can alternate between an array of colors that mix Red, Blue, and Green. All of these pixels put together create the image on the screen. We can use the number of pixels to represent the square width and height of a single character area. The down fall of using pixels to represent font sizes is that different screens have different total number of pixels (different resolutions) and will thus fonts will look different sizes from monitor to monitor. To see how fonts will look on your screen, see the figure below.

10px 12px 14px 16px 18px 24px 36px 48px

We can also use pixels to size the width, height, margin, padding, etc of elements such as <hr />.

Percentages

You can also base font sizes off of percentages of the browser's default font size or the containing element's font size. The danger in this area would be that as a user changes their default font size, it can scale your font to unexpected sizes.

50% 75% 100% 125% 150% 200% 300% 400%

EMs

The final acceptable way to size fonts is based on a unit of measurement called an em.

Ems are so-called because they are thought to approximate the size of an uppercase letter M (and so are pronounced emm), although 1 em is actually significantly larger than this. Robert Bringhurst describes the em thus:

[t]he em is a sliding measure. One em is a distance equal to the type size. In 6 point type, an em is 6 points; in 12 point type an em is 12 points and in 60 point type an em is 60 points. Thus a one em space is proportionately the same in any size.

Ems are similar to percentages in that they are scalable and based off the default text size of the containing element or browser. Where ems prove more useful is that ems always refer to the font-size so if we use ems to specify width, height, margin, padding, etc. we are basing it off of the font as opposed to the element itself.