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 can be found in USWDS settings.
| 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 | font-weight(weight) |
font-weight: font-weight('bold')
|
| mixin | u-text(weight) |
@include u-text('light')
|
| setting | weight |
$theme-font-weight-normal: 500
|
| utility | .text-weight |
.text-light
|
Latest updates
Meaningful code and guidance updates are listed in the following table:
| Date | USWDS version | Affects | Description |
|---|---|---|---|
| 2024-05-15 | N/A |
|
Updated the settings code example in “Using weight tokens” section. More information: uswds-site#2379 |
