Tutorial 22: The Font of Foulness, Part I: Size Matters
|
| ||||
| ||||
|
|
The Only Solution Left: Percentages
The only other way left to specify font sizes in CSS is using percentages. Percentages actually work very well in both browsers.
If you're designing a new site, I recommend that you use steps of 120% between font sizes. The CSS2 specification recommends that the scaling between absolute font sizes be 1.2 (e.g. large is 1.2 times the size of medium), but both Navigator 4 and Internet Explorer tend to veer from this slightly; larger and smaller have other problems, as we saw earlier, and absolute font sizes in lengths don't port very well between setups.
If you're simply replacing the FONT elements in your old documents with CSS rules, the ideal scaling between sizes is illustrated in the following table:
<TABLE> <TR> <TD><FONT SIZE="1">Foobar 1</FONT></TD> <TD><SPAN STYLE="font-size: 70%">Foobar 70%</SPAN></TD> </TR> <TR> <TD><FONT SIZE="2">Foobar 2</FONT></TD> <TD><SPAN STYLE="font-size: 84%">Foobar 84%</SPAN></TD> </TR> <TR> <TD><FONT SIZE="3">Foobar 3</FONT></TD> <TD>Foobar</TD> </TR> <TR> <TD><FONT SIZE="4">Foobar 4</FONT></TD> <TD><SPAN STYLE="font-size: 120%">Foobar 120%</SPAN></TD> </TR> <TR> <TD><FONT SIZE="5">Foobar 5</FONT></TD> <TD><SPAN STYLE="font-size: 150%">Foobar 150%</SPAN></TD> </TR> <TR> <TD><FONT SIZE="6">Foobar 6</FONT></TD> <TD><SPAN STYLE="font-size: 200%">Foobar 200%</SPAN></TD> </TR> <TR> <TD><FONT SIZE="7">Foobar 7</FONT></TD> <TD><SPAN STYLE="font-size: 300%">Foobar 300%</SPAN></TD> </TR> </TABLE>
| Foobar 1 | Foobar 70% |
| Foobar 2 | Foobar 84% |
| Foobar 3 | Foobar |
| Foobar 4 | Foobar 120% |
| Foobar 5 | Foobar 150% |
| Foobar 6 | Foobar 200% |
| Foobar 7 | Foobar 300% |
These scalings produce identical results to the FONT absolute sizes in Navigator 4, Internet Explorer and Gecko-based browsers.
