What relative unit is best?
So far, in relation to CSS, we have discounted the use of absolute units for setting the size of the text on web pages. What then is the best relative unit to use?
Our candidates are:
- em units
- en units
- percentages
- relative keywords
- absolute size keywords
- pixels
In reaching a conclusion about the best unit to use, it is worth reminding ourselves of the following points:
- Pixels are a relative unit only in relation to screen resolution. For many users it will be very difficult or impossible to change the size of the screen text if pixels have been used.
- Typographers have traditionally used em units rather than percentages or relative size keywords, to express the size of type.
- Em units and percentages are not interchangeable when creating page layouts, e.g. you can't use em units to set a margin that is equivalent to 10% of the page width. Luckily it doesn't work like that the other way around; you can safely use percentages to set the size of text.
- Inconsistencies in browser support create problems when using absolute size keywords. (However, I would not rule out the use of absolute size keywords, as there are workarounds for many of the problems.)
- Using em units to set text smaller than 1em will make the text unreadably small for many people who have their default browser size set to smallest
- Using en units to set text size is essentially the same as using em units, but it harder to calculate text sizes with en units.
The logical choice is to use em units - but there are problems.
The hierarchical nature of HTML, and the way CSS uses that hierarchy can make setting small text sizes a problem. Careful markup of your content, is all that is required to ensure that this is not a problem on your pages.
Unfortunately there is a more important issue related to using em units; setting text sizes smaller than 1em can mean the text ends up too small for some users to read, i.e. peoplewho have their preferences for text size set to 'smaller' in their browsers. I will discuss this issue shortly and suggest possible workarounds.
Absolute size keywords are also a good choice - but workarounds are required
It is not possible for text to become unreadably small, or unusably large when absolute size keywords are used to set text size; this is the best reason for adopting them as your unit of choice. However, workarounds are required to overcome the problems caused by inconsistent browser support, and some up-front learning is needed before you start to use them.
Unfortunately there are likely to be problems no matter what unit of measurement you decide to use, em units and absolute size keywords are - in terms of accessibility - good choices as long as you are aware of the problems and can put into place the appropriate workarounds. Percentages are also a good choice for setting the size of text on your pages - but as they are not used much by web developers, there may be problems with using percentages - but they have not yet been discovered.
Index | Next: Problems with the use of CSS relative units