html font sizing
Thursday, May 28th, 2009When specifying text size in HTML markup by way of the font-size attribute in CSS, the units used can be either absolute or relative. Absolute units (such as pixels) mean that the website designer retains more control over the appearance of the page, but that requests from web browsers for larger or smaller sizes will be ignored. When relative sizes are used (such as ems or percentages) some additional testing is needed to ensure that the page does not become illegible or jumbled at large and small point sizes, but the degree of convenience offered to those whose vision is less than 100% is, in my opinion, well worth the extra five minutes of testing. Furthermore, relative sizing allows for both automatic and manual adjustment of the font size on devices such as mobile ‘phones.
I visited 40 randomly-selected websites and checked each for compliance with requests from the web browser to increase or decrease the text size (note that this is not the “zoom” function present in some browsers, it should affect text only. The results are as follows:
| degree of compliance | %age of sites |
|---|---|
| full | 38% |
| partial | 30% |
| none | 32% |
“Full” means that all text on the site resizes as requested by the browser, and that the end result is still legible.
“Partial” compliance means that while much of the text might resize as requested, some of it does not (or the site becomes illegible due to text overlaps); the most common symptom here is menu text which stays at the same fixed size.
“None” means that, apart from some minor and accidental spacing changes, none of the text responds to requests for size changes.
