When choosing fonts and typography for your government website, it’s important to account for aesthetics and accessibility.
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)
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.
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:
Serif fonts we recommend:
Font pairing recommendations, according to Google Fonts:
- Lora: Open Sans / Lato / Montserrat / Roboto
- Merriweather: Open Sans / Montserrat / Oswald / Lato / Roboto
- Noto Serif: Open Sans / Roboto/ Lato
- Roboto Slab: Open Sans / Montserrat/ Lato
- Source Serif Pro: Open Sans / Source Sans Pro / Roboto Slab
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 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.
- 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
- 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)
- Google Fonts