Spacing
When to use it
The Spacing utility is used to override letter spacing on text. It provides a quick way to tighten or loosen tracking when a component or piece of text needs a different typographic rhythm than the default.
Variants
- Letter spacing: Use the
.u-spacing--[xs|s|m|l|xl|xxl|xxxl|xxxxl]classes to apply one of the predefined letter-spacing tokens from--ls-*.
What it looks like
Code examples
html
<p class="u-spacing--xs">u-spacing--xs</p>
<p class="u-spacing--s">u-spacing--s</p>
<p class="u-spacing--m">u-spacing--m</p>
<p class="u-spacing--l">u-spacing--l</p>
<p class="u-spacing--xl">u-spacing--xl</p>
<p class="u-spacing--xxl">u-spacing--xxl</p>
<p class="u-spacing--xxxl">u-spacing--xxxl</p>
<p class="u-spacing--xxxxl">u-spacing--xxxxl</p>Accessibility notes
Use increased letter spacing with care on long body text, since excessive tracking can reduce readability. Check the result against the surrounding typography and make sure the text still reads comfortably at the intended size.