Typography on the Web

by will

Typography on the web resembles print typography only superficially. There are important limitations with units, fonts, styles, and effects.

In web design, there are a few common units used for setting the sizes of elements. They are:

percentage
em em is a multiplier applied to the current font size: 1em is equal to the current font size, and 2em means 2 times the current font size.
pt points, 1 pt is the same as 1/72 inch
px pixels, a dot on the computer screen

For a full list, see W3Schools.

The rub is that all of these units are converted into pixels for display on the screen. Each OS and browser use a slightly different algorithm for this conversion; generally 9pt=12px but that will vary depending on the settings of the individual computer.

These differences are relatively minor (1 or 2 pixels) when applied to text alone, but can become unbearable when specifying line height, letter spacing, word spacing, etc. When displayed on-screen, extra care must be taken to consider these uncontrollable discrepancies in font rendering algorithms.

Therefore, the following css units are generally used by Black Dog Studios for setting font sizes on fixed-width layouts:

font-size: px
line-height:
letter-spacing: em
word-spacing: em
margins: px (sometimes em)
padding: px (rarely em)

We of course do our best to match design comps which use points or an unknown unit; however Black Dog Studios cannot guarantee pixel-perfect (or sub-pixel-perfect) accuracy when making these conversions.

The following links are to articles and tools related to the conversion between px, pt, em, and %.