Design tokens

Font size

Font size tokens determine how big or small the referenced text will appear on the screen. The USWDS typescale includes nine regularized theme tokens drawn from 21 system tokens.

Please see the Typesetting section for more about font size normalization and how USWDS uses tokens for typesetting. The documentation below displays a value in pixels, rather than the actual final output, which will be normalized depending on the typeface and output in rem customized to your project settings.

Theme tokens

The following chart shows the USWDS default settings for the nine theme size tokens. Customize the output to your project needs in USWDS settings configuration by setting the variables listed in the default settings chart. If your project requires more than nine sizes, use system size tokens as needed.

Token Default Example Value Settings variable
'3xs' 2 Tallahassee 13px $theme-type-scale-3xs
'2xs' 3 Tallahassee 14px $theme-type-scale-2xs
'xs' 4 Tallahassee 15px $theme-type-scale-xs
'sm' 5 Tallahassee 16px $theme-type-scale-sm
'md' 6 Tallahassee 17px $theme-type-scale-md
'lg' 9 Tallahassee 22px $theme-type-scale-lg
'xl' 12 Tallahassee 32px $theme-type-scale-xl
'2xl' 14 Tallahassee 40px $theme-type-scale-2xl
'3xl' 15 Tallahassee 48px $theme-type-scale-3xl

System tokens

Token Value Example
'micro' 10px Tallahassee
1 12px Tallahassee
2 13px Tallahassee
3 14px Tallahassee
4 15px Tallahassee
5 16px Tallahassee
6 17px Tallahassee
7 18px Tallahassee
8 20px Tallahassee
9 22px Tallahassee
10 24px Tallahassee
11 28px Tallahassee
12 32px Tallahassee
13 36px Tallahassee
14 40px Tallahassee
15 48px Tallahassee
16 56px Tallahassee
17 64px Tallahassee
18 80px Tallahassee
19 120px Tallahassee
20 140px Tallahassee

Using size tokens

Your context and coding style determine how you access USWDS font size tokens in code. Because of font size normalization, font size functions, utilities, and mixins also require a family token.

Context Usage Example
function size(family, size) font-size: size('body', '2xl')
mixin font-size u-font-size(family, size) @include u-font-size('body', '2xl')
mixin font-family font-size u-font(family, size) @include u-font('body', '2xl')
setting size $theme-h1-font-size: '2xl'
utility font-family font-size .font-family-size .font-body-2xl