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 | Description |
|---|---|---|---|
| 2024-05-15 | N/A |
|
Updated documented value for |
| 2024-05-15 | N/A |
|
Removed the settings code example in “Using letterspacing tokens” section. More information: uswds-site#2379 |
