Relative font sizes Vs. Browser zoom functionality
Saturday, 13 February 2010
I was recently asked a question about whether we can rely solely on the browsers inbuilt zoom functionality instead of using relative fonts in our web design. This is an issue which seems to have two strongly conflicting schools of thought… here was my response, please let me know your views on the subject :
-----
To be honest, I don't think there is a straight answer. However on the whole, I would say that relative font sizes are *still* important in accessible webdesign, particularly as you can never be sure who, or indeed, how the user will access your site.
Most of the modern browsers do have great "zoom" functionality. They use what is called "page zooming" which quite literally zooms in on the entire page (text, imagery, formatting, etc). However, some older browsers (IE6 springs to mind…) only gave the option to "text zoom". This scaled the text size up (or down) while maintaining the layout of the page. Since several old browsers are still used by some users, we should strive to support these older browsers as much as possible.
My opinion is that we should still code webpages using relative text sizes. This really gives the user (and the web designer to some extent) the ability to make their own choice as to whether they increase the size of the text alone (using text scaling) or zooming in on the page using "page zoom".
Relative font sizes can be fiddly to get right, but I usually find it pays off in the end. Some websites can display better if the text has been scaled, rather than zooming. One of the main reasons is that page zooming often results in horizontal scrolling, which I believe to be a usability no-no, particularly as it reduces page scannability. Admittedly, text scaling can make webpages look terrible (if the layout was not designed to be liquid) but it usually maintains the page dimensions and retains normal (vertical) scrolling.
---
Posted byCharlie M at 03:32 0 comments
Labels: accessibility, browsers, discussion, fonts, relative, zoom
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 2 comments
Labels: absolute, accessibility, font, relative