logo

Air CSS ver. 2.3.2

Line height

It's always a good practice to add some leading to the type setting to open up the space between the line of the text. There is a sweet spot between too tight and too open leading which depends on the designer's visual judgment.

Mnemonics

Bases
Modifiers
Optional extensions
lh = line height

-solid = solid leading (1)
-title = title leading (1.25)
-body = body leading (1.5)

none

Examples

<p class="lh-solid">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati!
<p class="lh-title">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati!
<p class="lh-body">lorem ipsum ...</p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus temporibus soluta veritatis dolorum rerum vero quibusdam at repellendus qui? Ad aliquam nesciunt voluptate aspernatur cumque excepturi necessitatibus neque maxime obcaecati!

Source code

.lh-solid { line-height: var(--line-height-solid, 1); }
.lh-title { line-height: var(--line-height-title, 1.25); }
.lh-body  { line-height: var(--line-height-body, 1.5); }