Fonts and government websites

When choosing fonts and typography for your government website, it’s important to account for aesthetics and accessibility.

Terms

There are three key terms you should know to better understand the font landscape:

• Fonts: Typeface style used to display text, numbers, characters, glyphs (ex: Lato, Merriweather)
• Font family: Fonts categorized by certain characteristics (ex.: sans-serif, serif, handwriting, cursive, display, fantasy, monospace)
• Typography: Text appearance/arrangement (ex: typeface, sizing, alignment, line-spacing, letter-spacing, kerning)

Issues

There are three key issues to consider when choosing fonts:

• Readability: How easy/difficult it is to read a word series in a specific font
• Color contrast: Color differentiation between text foreground and background
• Font size: The type size of a font.

Recommendations

Readability

When considering readability, use fonts that are less intricate and ornate and that have distinct letter embellishments (ex: a lowercase ‘L’ could be confused with an upper-case ‘I’ or an ‘8’ with an uppercase ‘B’), which is why we recommend the sans-serif and serif font families.

Sans-serif fonts we recommend:

• Lato
• Montserrat
• Public Sans
• Roboto
• Source Sans Pro

Serif fonts we recommend:

• Merriweather

Pairings

Heading/default font pairings we recommend for ProudCity-powered websites:

• Lato
  • Merriweather
  • Roboto
  • Source Sans Pro
• Merriweather
  • Lato
  • Montserrat
  • Roboto
  • Source Sans Pro
• Montserrat
  • Lato
  • Roboto
• Public Sans
  • Public Sans
• Roboto
  • Lato
  • Montserrat
• Source Sans Pro
  • Lato
  • Merriweather
  • Montserrat
  • Roboto

Color contrast

When selecting text color, be sure to account for accessibility, as people with visual impairments may have a difficult time reading certain colors. Always use the WebAIM Color Contrast Checker to validate that your text colors pass accessibility.

As WebAIM states:

Text is much easier to read when there is a sufficient contrast between the text and the background.

And the U.S. Web Design System:

WCAG (Web Content Accessibility Guidelines) ensure that content is accessible by everyone, regardless of disability or user device. To meet these standards, text and interactive elements should have a color contrast ratio of at least 4.5:1. This ensures that viewers who cannot see the full color spectrum are able to read the text.

Font size

Font size is less of an issue today, as browsers and assistive technologies increasingly have settings that allow users to customize websites based on their individual needs. However, as WebAIM states, ‘“it is important that your design accommodate increased text sizes without loss of readability or functionality.”

ProudCity and fonts

The default font for ProudCity-powered websites is Lato. ProudCity integrates with Google Fonts, which offers hundreds of free fonts that can easily be added to your government website.

Our government-focused theme accounts for text color contrast, and the ProudCity Accessibility Checker allows governments to run reports and ensure they are in compliance.

We also include a font sizing tool on every web page that allows users to increase or decrease the font size.

Tips

• Use sans-serif (preferably) or serif font families
• Limit the number of font types used to one or two
• Use italics and bold sparingly
• Do not use all-caps or animated (blinking, moving) text
• Use the WebAIM Color Contrast Checker to verify your colors pass accessibility

Related

• How to customize fonts
• Customize help
• Fonts (WebAIM)
• Typography (U.S. Web Design System)
• Text accessibility (U.S. Web Design System)
• Contrast (Minimum) (Web Content Accessibility Guidelines)
• Color Contrast Checker (WebAIM)