Relative font sizes for accessibility
Sunday, 9 August 2009
I wanted to do a really quick post on the accessibility benefits of using relative font sizes in web design. It is something which is usually easy to implement, yet is still often overlooked by designers.
When presenting text on a webpage, there are various ways to specify the font size. Some argue it is best to leave the font size to the default size as specified by the browser, but for most web users this is likely to be too large.
Although widely supported by browsers, pixel sizes (px) are not accessible. They fix the size of the text. Points (pt) are another font size option, however, they are displayed inconsistently across different screen resolutions.
So, on to Percentages and Ems. These are relative measures rather than absolute. They are configured by the users font size, and can be adjusted using most browsers to suit the users needs. This basically means that if a visually impaired user needs to increase the size of the text in your website to read it comfortably... they can.
It is sometimes difficult however, to know exactly what percentage (%) font size to use to match up to a wireframe design, or pixel value (if you are converting directly). Therefore, this useful table below may help take out the guess work:
pixel
size (px) - percent (%)
10 - 77
11 - 85
12 - 93
13 - 100
14 - 108
15 - 116
16 - 123.1
17 - 131
18 - 138.5
19 - 146.5
20 - 153.9
21 - 161.6
22 - 167
23 - 174
24 - 182
25 - 189
26 - 197
(reproduced from diagram on Yahoo! Developer Network)
In a similar vein, I'm going to make a bold statement. Where possible for accessible design, use plain text rather than text included in imagery. This seems simple, and obvious, but it is still often overlooked... even by superb designers. If 'zooming' in on a page is necessary, then image's often become pixelated, often beyond recognition. I have worked with visually impaired Internet users who have needed to 'zoom in' to a webpage so much that only one or two letters are visible on their monitors- in this case the presentation of the characters is generally much clearer if its is a textual character written as plain text, rather than embedded in an image.
Please comment or drop me a line if you have any questions or thoughts on the topic.
In addition, if you need any help with the accessibility or user experience of your webpage, please get in contact with me directly via : Simplicity User Experience Optimisation.
Posted byCharlie M at 02:55
Labels: absolute, accessibility, font, relative
Quick question. What about the zoom functionality in your browser to read text. Is this an ok substitute for using relative text?
This question was answered via email. However, I have also written a blog post on the subject... "Relative font sizes Vs. Browser zoom functionality" : http://tinyurl.com/yfvjyyl
Best regards, Charlie