Lism CSS manages line-height through half-leading values, which is a somewhat unconventional approach.

Half-leading is the space on one side of a line of text: the gap between the line-height value and the actual character height, split equally above and below.

How Half-Leading Management Works

In Lism, the following style is applied to all elements:

* {
  line-height: var(--lh, calc(1em + var(--hl) * 2));
}

This ties line-height to the --hl variable (the half-leading amount) by default, so the spacing between text stays consistent regardless of font size.

When --lh is set, it takes precedence (this is what the lh property described below uses).

Why Use Half-Leading?

With a ratio like line-height: 1.6, the space between lines grows in proportion to the font size. That’s fine for body text, but large text such as headings ends up with too much space between lines and looks loose.

Managing half-leading as a fixed value keeps the space between lines constant regardless of font size.

lh (line-height) Is Also Available

hl manages line spacing as a fixed amount independent of font size. For cases where the spacing should scale with the font size, such as headings whose size changes significantly across screen sizes, the lh property sets line-height as a ratio instead.

Use hl by default. Note that hl has no effect on descendants of an element with lh set.

Tokens

Lism provides the tokens --hl--xs through --hl--xl as values for --hl, and --lh--xs through --lh--xl as values for --lh. See the HL / LH sections of Typography Tokens for the full list and a preview.