Line Height

Utilities to change an element's line-height.

CSS Variables

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


.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>
Last Updated: