HTML and CSS Standards

Scalable Sizes of Type

Graphics industry people will think in terms of points, or ems, which are even more complex to handle than points, because the sizes corresponding to pixels are not intuitive. It is probably better to learn sizes in percentages—roughly six percentage points per pixel. The only trickiness is in the smaller sizes; larger than 100% it becomes less critical.

Gecko limits the minimum size of type to x-small except under Mac OS X.

Opera has its own quirks, where xx-small and x-small are the same size and several sizes, 56%, 62%, 68%, 106%, 112%, and 118%, are smaller than with MSIE and Gecko. Opera is apparently truncating instead of rounding the conversion of percentages to pixels. That means that the correct percentages to use for these sizes are 57%, 63%, 69%, 107%, 113%, and 119% in order to keep sizes consistent across browsers. Opera rounds ems, as do MSIE and Gecko under Windows. MSIE under OS X (does anyone use it any more?) is similar to Opera, but with some added quirks I haven't taken the time to analyze.

Safari apparently can't do arithetic, since it thinks that 50% of 16 pixels is 9 pixels and therefore equivalent to 56% and 57%.

The sizes of 17px/13pt/106%/107% may look a little strange in Verdana because they're on the transition between a single pixel to a multiple pixel representation of the line weight of the characters, at least in some browsers. Other typefaces may have similar issues; that's part of the cost of working in a digital, rather than analogue, world.

I prefer an Alternate Scalable technique. It does not display the above quirks except that xx-small and x-small are still the same size in Opera.

—————| 7 pixel

—————| 8 pixel

—————| 50%

—————| 6 point

—————| 9 pixel

—————| xx-small

—————| 0.55 em

—————| 56%

—————| 57%

—————| 7 point

—————| x-small

—————| 0.6 em

—————| 62%

—————| 63%

—————| 68%

—————| 69%

—————| 0.7 em

—————| 8 point

—————| 75%

—————| 0.75 em

—————| 9 point

—————| small

—————| 0.8 em

—————| 82%

—————| 10 point

—————| 88%

—————| 0.9 em

—————| 94%

—————| 11 point

—————| medium

—————| default

—————| 1 em

—————| 100%

—————| 12 point

—————| 106%

—————| 107%

—————| large

—————| 1.1 em

—————| 112%

—————| 113%

—————| 118%

—————| 119%

—————| 1.2 em

—————| 14 point

—————| 1.3 em

—————| 132%

—————| 16 point

—————| x-large

—————| 150%

—————| 1.5 em

—————| 18 point

—————| xx-large

—————| 200%

—————| 2 em

—————| 24 point

—————| 300%

—————| 3 em

—————| 36 point