VA Design System: Typography

What it is

The typography page of the U.S. Department of Veterans Affairs design system, captured from design.va.gov with component library v56.10.0 and a last update of 25 June 2026. It names three open-source faces and says why each was chosen: Source Sans Pro for interface and body text, Bitter, a slab serif drawn on the pixel grid, and Roboto Mono for code and figures. Then it sets rules: font sizes in rem, not pixels, so text follows the user's browser setting (WCAG 2.2, criterion 1.4.4); headings nested in order and resized with utility classes, never by skipping a level; headings kept out of links except inside cards; monospace for figures that add up, such as balances and rates, but not for phone numbers, zip codes or dates; an "eyebrow" label above headings; and paragraphs no wider than 72ex.

Why read it now

This is one of the few brand manuals that gives a reason for every rule, and most of the reasons concern the reader, not the brand: relative sizes so people who enlarge text are not shut out, heading order for screen readers, monospace only where columns of numbers must line up. Those rules hold and match current accessibility guidance, and a measure of roughly 72 to 77 characters sits at the top of the range typographers have long recommended. The opening claim that a consistent look conveys credibility is an assertion, not a finding, though consistency does aid recognition. What does not transfer to the Gulf is the type list: none of the three faces has Arabic letters, so a bilingual brand needs an Arabic face chosen for the same jobs, interface, reading and tabular figures. The ex and ch units are also defined by Latin letters, so line length has to be checked on real Arabic text. Use: copy the page's structure for your own guide. For each typeface state its job and the reason, then write rules as Do and Don't pairs with an example of each.

Passages worth keeping

Read the original design.va.gov