Syntax
letter-spacing
Setting the spacing between text characters.
Overview
| Class | Declarations |
|---|---|
tracking:tightest | letter-spacing: -0.072em;
|
tracking:tighter | letter-spacing: -0.04em;
|
tracking:tight | letter-spacing: -0.02em;
|
tracking:normal | letter-spacing: 0em;
|
tracking:wide | letter-spacing: 0.02em;
|
tracking:wider | letter-spacing: 0.04em;
|
tracking:widest | letter-spacing: 0.12em;
|
tracking:`value` | letter-spacing: `value`;
|
Examples
Basic usage
Use tokens like tracking:tight and tracking:wider to set letter spacing.
tracking:tightest
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:tighter
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:tight
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:normal
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:wide
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:wider
LETTERS ALIGN WITH PERFECT RHYTHM
tracking:widest
LETTERS ALIGN WITH PERFECT RHYTHM
<div class="tracking:tightest">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tighter">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tight">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:normal">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wide">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wider">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:widest">LETTERS ALIGN WITH PERFECT RHYTHM</div>Apply conditionally
Apply styles based on different states using selectors and conditional queries.
<div class="tracking:1:hover tracking:1@sm tracking:1@dark tracking:1@print">…</div>