A Consensus on Which Web Fonts to Use?
There is a huge body of literature available on font usage both for print and digital (on-screen) media. Old typography guidelines which have existed for hundreds of years do not translate uniformly to digital media. Therefore, a balance between the old typography methods and the new circumstances encountered with digital display methods must be met. While there does not exist a definitive list of recommended accessible fonts for the Web, the principles articulated below provide guidance for font selection in the face of a constant stream of new fonts, font versions, and changes in font usage. Additional references are listed at the end of this article.
Readability and Accessibility of Fonts
The guidelines listed further on down in this article are meant to assist you in selecting a font that improves the readability of your Web pages and allows your users to effortlessly read and scan through your content. Please note that persons with visual impairments will set their Web browser or other assistive technology software to display text larger than was intended by a Web page author. For this reason, it is important to use fonts and font sizes that allow Web users to scale the text. Cascading Style Sheets (CSS) help control the consistency of typography for a Web page, and makes it easier to implement scalable fonts across a site. Please see the CSS section for more information on using CSS to control font sizes
Suggested font progression lists
The following font progressions (used in CSS) are only suggestions that are based on popular use. All of these fonts are readable on Web browsers. However, user preferences for these fonts can vary:
- Serif progression: Book Antiqua, Georgia, Times New Roman, serif
- Sans serif progression: Lucida Sans, Lucida Grande, Verdana, Arial, Helvetica, sans-serif
(The font families Georgia and Verdana were developed specifically for readability on-screen by Microsoft. Both of these font are commonly available across computer platforms.)
Guidelines for Selecting and Using Readable and Accessible Font
Use Scalable font size
In order for a site to be more accessible to Web users, fonts should not be a 'fixed' point size. When choosing a font size for text, it is recommended fonts be sized using percentages (%) or ems. These font values are scalable on a Web page for users with poor vision. This gives them the ability to increase the font size if necessary.
Use Common Font Types
Common fonts used on the web such as Times Roman, Georgia (serif fonts) and Arial, Helvetica, and Verdana (sans-serif fonts) improve reading speed and are more likely to be consistent across multiple platforms and browsers. However, it is important to test your fonts on both Macintosh and Windows based computers (at a minimum) because they use different common fonts.
Avoid Stylized Fonts
Stylized fonts include cursive and fantasy fonts. These should be avoided for body content, navigation, and headings. Stylized fonts tend to have artistic ornamentation and sometimes are connected together with a stroke. These fonts can be difficult to read and are usually a poor choice in terms of usability or accessibility.
Use Dark Text On Light Backgrounds And Avoid Background Textures
Research shows that dark text on a light background maximizes contrast, improves readability, and reduces eyestrain. It is recommended that Web sites should use either black or dark gray text on a slightly off-white background (e.g. use color code of #FEFEFE). The use of a background pattern behind text can reduce this contrast and should be avoided.
Draw Attention To Your Text With White Space
User's eyes are attracted to strong contrast and distinctive patterns within your Web page. Therefore, you should help users focus on the text by separating it from other elements on the page with white (blank) space. Avoid large blocks of text if possible.
Avoid All Uppercase Letters In Headings
Uppercase headings form rectangular blocks of text that make it difficult for users to identify letters and words. It is recommended that you use title case headings consistently (capitalize the first letter of each word) throughout your site.
Fonts Appear Smaller On Macintosh Computers
The Macintosh operating system will display fonts approximately one size (2-3 points) smaller than the same fonts on a Windows operating system. This can have a dramatic impact on the readability of your site, so be sure to test your design on both platforms.
Cascading Style Sheets Help Maintain Consistency In Font Usage
CSS not only helps to maintain consistency in font usage across a Web site, but it also allow flexibility in font usage for users who need to change font styles for readability purposes. These users may have their own CSS that assigns fonts and font sizes that accomodate their reading preference.
For more information see the CSS (Cascading Style Sheets) section
Further Discussion on Accessible Font Selection
Font selection remains an open discussion among accessible technologists and so the literature can be a bit frustrating to integrate since it often seems to contradict itself.
The accessibility of fonts tends to vary somewhat depending on who which target population you have in mind. Here are a few of the common characteristics that tend to be present across the literature - some of these are repeated from above:
- Distinctness of letters (e.g. unique shapes, clear openings, use of descenders (e.g. j and q)
- Sufficient spacing between letters
- Simplicity (e.g. not highly stylized such as script fonts, avoiding angled/slanted fonts/styles, and in many cases omitting serifs)
- Dyslexic-friendly by avoiding mirror images of letter pairs (e.g. b and d in Arial)
- Ensuring alignment (using Monospace fonts—which provide a constant width for all characters—when text should align perfectly as with computer code and math content)
- Avoiding images of text
- Avoiding blinking text
Just as importantly, much of what supports readability/usability of text in a Web context has to do with the context in which the text is presented. Specifically, you should provide:
- Flexibility (e.g. use CSS to allow users to override/customize, use of relative not absolutely sizes)
- Adequate and consistent spacing (e.g. providing sufficient word and line spacing, reasonable margins, and white space around text blocks, avoiding full justification)
- Chunked layouts (e.g. breaking large paragraphs into smaller ones, using lists and subheadings)
- Sufficient distinctness of text from background (e.g. sufficient contrast, not superimposing text on patterns)
- Sufficient size (the default size of each font family is different and varies widely, but generally 12pt or higher)
- Intrinsic meaning (e.g. style headings, links differently than body text)
Here are some reference materials regarding the subject of fonts:
- Chapter 11 of 'Research-Based Web Design & Usability Guidelines' (http://www.usability.gov/pdfs/guidelines.html#2)
- Accessible Web Typography--especially Section Three--by Jim Byrne (http://www.scotconnect.com/webtypography/)
- Typography Tutorials, Articles, and Books at WebsiteTips (http://websitetips.com/typography/tutorials/)
- Typography references at Univ of Minnesota Duluth (http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html)
- An introduction on how to choose a font (http://articles.sitepoint.com/article/anatomy-web-fonts )
- WebAIM article on font accessibility (http://www.webaim.org/techniques/fonts/)
Several fonts have been designed specifically to address accessibility/usability. Below are a few of which I’m aware that might be useful reference points for the principles described above:
- American Printing House for the Blind produced and distributes a free font optimized for use by users with low-vision (http://www.aph.org/products/aphont.html)
- Fontsmith also produced and distributes a commercial font optimized for users with print impairments (http://www.fontsmith.com/fonts/fs-me.cfm)
Preview and compare fonts using the TypeTester tool (http://www.typetester.org/)