Using absolute size keywords
Absolute size keywords are advocated by many web savvy designers as the ultimate answer to the 'how to set the size of text' problem.
Despite the name, absolute size keywords are actually a relative measurement; text size is calculated relative to the default font size set in the user's browser. The idea is that they replace the sizes previously provided by the font tag - the following absolute size keywords are available for your style sheet:
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
Why absolute size keywords are a good idea
There are at least four very good reasons for adopting absolute size keywords as your relative unit of choice:
- Absolute size keywords are a relative unit of measurement, allowing users to resize text to suit their own needs.
- The size of absolute size keywords will be based on the default size set in the users browser. If the user has set a font size that they are comfortable with, their preferences will not be undermined by your use of absolute size keywords.
- Absolute size keywords do not suffer from the 'inheritance' problems related to using em units, percentages, and the relative keywords, bigger and smaller. It is not possible for text to become unreadably small, or unusably large (in standard compliant browsers); e.g. a keyword used to set the size of a paragraph does not inherit the value of a keyword set in the body element (or any other parent element) - small is always small, xx-small is always xx-small.
- In the most up-to-date Internet Explorer browsers, xx-small, the smallest size, will never be smaller than 9pt (the readability threshold on a Mac).
In relation to Absolute Size Keywords, Jeffrey Zeldman writes,
"If implemented correctly and uniformly, these seven keywords would allow designers to specify approximate sizes without running into either of the accessibility problems associated with pixels.... For that reason, the W3C recommends their use." (see Fear of stylesheets 4 )
Great, I'm thinking, I should really start using these keywords instead of em units in my website. But in the next paragraph I read,
"Unfortunately, absolute size keywords are unusable in many current browsers, since in our estimation only IE5/Mac (and possibly Opera 4) renders them correctly."
The idea of absolute size keywords is a good one, and in theory I would recommend them. However, there are some problem; the main problem is inconsistent browser support.
In older browsers such as IE3 and Netscape 4.5, absolute size keywords are supported, but their implementation is so flawed that using them can make pages unreadable (e.g. xx-small sets text to 6pt, which is below the threshold of legibility).
In the more recent browsers, IE4, IE5 and IE6 for windows there is a problem in the way keywords are related to the default size set in the users browser. Logically you would think that the keyword 'medium' would mean 'use the browser default size' - but it doesn't. Medium actually sets the text size one size bigger than the browser default - and this makes the text look far too big to most users.
Most of the current browser versions including Netscape 6+ and IE5 for the Mac and the Mozilla browser implement absolute keywords correctly. The problem with deciding to use absolute keywords is the inconsistency between these new browsers and the older browsers, which many people are still using.
There are workarounds to these problems, most notably the work done by Todd Fahrner and Tantek Celik which you will find described the article called Size Matters published on the website 'A List Apart', .
Workarounds are required
I would not dismiss out of hand the use of absolute keywords; if you are prepared to spend the time understanding the issues and implementing the workarounds they are a good solution, and certainly worth investigating.
To get you started, Jeffrey Zeldman and Eric A. Meyer discuss the issues at length. The Happy Cog website at http://www.happycog.com/thinking/colophon.html also outlines a way to get around the problems.
Index | Next: Why not use pixels?