One CSS rule I have learned is that you should use the relative ’em’ font-size unit instead of the absolute ‘pt’. The general idea is to set the font-size in your body tag to e.g. ‘94%’ and then set all other elements with an ’em’ size like this. The reasoning is:
- you can then change the relative size of all the font sizes on your site by modifying the body’s font-size at one point
- users themselves can modify the size of the fonts since they are defined in ’em’
However, when using ’em’ instead of ‘pt’ I constantly run into issues such as the following where an element with font-size gets embedded in another element with font-size and thus becomes tiny (in the case below one vocabulary word is .8 of .8 and the other is .8 of 1.2).
<html> <head> <style type='text/css'> body { font-size: 94%; } p { font-size: .8em; } li { font-size: 1.2em; } .vocabulary { font-size: .8em; } </style> </head> <body> <p>This is an <span class='vocabulary'>egregious</span> test.</p> <ul> <li>This is in a <span class='vocabulary'>superb</span> list.</li> </ul> </body> </html> Of course in very simple, straight-forward HTML sites this is no problem, but in the real world with imported stylesheets that perhaps you didn’t even make and with dynamic sites where controls are embedded in other controls all of them outputting HTML with perhaps in-line styling, I find websites with ’em’ unit font-sizes are sometimes impossible to maintain and the way to get font-size under control is to just convert everything to hard ‘px’ sizes.
In addition, I just checked the four main browsers and each of them have hotkeys which increase and decrease the size of ‘pt’ styled fonts.
So here are my questions:
- is there any real-world reason why I should use ’em’ instead of ‘pt’?
- is there trick in using ’em’ sizes so that I don’t run into the embedded font-size issue above?
Depending on the country where you live, you might actually end up breaking the law using pt instead of em, depending on how hard your legislature want to enforce rules. Here in the UK, there is a disability discrimination act, which has been used to target companies where their websites have been rendered in a fixed font. This is treated as discrimination because it disadvantages the partially sited who may have increased their browser font sizes to compensate – but your site still renders fonts at the size you set, and not at the size they would expect.
Yes, it’s harder to get to grips with relative font-sizes and fluid layouts, but if you want to comply with legislation, you have to take the time to get to grips with this.
For local government work in the UK, targets have been set to ensure that websites follow Double A guidelines, one of which states ‘Use relative rather than absolute units in markup language attribute values and style sheet property values’. See here.