Design tokens

Letterspacing

USWDS has 6 letterspacing tokens to control the amount of space between individual letterforms.

Note: Some letterspacing tokens come in two flavors: a numeric token (like 0.5 or -2) and a string token (like '05' or 'neg-2'). Utility classes use string tokens exclusively when they exist (like .margin-x-neg-2). Mixins and functions usually accept either, and we will note any exceptions.

Letterspacing tokens

Token Example Value
-3, 'neg-3' Tallahassee -0.03em
-2, 'neg-2' Tallahassee -0.02em
-1, 'neg-1' Tallahassee -0.01em
'auto' Tallahassee initial
1 Tallahassee 0.025em
2 Tallahassee 0.1em
3 Tallahassee 0.15em

Using letterspacing tokens

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

Context Usage Example
function letter-spacing(letterspacing)
ls(letterspacing)
letter-spacing: letter-spacing(-2);
letter-spacing: ls(-2);
mixin u-text('ls-letterspacing') @include u-text('ls-neg-2')
utility .text-ls-letterspacing .text-ls-neg-2

Latest updates

Meaningful code and guidance updates are listed in the following table:

Date USWDS version Affects Breaking Description
2024-05-15 N/A
  • Guidance
No

Updated documented value for auto token. More information: uswds-site#2379

2024-05-15 N/A
  • Guidance
No

Removed the settings code example in “Using letterspacing tokens” section. More information: uswds-site#2379