Design tokens

Font weight

USWDS has up to seven font weight theme tokens drawn from nine system tokens.

Theme tokens

Font weight theme tokens use common names. Most projects will use only 2-4 of these tokens, with the majority set to false.

Customize theme font weight tokens in your project’s theme settings with available system font weight tokens. All typography-related settings are in _uswds-theme-typography.scss.

Token Default Example Settings variable
'thin' false $theme-font-weight-thin
'light' 300 Tallahassee $theme-font-weight-light
'normal' 400 Tallahassee $theme-font-weight-normal
'medium' false $theme-font-weight-medium
'semibold' false $theme-font-weight-semibold
'bold' 700 Tallahassee $theme-font-weight-bold
'heavy' false $theme-font-weight-heavy

System tokens

Font weight system tokens use numbers from 100-900 in increments of 100, with 100 as the lightest and 900 the heaviest, the same numerical system of grades used by most common typefaces.

Token Example
100 Tallahassee
200 Tallahassee
300 Tallahassee
400 Tallahassee
500 Tallahassee
600 Tallahassee
700 Tallahassee
800 Tallahassee
900 Tallahassee

Using weight tokens

Your context and coding style determine how you access USWDS font weight tokens in code.

Context Usage Example
function weight(weight) font-weight: weight('bold')
mixin
u-text(weight) @include u-text('light')
setting
weight $theme-heading-font-weight: 'heavy'
utility
.text-weight .text-light