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
| class | css | |
|---|---|---|
| gap-tight-2 | letter-spacing: -0.05em | Text |
| gap-tight-1 | letter-spacing: -0.025em | Text |
| gap-normal | letter-spacing: 0 | Text |
| gap-wide-1 | letter-spacing: 0.025em | Text |
| gap-wide-1 | letter-spacing: 0.05em | Text |
| gap-wide-3 | letter-spacing: 0.1em | Text |
Usage
<div class="gap-tight-2">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</div>
HTML
.dummy {
@extend
.gap-tight-2;
}
SCSS