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 | auto |
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' )
|
setting | letterspacing |
$theme-heading-letterspacing: -2
|
utility | .text-ls-letterspacing |
.text-ls-neg-2
|