letter-spacing
Adjusts the spacing between characters. Used to refine typography details such as widening spacing for uppercase labels or tightening large headings.
Class List
| Class | CSS | Description |
|---|---|---|
ls1px | letter-spacing: 1px | 1px letter spacing |
ls2px | letter-spacing: 2px | 2px letter spacing. Wide decorative effect |
ls0-05em | letter-spacing: 0.05em | 5% of font-size. Standard for uppercase labels |
ls0-1em | letter-spacing: 0.1em | 10% of font-size. Wide decorative effect |
ls0-2em | letter-spacing: 0.2em | 20% of font-size. Very wide spacing |
neg-ls0-5px | letter-spacing: -0.5px | Slightly tight spacing. Used for large headings |
neg-ls1px | letter-spacing: -1px | Tight spacing. Used for tight headings |
Visual Comparison
Compares results of applying different letter-spacing to the same text.
letter-spacing: -1px — neg-ls1px
Typography Design
letter-spacing: -0.5px — neg-ls0-5px
Typography Design
Default (no letter-spacing) —
Typography Design
letter-spacing: 1px — ls1px
Typography Design
letter-spacing: 2px — ls2px
Typography Design
letter-spacing: 0.1em — ls0-1em
Typography Design
letter-spacing: 0.2em — ls0-2em
TYPOGRAPHY DESIGN
Common Values
Choose appropriate letter-spacing values based on use case.
| Usage | Recommended class | Description |
|---|---|---|
| Uppercase label | ls0-05em | Used with ttu. Most common uppercase spacing |
| Wide uppercase heading | ls0-1em | Used with ttu. Strong decorative spacing |
| Fixed wide spacing | ls1px ~ ls2px | Fixed spacing independent of font-size |
| Tight large heading | neg-ls0-5px | Slightly tighten large heading letters for density |
| Very tight heading | neg-ls1px | Strong density for logos, hero text, etc. |
Uppercase Label Pattern
letter-spacing is most commonly used with ttu(text-transform: uppercase). Uppercase text needs wider spacing for better readability.
Standard label style -- ttu fs12px fw600 ls0-05em cA1A1AA
section title
This pattern is used for section labels, table headers, category tags, etc.
status
Without vs with letter-spacing
without letter-spacing
Default spacing -- Uppercase feels cramped
with letter-spacing 0.05em
Wide spacing -- Uppercase reads comfortably
with letter-spacing 0.1em
Wider spacing -- Strong decorative effect
<!-- Standard Uppercase label Pattern -->
<p class="ttu fs12px fw600 ls0-05em cA1A1AA">section title</p>
<!-- Table header -->
<th class="ttu fs12px fw600 ls0-05em cA1A1AA">column name</th>
<!-- Wide decorative label -->
<p class="ttu fs12px fw600 ls0-1em cA1A1AA">featured</p>
<!-- Category tag -->
<span class="ttu fs12px fw600 ls0-05em c6366F1 bg99-102-241-10 py4px px8px br4px">
category
</span>Negative letter-spacing
Negative values are used to tighten characters in large headings or logo text, increasing visual density.
Default spacing
Heading
Negative spacing -- neg-ls0-5px
Heading
Tighter spacing -- neg-ls1px
Heading
<!-- Negative spacing for large titles -->
<h1 class="fs4-8rem fw800 neg-ls0-5px cFAFAFA lh1-2">
Hero Title
</h1>
<!-- Tighter title -->
<h1 class="fs4-8rem fw800 neg-ls1px cFAFAFA lh1-2">
Tight Heading
</h1>Practical Usage Examples
<!-- Uppercase label + Body text -->
<div>
<p class="ttu fs12px fw600 ls0-05em cA1A1AA mb8px">description</p>
<p class="fs16px lh1-7 c71717A">Body text content.</p>
</div>
<!-- Tight hero title -->
<h1 class="fs4-8rem fw800 neg-ls0-5px cFAFAFA lh1-2 mb16px">
Build faster
</h1>
<!-- Wide-spaced subtitle -->
<p class="ttu fs14px fw600 ls0-1em c6366F1 mb2rem">
atomic css framework
</p>
<!-- Card header label -->
<div class="bg18181B p2rem br8px">
<p class="ttu fs12px fw600 ls0-05em cA1A1AA mb8px">pricing</p>
<p class="fs3-2rem fw800 cFAFAFA lh1-2">$29/mo</p>
</div>Tips & Notes
em unit is proportional to font-size
ls0-05em equals 0.6px when font-size is 12px, and 1px when 20px. em units are advantageous when font-size changes responsively.
Use negative values for large text
neg-ls is effective for tightening large headings or logo text. Avoid for small body text as it can harm readability.
Often used together with ttu
Uppercase text (ttu) needs wider spacing for improved readability. The ttu fs12px fw600 ls0-05em combination is the standard label pattern.