line-height
Sets the vertical spacing between text lines. Using unitless values scales automatically proportional to font-size, which is recommended in most cases.
Class List
| Class | CSS | Description |
|---|---|---|
lh1 | line-height: 1 | No line spacing. Used for single-line elements like buttons, badges |
lh1-2 | line-height: 1.2 | Narrow line spacing. Suitable for large headings |
lh1-3 | line-height: 1.3 | Slightly narrow spacing. Suitable for subheadings |
lh1-5 | line-height: 1.5 | Standard line spacing. Suitable for most text |
lh1-7 | line-height: 1.7 | Wide line spacing. Improves readability for long body text |
lh2 | line-height: 2 | Very wide line spacing. For reading education, when wide margins needed |
lh20px | line-height: 20px | Fixed 20px line spacing |
lh24px | line-height: 24px | Fixed 24px line spacing |
lh2rem | line-height: 2rem (20px) | Fixed 20px (rem unit) |
Visual Comparison
Compares results of applying different line-heights to the same text.
line-height: 1 — lh1
The quick brown fox jumps over the lazy dog. Line spacing greatly affects text readability. Appropriate line-height is a key factor in determining reading comfort.
line-height: 1.3 — lh1-3
The quick brown fox jumps over the lazy dog. Line spacing greatly affects text readability. Appropriate line-height is a key factor in determining reading comfort.
line-height: 1.5 — lh1-5
The quick brown fox jumps over the lazy dog. Line spacing greatly affects text readability. Appropriate line-height is a key factor in determining reading comfort.
line-height: 1.7 — lh1-7
The quick brown fox jumps over the lazy dog. Line spacing greatly affects text readability. Appropriate line-height is a key factor in determining reading comfort.
line-height: 2 — lh2
The quick brown fox jumps over the lazy dog. Line spacing greatly affects text readability. Appropriate line-height is a key factor in determining reading comfort.
Unitless vs Unit Comparison
Unitless values scale automatically proportional to font-size. Values with units are fixed and remain the same even when font-size changes.
Unitless (relative) -- lh1-5
At font-size: 14px, line-height is 21px (14 x 1.5)
At font-size: 20px, line-height is 30px (20 x 1.5)
Automatically adjusts proportional to font-size
Unit (fixed) -- lh24px
At font-size: 14px, line-height is 24px (fixed)
At font-size: 20px, line-height is 24px (fixed, overlap occurs)
Fixed regardless of font-size; lines may overlap with large text
<!-- Unitless values (recommended) — proportional to font-size -->
<p class="fs14px lh1-5">14px Reference → line gap 21px</p>
<p class="fs2rem lh1-5">20px Reference → line gap 30px</p>
<!-- Unit values (fixed) — independent of font-size -->
<p class="fs14px lh24px">14px Reference → line gap 24px (fixed)</p>
<p class="fs2rem lh24px">20px Reference → line gap 24px (fixed, may overlap)</p>
<!-- rem Unit -->
<p class="fs16px lh2rem">line gap 2rem = 20px (fixed)</p>Recommended Values
Choose appropriate line-height values based on use case.
| Usage | Recommended class | Description |
|---|---|---|
| Body text | lh1-5 ~ lh1-7 | Best readability range. lh1-7 recommended for Korean |
| Headings (h1~h3) | lh1-2 ~ lh1-3 | Narrow spacing is visually stable for large text |
| Buttons, badges, nav | lh1 | Single-line elements do not need line spacing |
| UI labels, captions | lh1-3 ~ lh1-5 | Appropriate spacing for short text |
| Spacious body text | lh2 | Special purposes like reading education, legal documents |
Practical Usage Examples
Body text -- lh1-7
For long body text, use lh1-5 to lh1-7. Generous line spacing makes long sentences comfortable to read. Korean text especially benefits from slightly wider spacing due to its uniform character height.
Headings -- lh1-2
Use narrow line spacing for large headings
Button / single line -- lh1
<!-- Body text -->
<p class="fs16px lh1-7 c71717A">
Use lh1-7 for long body text.
</p>
<!-- Title -->
<h1 class="fs3-6rem fw800 lh1-2">
Narrow line gap for large titles
</h1>
<!-- Button (single line) -->
<button class="fs14px lh1 py8px px16px bg6366F1 cFFFFFF br8px bn cp">
Button
</button>
<!-- Card body -->
<div class="bg18181B p2rem br8px">
<h3 class="fs2rem fw700 lh1-3 cFAFAFA mb8px">Card Title</h3>
<p class="fs14px lh1-7 c71717A">Card body Contentcontent.</p>
</div>Tips & Notes
Unitless values are recommended
Unitless line-height automatically adjusts proportional to font-size. lh1-5 always maintains the appropriate ratio whether font-size is 14px or 20px.
lh1 is optimal for single-line elements
Using lh1 for single-line elements like buttons, badges, navigation items provides precise top and bottom spacing.
lh1-5 to lh1-7 for readability
For body text, use lh1-5 to lh1-7. Narrow spacing causes reading fatigue, while too wide makes text look scattered.
Caution when using fixed units
Using a fixed value like lh24px causes line overlap when font-size exceeds line-height. Only use fixed values when font-size is confirmed.