Press/to search

Typography

Letter Spacing

Utilities for sets the spacing between letters.


Class

classcss
gap-tighterletter-spacing: -0.05emText
gap-tightletter-spacing: -0.025emText
gap-normalletter-spacing: 0Text
gap-wideletter-spacing: 0.025emText
gap-widerletter-spacing: 0.05emText
gap-widestletter-spacing: 0.1emText

Usage

<!-- Example -->
<y class="gap-tight">
...
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'gap',
$property: letter-spacing,
$modifier: (
super: .5em,
ultra: 1em
//...
)
);

// Add Variants
@include yogurt(
$class: 'gap',
$property: letter-spacing,
$modifier: (
super: .5em,
ultra: 1em
//...
),
$variant: (
'responsive'
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.