Line Height
Utilities to change an element's line-height.
CSS Variables
| Variable | Output |
|---|---|
| var(--lh0) | 1em |
| var(--lh1) | calc(1em + 1px) |
| var(--lh2) | calc(1em + 2px) |
| var(--lh4) | calc(1em + 4px) |
| var(--lh6) | calc(1em + 6px) |
| var(--lh8) | calc(1em + 8px) |
| var(--lh12) | calc(1em + 12px) |
| var(--lh16) | calc(1em + 16px) |
| var(--lh20) | calc(1em + 20px) |
| var(--lh24) | calc(1em + 24px) |
| var(--lh-tighter) | 1.125 |
| var(--lh-tight) | 1.25 |
| var(--lh-normal) | 1.5 |
| var(--lh-loose) | 1.75 |
| var(--lh-looser) | 2 |
Classes
| Class | Output |
|---|---|
| .d-lh0 | line-height: var(--lh0) !important; |
| .d-lh1 | line-height: var(--lh1) !important; |
| .d-lh2 | line-height: var(--lh2) !important; |
| .d-lh4 | line-height: var(--lh4) !important; |
| .d-lh6 | line-height: var(--lh6) !important; |
| .d-lh8 | line-height: var(--lh8) !important; |
| .d-lh12 | line-height: var(--lh12) !important; |
| .d-lh16 | line-height: var(--lh16) !important; |
| .d-lh20 | line-height: var(--lh20) !important; |
| .d-lh24 | line-height: var(--lh24) !important; |
| .d-lh-tighter | line-height: var(--lh-tighter) !important; |
| .d-lh-tight | line-height: var(--lh-tight) !important; |
| .d-lh-normal | line-height: var(--lh-normal) !important; |
| .d-lh-loose | line-height: var(--lh-loose) !important; |
| .d-lh-looser | line-height: var(--lh-looser) !important; |
Relative line-heights
Use d-lh-{n} to change an element's line-height relatively. This means no unit is set with the line-height. Instead the line-height value is a multiple of the font-size.
<p class="d-lh-tighter">...</p>
<p class="d-lh-tight">...</p>
<p class="d-lh-normal">...</p>
<p class="d-lh-loose">...</p>
<p class="d-lh-looser">...</p>
Fixed line-heights
Use d-lh{n} to fix an element's line-height. This allows you to target a specific line-height based on the font-size. For example if a target 20px line-height is desired and the current font-size is 14px, apply .d-lh6 to achieve this target (14px font-size + 6px = 20px target line-height).
<p class="d-lh0">...</p>
<p class="d-lh1">...</p>
<p class="d-lh2">...</p>
<p class="d-lh4">...</p>
<p class="d-lh6">...</p>
<p class="d-lh8">...</p>
<p class="d-lh12">...</p>
<p class="d-lh16">...</p>
<p class="d-lh20">...</p>
<p class="d-lh24">...</p>