Problems with the use of CSS relative units
Cascading Style Sheets give Web designers many more options when specifying their type; now it is possible to set many presentation attributes with precision, including size, colour, position on the page, margins, line height and style. But it is not all good news when it comes to using style sheets.
Ironically the introduction of Cascading Style Sheets makes it easy to design pages that contain inaccessible text. As demonstrated earlier, it is now possible to specify fonts that are smaller than the readable threshold on many systems - or text that is so big it is unusable. It is also possible to take away the ability of the end user to resize text according to their needs.
Potential problems are likely to come from any of the following areas.
- Browser bugs: see browser bugs and workarounds, and Jeffrey Zeldman's article outlining what he sees as the main problems with using em units (http://www.zeldman.com/daily/0502c.html#emz).
- Incorrect HTML markup: use the W3c's HTML validation tool to validate your pages and avoid problems related to incorrect HTML.
- Incorrect CSS implementation: use the W3c's CSS validation tool to validate your style sheets.
Even when using the 'venerable' em unit, it is possible to end up with text that will be unreadable by some visitors to your site. As I demonstrated in an earlier section, problems can occur if developers are unaware of the hierarchical nature of HTML (and the way CSS uses that hierarchy) - but there is also a potentialy more serious problem related to a feature in a number of browsers that allows users to resize the text.
Problems with the use of em units.
Gez Lemon of Juicy Studio got in touch after reading an earlier edition of this eBook:
"I used to specify ems for font-sizes, but IE has a problem with the ratios when increasing and decreasing the text size. The ratios it uses between smallest, smaller, medium, larger, and largest are too big. If someone has his or her default text-size set to smallest in IE, the text is unreadable, which is obviously an accessibility issue."
Gez makes a very good point; if users have there browser preferences set to 'smallest' - text set below 1em can appear so small that it slips below the threshold of readability.
He goes on to say that he decided to use percentages instead of ems, as using percentages does not appear to lead to the same problems. I am not aware of any accessibility issues related to using percentages (although having said that - no doubt someone will now alert me to potential problems), so I would not argue against his choice - in fact, it's a good choice.
Percentages and ems do not act the same - even though logically they should; .8em should be the same as 80%, and .96em should be the same as 96%. However the reality seems to be that there are bugs when using em units do not exist when using percentages.
My favoured unit for sizing text has - to some extent - been based on the my in-built prejudice that ems are the most logical and appropriate unit for specifying text sizes (I blame the book The Mac is not a Typewriter by Robin Williams for my affliction). Unfortunately that is not a good enough reason, if they don't actually work in practice.
So I have a dilemma: - I would like to provide a simple message: ems are the way to set the size of the text on your pages.
But in reality I need to change my message to: in an ideal world I recommend the use of em units - but please be aware that work-arounds will be required due to current browser 'features' which can result in text being too small to read.
Luckily we do not need to abandon the use of em units entirely - there are workarounds.
Workarounds to the problem of using em units.
Set the base font size to 100%
Owen Briggs has discovered that setting the base font size to 100% cures many of the problems - and text remains at a readable size in most browsers - even when the user chooses the smallest size from their text re-size menu. Unfortunately this fix doesn't work consistency for Opera users (Rijk van Geijtenbeek provides information about the bug).
Use Javascript
Matt Round has provide a workaround based on the use of Javascript; the script checks the text size after it is loaded into the browser, and resizes it if it is found to be too small (very smart). However, using Javascript does creates its own problems; not all browsers support javascript, and some people will have it turned off. The fix 'only works in modern, DOM-capable browsers' and does not work consistently in all modern browsers (e.g. there is a problem with text within tables when using IE for the Mac).
Use percentages to set a size in the body selector, and then use ems for everything else.
Owen Briggs has done a lot of work in relation to the text size problem - and has provided a workaround that appears to work well in all browsers:
"Anyhow, I played about and found you can make a nice ems stylesheet with P text at 1.0 em, and then downsize the whole thing by selecting size in BODY with %, like 76%. It's simple, easy to change, and works for everything. Score 1 for late nights and coffee. Enjoy. "Owen Briggs
Owen's article Sane CSS Sizes is worth reading, and you should also check out the 'generic text styles template' he provides as an example of how to implement the fix.
What units to use
Choose from any one of the following: em units (with workarounds), absolute keywords (with workarounds), or percentages; all are relateive units of measurements, and all, with the appropriate care and attention, will ensure the text on you pages is accessible to your visitors.
Index | Next: What about using BIG and SMALL tags?