Design tokens

Line height

USWDS has 6 normalized line height tokens to control the amount of space between lines in a block of text.

Please see the Typesetting section for more about font size normalization and how USWDS uses tokens for typesetting. Setting line height requires both a line height token and a family token. The documentation below displays a “target line-height” rather than the final output, which will be normalized depending on the targeted font family.

Line height tokens

Token Example Usage Output
1
In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend's friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result.
usage: buttons, navigation, and text not meant to break over a line
 1
2
In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend's friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result.
usage: headings, introductory (lead or dek) text, no more than 1-2 sentences
 1.15
3
In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend's friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result.
usage: short text (under 1 paragraph), captions, text with a very short or very long measure
 1.35
4
In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend's friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result.
usage: short (1-2 paragraphs) of running text, especially with a short measure
 1.5
5
In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend's friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result.
usage: a good choice for most reading text, especially text meant for extended reading
 1.62
6
In compliance with the request of a friend of mine, who wrote me from the East, I called on good-natured, garrulous old Simon Wheeler, and inquired after my friend's friend, Leonidas W. Smiley, as requested to do, and I hereunto append the result.
usage: shorter text (1-2 paragraphs) meant to be distinguished from other page text, pullquotes
 1.75

Using line height tokens

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

Note: Because line height is affected by font size normalization all letter spacing tokens also require a family token.

Context Usage Example
function line-height(family, line-height)
lh(family, line-height) 		line-height: line-height('heading', 2);
line-height: lh('heading', 2);
mixin u-line-height(family, line-height) @include u-line-height('body', 6)
setting line-height $theme-heading-line-height: 2
utility .line-height-family-line height .line-height-sans-3