Typography

Gap

Utilities for sets the spacing between letters.


Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
gap-tight-2letter-spacing: -0.05em
Text
gap-tight-1letter-spacing: -0.025em
Text
gap-normalletter-spacing: 0
Text
gap-wide-1letter-spacing: 0.025em
Text
gap-wide-1letter-spacing: 0.05em
Text
gap-wide-3letter-spacing: 0.1em
Text

Usage

Lorem ipsum, dolor sit amet consectetur adipisicing elit.
gap-tight-normal
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
gap-tight-2
<div class="gap-tight-2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
HTML
.dummy {
@extend
.gap-tight-2;
}
SCSS