The W3C maintain a page of advice on how to size your fonts in CSS - last updated in April 2010. According to this page the very best way to style fonts is to use the "absolute" font-sizes:
even better, if a base font-size is set for the document, use absolute size ([ xx-small | x-small | small | medium | large | x-large | xx-large ]) or relative size ([ larger | smaller ]) when defining the font size for a particular element within the document.
The spec then defines these font-sizes in a table. As far as I understand this table, small
should be 2/3 (66%
) the size of medium
, and large
should be 4/3 (133%
).
If I test this out I get rather different results from my interpretation of the ratios specified by the W3C. The results are consistent across latest versions of Chrome, Firefox and IE, but do not tally up with the W3C recommendation. small
is 81.25%
instead of 66%
, and large
is 112.5%
instead of 133%
.
Does this mean that modern browsers are not supporting these standards from the W3C? Is there a new standard that superseded this one that I'm not aware of? Or have I misunderstood the meaning of that table from the W3C?
At the end of the day my question comes down to: Is it still the best practice to use absolute font sizes in CSS? Will it behave consistently across browsers? And ideally I would like to know what standard the modern browsers are following.
You misinterpret the table you link to. Medium is HTML font size 3, small is HTML font size 2, referring to the deprecated font tag and its 1..7 font sizes.
Anyway, if you want to honor the user's font size preferences, don't use font sizes such as 10px and the like. Medium means the user's preference. (Although the vast majority of users leave their preferred size on the factory default, because they don't know how to change it.)
@MrLister said in comments:
[ratio between absolute font sizes] differs between browsers .. . According to the W3C, it may even differ between fonts. In my personal experience, in some browsers there is also a difference between strict and quirks mode. So if you want consistency, don't use it. Establish a size for the body (either the size you want, or leave it up to the user) and then work with percentages or ems for the various elements
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With