Using relative units when setting CSS text sizes will make your web pages accessible to a wider audience.

There is no one ‘perfect size’ for text on the web; different people prefer different sizes. Personally (now that I need reading glasses) I prefer the text on web pages to be quite big, so that I don’t have to squint to read it. With this in mind I have set the text size preference in my web browser a few points larger than the default.

However I still come across text on web pages that is too small for me to read, i.e., there are pages that ignore the preferences that I have set in my browser. These pages are less accessible to me, because the designer has tried to take absolute control over the text I see on my screen. That usually means the have used an absolute unit of measurement, such as points or inches, when setting the size of text on the page.

To ensure that the user of your web pages can set the size of text to suit their own preferences you should either not set a text size at all, or control text sizes with relative units in a Cascading Style Sheets (CSS). Relative units are em units, percentages, relative keywords such as smaller or bigger.

More detailed information about this can be found in my book ‘Accessible Web Typography, an introduction for web designers’. It’s now fairly old – and a bit out of date – but it is still very useful if you are new to the subject. Download a free copy from www.jimbyrne.co.uk/fileuploads/accessiblewebtype.pdf

Links

Accessible Web Typography, an introduction for web designers: www.jimbyrne.co.uk/fileuploads/accessiblewebtype.pdf