Rule 10: Adjustable font size

The font size should ideally be left to the user to decide. There are schools of though that favor somewhat reduced font size, since (they claim) typical browser default font size is too large and most people don’t change it. If you decide to follow that school, you might set the copy text font size to a percentage somewhat smaller than 100%, but hardly below 85%.

Consider the simple case where a web page would set its own font size but only as an overall size, not with different sizes for different elements. This would mean something like body { font-size: 10pt; } in a style sheet. From the accessibility point of view, the basic alternatives are, starting from the best:

1. Do not set the font size at all (i.e., leave it to the browser and the user). This is in practice equivalent to setting body { font-size: 100%; }. (There might some technical reasons, related to browser bugs, to use such settings, though they are logically redundant.)
2. Set the font size to a percentage such as 90%, but not below 85%. If you do this, you should also set the font face to a sans serif-font, e.g. Arial.
3. As above, but using the keyword small. Setting font-size: small sets the font size one step smaller than the default, with a browser-dependent step size. This is still readable to most people, and users can increase (on most browsers) the font size in a simple way if they need to.
4. Set the font size in points, to a value between 10pt and 12pt. At least for 10pt, set the font face to a sans-serif font.
5. Other settings. The px (pixel) unit may relate to points in slightly different ways, so that e.g. 10pt might correspond to 13px or 14px. Apart from such issues, there is no big difference in accessibility between using pixels and using points. Setting the font size smaller than 10pt tends to cause severe problem to many users.

Assuming you did not design a page yourself, how do you know what it does to the font size? The first test is to view the page on IE with default settings. If the page does not set font size, i.e. leaves it to the user, the font size is normally 16 pixels (16px), which typically means 12 typographic points (12pt). The following example shows 12pt text in some commonly used fonts (if your browser can display them). It can be seen that the actual sizes of letters depend both on the font size and on the font face.

Second, using IE, select View > Text size and select the option Largest. If the font sizes on the page do not change, the reason is that the page sets font sizes in physical units, not percentages. This indicates a serious accessibility problem, though the seriousness depends on the actual font size used and the kind of disabilities that users have. Very small font sizes like 12 or even 9 pixels are problematic to many users.