Using Cascading Style Sheets
Using style sheets to set the text size is my preferred approach as it has advantages over the other methods; document structure can be divorced from presentation, page size can be reduced, leading to pages that are faster to download (particularly by avoiding having to use hundreds of FONT tags) - and redesigns at least in theory should be quicker.
With CSS text size can be set using the font-size property and one of the following relative units of measurement:
- Em, en or ex units
- Percentages
- Relative keywords
- x-height
- Absolute keywords
- Pixels (see below for my discussion of pixels and why I don't recommend their use)
Setting text size with the Em unit
For the body selector we could write the following:
body
{
font-size: 1em;
}
In the above example I have used a unit of measurement which will be familiar to traditional typographers, the em unit.
I will use the em unit to outline the main techniques for using relative units and to alert you to potential problems.
On the Web 1em unit is equivalent to 100% of the text size set by the parent element. (Notice I said 'set by the parent element' and not 'set by the browser default'. This is an important idea to remember - and we will look at how this works shortly.)
Even when using relative units, there are still quite a few pitfalls to avoid if you are to ensure that your pages are accessible to everyone. The first possible problem is related to how inheritance works in CSS.
Knowledge of the 'hierarchical' nature of HTML, and how CSS uses that hierarchy will be your first defence against ending up with inaccessible pages. A few examples should make the reasons apparent.
Index | Next: Em units in practice