Source Sans Pro
('family sans')
Typography requires clear, easy-to-read text and consistent headings. Use this guide to format text elements.
U.S. Web Design System (USWDS) design tokens
Use the USWDS design tokens for typography, spacing units, color, and other style elements.
Typeface
Our primary typeface is Source Sans Pro. It’s open-source and sans-serif. It uses different font weights users can read at all sizes and that provide clear headings.
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890
Font weight
We use three font weight tokens for all text styles.
Aa
Aa
Aa
Theme token:
Bold
Normal
Light
System token:
700
400
300
Font size
Our websites use a rem-based, font-sizing system. Font sizes are multiples of the website’s root font size. The root font size is set at 100%.
You can calculate type scale based on a 16 pixel (px) reference point. Our font size tokens range from 4 (smallest) to 13 (largest).
Final pixel value for each token (target font size) varies based on the font family. USWDS uses a normalization coefficient for each font family to create the target font size. For the Open Sans font family, the coefficient is 1.06.
Theme token:
3xl
2xl
xl
System token:
13
11
10
Token pixel value:
36px
28px
24px
Normalized output: (target font size)
38px
30px
25px
Theme token:
lg
md
sm
System token:
9
8
7
Token pixel value:
22px
20px
18px
Normalized output: (target font size)
23px
21px
19px
Theme token:
xs
2xs
3xs
System token:
6
5
4
Token pixel value:
17px
16px
15px
Normalized output: (target font size)
18px
17px
16px
Line Height
Use token 3 (1.35 rem) line height for all headings and token 4 (1.5 rem) line height for all other text styles.
Spacing
Use rem-based spacing between text with USWDS tokens.
spacing token: 4
32 px / 2 rem
spacing token: 3
24 px / 1.5 rem
spacing token: 2
16 px / 1 rem
spacing token: 1.5
12 px / 0.75 rem
spacing token: 1
8 px / 0.5 rem
Date Last Reviewed: