Docs / Letter Spacing

Letter Spacing

vel-src: typography.css

Utilities for controlling the tracking (letter spacing) of an element.

ClassProperties
vel-tracking-tighterletter-spacing: -0.05em
vel-tracking-tightletter-spacing: -0.025em
vel-tracking-normalletter-spacing: 0em
vel-tracking-wideletter-spacing: 0.025em
vel-tracking-widerletter-spacing: 0.05em
vel-tracking-widestletter-spacing: 0.1em

Examples

Tracking variants

vel-tracking-tighter — VELOCITY

vel-tracking-normal — VELOCITY

vel-tracking-wide — VELOCITY

vel-tracking-wider vel-uppercase

vel-tracking-widest — EYEBROW LABEL

example.html
<div class="vel-flex vel-flex-col vel-gap-3">
  <p class="vel-tracking-tighter vel-text-base" style="color:#e2e8f0">vel-tracking-tighter — VELOCITY</p>
  <p class="vel-tracking-normal vel-text-base" style="color:#e2e8f0">vel-tracking-normal — VELOCITY</p>
  <p class="vel-tracking-wide vel-text-base" style="color:#e2e8f0">vel-tracking-wide — VELOCITY</p>
  <p class="vel-tracking-wider vel-text-base vel-uppercase" style="color:#a87fff">vel-tracking-wider vel-uppercase</p>
  <p class="vel-tracking-widest vel-text-xs vel-uppercase vel-font-semibold" style="color:#64748b">vel-tracking-widest — EYEBROW LABEL</p>
</div>