Utilities

Font size and family

Set the font size and the font family together.

CSS properties

font-family font-size

Examples and usage

Utilities, values, and variants may be activated and deactivated in advanced settings.

Font size and family

CSS property: font-size, font-family

  • responsive
  • active
  • hover
  • focus
  • visited

Type-based size and family utilities

Note: You can modify both the default theme sizes and default typefaces in your project settings. Use valid system tokens following the guidance in the Typesetting section of USWDS design tokens documentation.

font-mono (Shown: Roboto Mono)
.font-mono-3xs
12.4px
Tuscaloosa
.font-mono-2xs
13.3px
Tuscaloosa
.font-mono-xs
14.3px
Tuscaloosa
.font-mono-sm
15.2px
Tuscaloosa
.font-mono-md
16.2px
Tuscaloosa
.font-mono-lg
21.0px
Tuscaloosa
.font-mono-xl
30.5px
Tuscaloosa
.font-mono-2xl
38.1px
Tuscaloosa
.font-mono-3xl
45.7px
Tuscaloosa
font-sans (Shown: Source Sans Pro)
.font-sans-3xs
13.8px
Tuscaloosa
.font-sans-2xs
14.9px
Tuscaloosa
.font-sans-xs
16.0px
Tuscaloosa
.font-sans-sm
17.0px
Tuscaloosa
.font-sans-md
18.1px
Tuscaloosa
.font-sans-lg
23.4px
Tuscaloosa
.font-sans-xl
34.1px
Tuscaloosa
.font-sans-2xl
42.6px
Tuscaloosa
.font-sans-3xl
51.1px
Tuscaloosa
font-serif (Shown: Merriweather)
.font-serif-3xs
12.7px
Tuscaloosa
.font-serif-2xs
13.7px
Tuscaloosa
.font-serif-xs
14.6px
Tuscaloosa
.font-serif-sm
15.6px
Tuscaloosa
.font-serif-md
16.6px
Tuscaloosa
.font-serif-lg
21.5px
Tuscaloosa
.font-serif-xl
31.2px
Tuscaloosa
.font-serif-2xl
39.0px
Tuscaloosa
.font-serif-3xl
46.8px
Tuscaloosa

Role-based size and family utilities

Note: You can modify both the default theme sizes and default typefaces in your project settings. Use valid system tokens following the guidance in the Typesetting section of USWDS design tokens documentation.

font-alt (Shown: Merriweather)
.font-alt-3xs
12.7px
Tuscaloosa
.font-alt-2xs
13.7px
Tuscaloosa
.font-alt-xs
14.6px
Tuscaloosa
.font-alt-sm
15.6px
Tuscaloosa
.font-alt-md
16.6px
Tuscaloosa
.font-alt-lg
21.5px
Tuscaloosa
.font-alt-xl
31.2px
Tuscaloosa
.font-alt-2xl
39.0px
Tuscaloosa
.font-alt-3xl
46.8px
Tuscaloosa
font-body (Shown: Source Sans Pro)
.font-body-3xs
13.8px
Tuscaloosa
.font-body-2xs
14.9px
Tuscaloosa
.font-body-xs
16.0px
Tuscaloosa
.font-body-sm
17.0px
Tuscaloosa
.font-body-md
18.1px
Tuscaloosa
.font-body-lg
23.4px
Tuscaloosa
.font-body-xl
34.1px
Tuscaloosa
.font-body-2xl
42.6px
Tuscaloosa
.font-body-3xl
51.1px
Tuscaloosa
font-code (Shown: Roboto Mono)
.font-code-3xs
12.4px
Tuscaloosa
.font-code-2xs
13.3px
Tuscaloosa
.font-code-xs
14.3px
Tuscaloosa
.font-code-sm
15.2px
Tuscaloosa
.font-code-md
16.2px
Tuscaloosa
.font-code-lg
21.0px
Tuscaloosa
.font-code-xl
30.5px
Tuscaloosa
.font-code-2xl
38.1px
Tuscaloosa
.font-code-3xl
45.7px
Tuscaloosa
font-heading (Shown: Merriweather)
.font-heading-3xs
12.7px
Tuscaloosa
.font-heading-2xs
13.7px
Tuscaloosa
.font-heading-xs
14.6px
Tuscaloosa
.font-heading-sm
15.6px
Tuscaloosa
.font-heading-md
16.6px
Tuscaloosa
.font-heading-lg
21.5px
Tuscaloosa
.font-heading-xl
31.2px
Tuscaloosa
.font-heading-2xl
39.0px
Tuscaloosa
.font-heading-3xl
46.8px
Tuscaloosa
font-ui (Shown: Source Sans Pro)
.font-ui-3xs
13.8px
Tuscaloosa
.font-ui-2xs
14.9px
Tuscaloosa
.font-ui-xs
16.0px
Tuscaloosa
.font-ui-sm
17.0px
Tuscaloosa
.font-ui-md
18.1px
Tuscaloosa
.font-ui-lg
23.4px
Tuscaloosa
.font-ui-xl
34.1px
Tuscaloosa
.font-ui-2xl
42.6px
Tuscaloosa
.font-ui-3xl
51.1px
Tuscaloosa

Font family

CSS property: font-family

  • responsive
  • active
  • hover
  • focus
  • visited

Type-based

.font-family-mono
.font-family-sans
.font-family-serif

Role-based

.font-family-alt
.font-family-body
.font-family-code
.font-family-heading
.font-family-ui

