3.1.1 Don’t compose without a scale
“In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. […] Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”
Sizing text in CSS is achieved using the font-size
property. In print, font sizes are specified absolutely, for example setting text at 12 points implies a particular physical height for the printed text. On the web, font sizes can be set absolutely or relatively, and in a number of different units. What’s more, most web browsers enable the reader to resize the text to suit their own reading environment and requirements.
For text which is to be printed, the font-size
property can and should be used to set in text in points, for example:
p { font-size: 12pt; }
For text which is to be read on screen, the situation is slightly more complicated. Arguably the most appropriate unit is pixels which is a unit relative to the screen resolution. Setting text sizes in pixels gives web designers precision similar to that afforded to print designers. However, Internet Explorer does not allow readers to resize text set in pixels (although IE7 does provide full page zooming), so we need to look to other units.
Sizing text using the em
unit is the next most appropriate approach. The em is a true typographic unit and was recommended by the W3C from the outset of CSS. Ems are a relative unit and act as multipliers based on the text element’s parent element. Thus, if the body
of a web page has 16 px text by default, making paragraphs render at 12 px would require setting paragraphs at 0.75em
.
p { font-size:0.75em; /* 16x0.75=12 */ }
One further problem arises with this method: IE6 and IE7 unacceptably exaggerate the smallness and largeness of the resized text. This can be solved by setting a percentage font-size
on the body
.
So choosing from the traditional scale, our final font sizing style sheet could look as follows:
body { font-size: 100%; }
h1 { font-size: 2.25em; /* 16x2.25=36 */ }
h2 { font-size: 1.5em; /* 16x1.5=24 */ }
h3 { font-size: 1.125em; /* 16x1.125=18 */ }
h4 { font-size: 0.875em; /* 16x0.875=14 */ }
p { font-size: 0.75em; /* 16x0.75=12 */ }
More details and analysis of font sizing can be found in How to Size Text in CSS.