Skip to content
Technology Knowledge Base

Text Style Guide

This page can be used as a general guide for making text style decisions in designing any public-facing or consumer documents. These guidelines are drawn from Section 508, part of a 1998 amendment to the Rehabilitation Act of 1973 which requires all Federal electronic content to be accessible. In following these guidelines, you will find that not only does it make your documents and websites accessible for those who need accommodations, but that your deliverables are also more broadly consistent and appealing to all consumers. Accessibility benefits everyone, and these style guidelines will benefit everyone who engages with your materials, including yourself and your colleagues.

Section 508 Requirements

With regards to font, Section 508 requires that “At least one mode of characters displayed on the screen shall be in a sans serif font. Where ICT does not provide a screen enlargement feature, characters shall be 3/16 inch (4.8 mm) high minimum based on the uppercase letter “I”. Characters shall contrast with their background with either light characters on a dark background or dark characters on a light background.”

Font Sizes

When dealing with font size in particular, the Web Content Accessibility Guidelines (WCAG) recommends the incorporation of ‘scalable’ text, which means the users should be able to resize the text up to 200% using standard browser features without losing any content or functionality. This is the ideal setting.  Recommendations for incorporating this ability using CSS can be found here.

Since scalability is preferred, there are not hard and fast rules for default font sizes within the WCAG. A good baseline that many designers tend to start with is as follows:

  • Regular body text – a size of 12pt (16px) is generally suggested. Default fonts should be no smaller than 9pt (12px).
  • Large text – a size of 18pt (24px) is typically recommended as a minimum.

When working with set font sizes, the WCAG recommends testing different versions and font sizes with users to see whether the page is clear enough for everyone. When text is not scalable or cannot be zoomed in on, a minimum size of roughly 16pt is required (depending on the font – the 508 requirement is 3/16” in height, which often comes out to roughly 16pt). However, in documents and websites with zoom or scaling capabilities, this is not a requirement.

WCAG does mention specific font sizes in relation to contrast. Text elements that are at least 18pt (around 24px) or 14pt (around 18.66px) for bold text can be considered large enough that they require a lower color contrast ratio (3:1) than the one that is usually recommended, which is 4.5:1 for normal text. 

Font Choice

With regard to choosing fonts, the WCAG and Section 508 express a strong preference for sans serif fonts. Serif fonts are acceptable for headings or other emphasis, but body text should utilize sans serif as much as possible.

Font styles like underlining and italics should be avoided, though bolding can be used whenever necessary for emphasis or contrast, as long as it does not interfere with readability (i.e. by reducing letter spacing).

Best Practices

Best Practices for text on websites include:

  • Select clear and readable typefaces: A distinct and straightforward typeface greatly enhances readability. Avoid character ambiguity, where two characters appear remarkably alike, to avoid confusion (like the capital “I” and lowercase “L” ). The more straightforward the typeface, the easier it will be for your users to read.
  • Limit font styles and varieties: Numerous typefaces or font styles can disorient users. Maintain a small, consistent set of fonts to aid readability and reduce cognitive load, offering a more consistent user interface.
  • Maintain clarity in letter and word spacing: Avoid crowding letters and tightly packed text, which can be tough, especially for users with reading difficulties. Maintain appropriate spacing using CSS properties like ‘letter-spacing’ and ‘word-spacing’ to ensure clarity.

WCAG Requirements for Text

1.4.1 Use of Color: Color must not be the only means of conveying information. If color signifies meaning, incorporate additional visual cues like a symbol or text to convey the information.

1.4.3 Contrast: Text and images of text must have a contrast ratio of at least 4.5:1. Large text, such as 16 pt bold, and icons need a 3:1 ratio between foreground and background colors. This contrast requirement applies to text over a gradient or background image. An author might put a dark rectangle behind light text, or use black text with a thin white outline effect.

1.4.4. Resize Text: The reader must be able to resize text to at least to 200 percent without loss of content or functionality. Web browsers and word processors include this feature by default, but document authors can interfere with this functionality.

1.4.5 Images of Text: Whenever possible, use actual text and not images or pictures of text. This gives the reader control over the presentation of text. Images of text also degrade and become jagged when high levels of screen magnification are used.

1.4.10 Reflow (WCAG 2.1 AA): Readers using assistive technology for magnification are essentially using a window half the typical size. Content should reflow and not require horizontal scrolling when read using a small, resized window.

1.4.12 Text Spacing (WCAG 2.1 AA): Content should not be lost if a reader uses assistive technology to make minor adjustments to paragraph, line, word, or letter spacing.

Further Resources:

Understanding Accessible Fonts and Typography for Section 508 Compliance

How to Make Your Website 508 Compliant

How to Pick the Perfect Font Size: A Guide to WCAG Accessibility

Accessibility Training: Introduction to Accessibility and Section 508