Utility mixins

Utilities may be used in component Sass with utility mixins. Highlighted tokens are the USWDS design tokens that serve as the foundation for all design system styles. Each token is also a documentation link. Consult the Design tokens section for more information on tokens and how to use them in USWDS.

Utility Mixin Example
.font-family-size u-font(family, size) @include u-font('sans', 'sm')
.font-family-family u-font-family(family) @include u-font-family('sans')

Using utility mixins

  • Use single-quoted strings in utility mixins. Do not quote numbers or px values, with the exception of half (05) values like '05', '105', and '205' which should be treated as strings.
  • String tokens for half values (05) and negative values (like neg-1)may also be written with their unquoted number token equivalent: 0.5, 1.5, 2.5, 2.5, -1, -1.5, etc
  • If multiple utilities share the same prefix (ex: .text- or .flex-) or a single utility accepts multiple kinds of values (ex: .border accepts both border weight and border color), their shared mixin can accept multiple comma-separated values: u-text('primary-darkest', 'no-underline', 'bold') or u-border-top(2px, 'accent-warm').
  • Output any utility mixin as !important by appending !important to the mixin’s argument list: u-bg('red-warm-50v', !important).

Advanced settings

Responsive variants

Add a responsive breakpoint prefix separated with a : to target a utility at a responsive breakpoint and higher, following a mobile-first methodology.

Set which breakpoints are available to USWDS utilities with the $theme_output_breakpoints variable found in _uswds-theme-utilities.scss.

Breakpoint name Width Default
card 160px false
card-lg 240px false
mobile 320px false
mobile-lg 480px true
tablet 640px true
tablet-lg 880px false
desktop 1024px true
desktop-lg 1200px false
widescreen 1400px false

Set whether a utility family outputs with responsive variants by setting the value of $[utility_family]-settings.responsive in _uswds-theme-utilities.scss.

Utility variable Default
$font-settings.responsive true
$font-family-settings.responsive false

State variants

Use a state prefix separated with a : to target a utility in a specific state.

Set whether a utility outputs a specific state variant by setting the value of the $[utility_family]-settings.[state] variable in _uswds-theme-utilities.scss.

Utility variable active focus hover visited
$font-settings false false false false
$font-family-settings false false false false

Output control

Control whether or not to output any USWDS utility family by setting the value of the $[utility_family]-settings.output variable found in _uswds-theme-utilities.scss.

A value of true will output the utility family and any variants. A value of false prevents the output of the family and any variants.

Utility variable Default
$font-settings.output true
$font-family-settings.output true

Custom values

By default, USWDS utilities output the standard values listed in the documentation above. Customize and refine any utility family’s specific values by editing the $[utility_family]-manual-values and $[utility_family]-palettes variables in _uswds-theme-utilities.scss.

Manual values

Specify manual values as unique key:value pairs using the $[utility_family]-manual-values map, where the key is the utility’s value suffix, and the value is what the utility will output.

Palettes

Palettes are predefined groups of values. Add palettes to the $[utility_family]-palettes list variable in _uswds-theme-utilities.scss to add those values to the utility family.

Default palettes

Palette name Palette contents
'palette-font-default' font default tokens
'palette-font-family-default' font-family default tokens

Font size and family palettes

In the following table, family indicates a specific unquoted style-based or role-based font family token as documented on the system font-family tokens page. Valid tokens include sans, serif, mono, heading, ui, body, code, and alt.

Palette name Palette contents
'palette-font' All tokens in all families
'palette-font-system' All system size tokens in all type-based families
'palette-font-system-family' All system size tokens in family
'palette-font-system-family-small' family-micro family-1 family-2 family-3
'palette-font-system-family-medium' family-4 family-5 family-6 family-7 family-8
'palette-font-system-family-large' family-9 family-10 family-11 family-12 family-13 family-14
'palette-font-system-family-larger' family-15 family-16 family-17 family-18 family-19 family-20
'palette-font-system-family-micro' family-micro
'palette-font-system-family-1' family-1
'palette-font-system-family-2' family-2
'palette-font-system-family-3' family-3
'palette-font-system-family-4' family-4
'palette-font-system-family-5' family-5
'palette-font-system-family-6' family-6
'palette-font-system-family-7' family-7
'palette-font-system-family-8' family-8
'palette-font-system-family-9' family-9
'palette-font-system-family-10' family-10
'palette-font-system-family-11' family-11
'palette-font-system-family-12' family-12
'palette-font-system-family-13' family-13
'palette-font-system-family-14' family-14
'palette-font-system-family-15' family-15
'palette-font-system-family-16' family-16
'palette-font-system-family-17' family-17
'palette-font-system-family-18' family-18
'palette-font-system-family-19' family-19
'palette-font-system-family-20' family-20
'palette-font-theme' All theme size tokens in all families
'palette-font-theme-roles' All theme size tokens in all role-based families
'palette-font-theme-types' All theme size tokens in all type-based families
'palette-font-theme-family' All theme size tokens in a family
'palette-font-theme-family-3xs' family-3xs
'palette-font-theme-family-2xs' family-2xs
'palette-font-theme-family-xs' family-xs
'palette-font-theme-family-sm' family-sm
'palette-font-theme-family-md' family-md
'palette-font-theme-family-lg' family-lg
'palette-font-theme-family-xl' family-xl
'palette-font-theme-family-2xl' family-2xl
'palette-font-theme-family-3xl' family-3xl