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>