Line Height

Utility classes for controlling an element's line height.

Variables

Dialtone provides Less and CSS variables for all line-heights. This is useful if you're writing custom CSS and an immutable class isn't required or desired.

Type CSS Var Deprecated CSS Var Less Var Deprecated Less Var Output
Relative var(--lh-none) var(--line-height--xs) @lh-none @line-height--xs 1
var(--lh-tighter) var(--line-height--sm) @lh-tighter @line-height--sm 1.125
var(--lh-tight) var(--line-height--md) @lh-tight @line-height--md 1.25
var(--lh-normal) var(--line-height--lg) @lh-normal @line-height--lg 1.5
var(--lh-loose) var(--line-height--xl) @lh-loose @line-height--xl 1.75
var(--lh-looser) var(--line-height--xxl) @lh-looser @line-height--xxl 2
Fixed var(--lh0) N/A @lh0 N/A 1em
var(--lh1) N/A @lh1 N/A calc(1em + 1px)
var(--lh2) N/A @lh2 N/A calc(1em + 2px)
var(--lh4) N/A @lh4 N/A calc(1em + 4px)
var(--lh6) N/A @lh6 N/A calc(1em + 6px)
var(--lh8) N/A @lh8 N/A calc(1em + 8px)
var(--lh12) N/A @lh12 N/A calc(1em + 12px)
var(--lh16) N/A @lh16 N/A calc(1em + 16px)
var(--lh20) N/A @lh20 N/A calc(1em + 20px)
var(--lh24) N/A @lh24 N/A calc(1em + 24px)

Relative Classes

Starting in v5.8.0, Dialtone began providing immutable type classes, meaning they include an !important to override CSS specificity. These new classes abandon the previous "t-shirt" sizing metaphor in favor of more descriptive classes. All previous class names still exist, but are considered deprecated and should not be used moving forward. They will be removed in a future version.

Class Deprecated Class Output
.d-lh-none .d-line-height--xs line-height: 1 !important;
.d-lh-tighter .d-line-height--sm line-height: 1.125 !important;
.d-lh-tight .d-line-height--md line-height: 1.25 !important;
.d-lh-normal .d-line-height--lg line-height: 1.5 !important;
.d-lh-loose .d-line-height--xl line-height: 1.75 !important;
.d-lh-looser .d-line-height--xxl line-height: 2 !important;
.d-lh-none

The quick brown fox jumps over the lazy dog.

.d-lh-tighter

The quick brown fox jumps over the lazy dog.

.d-lh-tight

The quick brown fox jumps over the lazy dog.

.d-lh-normal

The quick brown fox jumps over the lazy dog.

.d-lh-loose

The quick brown fox jumps over the lazy dog.

.d-lh-looser

The quick brown fox jumps over the lazy dog.

<p class="d-lh-none"></p>
<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 Classes

Starting in v5.8.0, Dialtone provides immutable, fixed line-height classes, meaning they include an !important to override CSS specificity. Unlike relative line-height classes which are unitless and don't target specific heights, these fixed classes allow finer control over the targeted line-height. For example, an item with font-size of 14px (1.4rem) and a .lh6 class would create a line-height of 20px (14px + 6px = 20px). If the same .lh6 class was applied to an item with a 16px font-size, it would create a 22px line-height (16px + 6px = 22px).

Class Output
.d-lh0 line-height: 1em !important;
.d-lh1 line-height: calc(1em + 1px) !important;
.d-lh2 line-height: calc(1em + 2px) !important;
.d-lh4 line-height: calc(1em + 4px) !important;
.d-lh6 line-height: calc(1em + 6px) !important;
.d-lh8 line-height: calc(1em + 8px) !important;
.d-lh12 line-height: calc(1em + 12px) !important;
.d-lh16 line-height: calc(1em + 16px) !important;
.d-lh20 line-height: calc(1em + 20px) !important;
.d-lh24 line-height: calc(1em + 24px) !important;
.d-lh0 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh1 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh2 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh4 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh6 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh8 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh12 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh16 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh20 .d-fs18

The quick brown fox jumps over the lazy dog.

.d-lh24 .d-fs18

The quick brown fox jumps over the lazy dog.

<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>