Font Size
Tue, 02/17/2009 - 22:14 — kvl5046
The main concern for font size is that they are not too small.
WYSIWYG Editors: Only Change Font Sizes When Necessary
Many low vision users use custom settings which enlarge text to the size of their choice (to levels of 300-500%). However some font size settings can interfere with that zooming mechanism. The easiest way to avoid this is to not rely on the default font settings especially for WYSIWYG editors.
9 Point/Pixel Minimum
If you are using a WYSIWYG editor and it provides a set of font size options for smaller text, then make sure no font size is smaller than 9 point or 9 pixels. Font sizes at 8 points or smaller can be illegible on a Macintosh, as in the example below (see the "Points versus Pixels" section below for an explanation).
The minimum font size only applies to footers, such as a copyright statement. For body text, you should leave the font size set at the default (which is usually set between 12-14 points).
8 Point Text on a Mac
The image below shows how 8 point text can be rendered in some browsers.
BIG and SMALL Tags
Ideally, CSS styles should be used for adjusting font sizes, but if you are editing HTML and cannot access the CSS file, then you can use the BIG and SMALL tags. These adjust font sizes, but not beyond the point of legibility. See example below:
BIG and SMALL Tag Examples
Medium, Big and Small
Medium, <big>Big</big> and <small>Small</small>
Avoid CSS Sizes x-small and xx-small
If you are editing CSS, avoid using {font-size: x-small} since it is often rendered in 8 point on a Mac and becomes virtually unreadable. {font-size:xx-small} is even smaller.
CSS: Pixels versus Points
Font sizes can be measured in either points or pixels, however points are not rendered consistently across platforms. Therefore if you need to use absolute font sizes, use pixels (e.g. {font-size: 12px}) instead of points. See the chart below for a comparison.
Read the next section on absolute font sizes to see some warnings about using pixels
| Windows | Macintosh | |
|---|---|---|
| 12 points | 12 point text | 12 point text |
| 12 pixels | 12 pixel text | 12 pixel text |
| 14 points | 14 point text | 14 point text |
| 14 pixels | 14 pixel text | 14 pixel text |
Note: In newer Mac browsers, text specified in point sizes may be enlarged to Windows point sizes. Pixel sizes remain consistent.
CSS: Relative Font Sizes
A current accessibility recommendation is to use relative font sizes such as percentages or units of .em instead of absolute sizes such as pixels or points. In older browsers (including Internet Explorer 6), an absolute font size remained set as is even if a user wanted to use the zoom command to enlarge text.
The tradeoff is that designers cannot have full control over layout (especially in terms of placement of different divisions) when relative font sizes are use. Another issue has been that results are inconsistent from browser to browser and platform to platform when using relative font sizes.
The good news is that most modern browsers, including Internet Explorere 7, Firefox, Safari, Opera, fully support zoomed text, even if the font is set to an absolute size. However, if your user base is relying on older browsers, then absolute font sizes will potentially be inaccessible.
- Web-Aim: Fonts
- Web Style Guide
- University of Minnesota Web Design References on Typography - Many links on implementing text size in CSS