Use absolute size keywords to set the text size on your pages.
Although I am on record as advocating the use of em units as the best way of setting text sizes on web pages, an alternative unit of measurement has recently been working it's way into my consiousness; namely, 'absolute size keywords'.
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, e.g. . 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 the use of absolute size keywords in your webpage design.
- 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).
Unfortunately there are some problems with absolute size keywords - mostly due to the inconsistent browser support. However techniques have been developed that can help you get around most of these problems; the most useful 'workarounds' are summarized in the article at http://www.happycog.com/thinking/colophon.html