Tutorial 22: The Font of Foulness, Part I: Size Matters
|
| ||||
| ||||
|
|
Font sizes using CSS
In Navigator and Internet Explorer, the seven font sizes correspond directly to the seven absolute font sizes that can be set in the font-size CSS property (I mentioned these in Tutorial 7). The only general trouble with this replacement is that the mapping is not correct; size 3, which is the default font size, is the same as font-size: small, while the medium font size, which is supposedly the default in CSS, is the same as size 4, which is one step larger than the default. This discrepancy is shown in the following example:
<TABLE> <TR> <TD><FONT SIZE="1">Foobar 1</FONT></TD> <TD><SPAN STYLE="font-size: xx-small">Foobar xx-small</SPAN></TD> </TR> <TR> <TD><FONT SIZE="2">Foobar 2</FONT></TD> <TD><SPAN STYLE="font-size: x-small">Foobar x-small</SPAN></TD> </TR> <TR> <TD><FONT SIZE="3">Foobar 3</FONT></TD> <TD><SPAN STYLE="font-size: small">Foobar small</SPAN></TD> </TR> <TR> <TD><FONT SIZE="4">Foobar 4</FONT></TD> <TD><SPAN STYLE="font-size: medium">Foobar medium</SPAN></TD> </TR> <TR> <TD><FONT SIZE="5">Foobar 5</FONT></TD> <TD><SPAN STYLE="font-size: large">Foobar large</SPAN></TD> </TR> <TR> <TD><FONT SIZE="6">Foobar 6</FONT></TD> <TD><SPAN STYLE="font-size: x-large">Foobar x-large</SPAN></TD> </TR> <TR> <TD><FONT SIZE="7">Foobar 7</FONT></TD> <TD><SPAN STYLE="font-size: xx-large">Foobar xx-large</SPAN></TD> </TR> </TABLE>
| Foobar 1 | Foobar xx-small |
| Foobar 2 | Foobar x-small |
| Foobar 3 | Foobar small |
| Foobar 4 | Foobar medium |
| Foobar 5 | Foobar large |
| Foobar 6 | Foobar x-large |
| Foobar 7 | Foobar xx-large |
If you are using Navigator 4 or Internet Explorer, you'll notice that you can't just use medium as your default font size and then just scale from there (Note: Mozilla/Netscape 6 gets this right, with font-size: medium being the same as size 3). The solution is, generally, to avoid the absolute font size values for the font-size property.
Another possible solution is using length values as font sizes. A little experimentation showed that Navigator 4 and Internet Explorer use the following point sizes for the seven absolute sizes:
<TABLE> <TR> <TD><FONT SIZE="1">Foobar 1</FONT></TD> <TD><SPAN STYLE="font-size: 8pt">Foobar 8pt</SPAN></TD> </TR> <TR> <TD><FONT SIZE="2">Foobar 2</FONT></TD> <TD><SPAN STYLE="font-size: 10pt">Foobar 10pt</SPAN></TD> </TR> <TR> <TD><FONT SIZE="3">Foobar 3</FONT></TD> <TD><SPAN STYLE="font-size: 12pt">Foobar 12pt</SPAN></TD> </TR> <TR> <TD><FONT SIZE="4">Foobar 4</FONT></TD> <TD><SPAN STYLE="font-size: 14pt">Foobar 14pt</SPAN></TD> </TR> <TR> <TD><FONT SIZE="5">Foobar 5</FONT></TD> <TD><SPAN STYLE="font-size: 18pt">Foobar 18pt</SPAN></TD> </TR> <TR> <TD><FONT SIZE="6">Foobar 6</FONT></TD> <TD><SPAN STYLE="font-size: 24pt">Foobar 24pt</SPAN></TD> </TR> <TR> <TD><FONT SIZE="7">Foobar 7</FONT></TD> <TD><SPAN STYLE="font-size: 36pt">Foobar 36pt</SPAN></TD> </TR> </TABLE>
| Foobar 1 | Foobar 8pt |
| Foobar 2 | Foobar 10pt |
| Foobar 3 | Foobar 12pt |
| Foobar 4 | Foobar 14pt |
| Foobar 5 | Foobar 18pt |
| Foobar 6 | Foobar 24pt |
| Foobar 7 | Foobar 36pt |
These sizes are probably not entirely correct, especially if you consider how many different versions of the browsers are rolling around. But, as we have mentioned before, predicting the exact size of text on a user's screen is impossible on the Web. Even if you use the values shown above, some users may have set their default font size to something different from 12 points, and the results would look strange.
More importantly, most users will not correctly inform their browser of their display's resolution (usually expressed in dots per inch, or dpi for short), which is used to convert lengths to pixel values that are appropriate for the user. This could cause 12pt fonts to appear tiny on a 17-inch monitor displaying a screen 1600x1200 pixels large and huge on the same monitor displaying a screen 800x600 pixels large if the user hasn't changed his dpi setting to match his screen size.
