Half-Leading (line-height)

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

Half-leading is the space above and below a line of text — the gap between the line-height value and the actual character height.

How It Works

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

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

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

Tokens

Tokens are provided under --hl--.

Token	Variable	Default value
`xs`	`--hl--xs`	`var(--hl-unit)`
`s`	`--hl--s`	`calc(var(--hl-unit) * 2)`
`base`	`--hl--base`	`calc(var(--hl-unit) * 3)`
`l`	`--hl--l`	`calc(var(--hl-unit) * 4)`

The --hl-unit above is defined as follows:

:root {
  --hl-unit: calc(var(--REM) * 0.125); /* ≒ 2px */
}

(Since --REM ≒ 1rem, --hl-unit is expected to be approximately 2px.)

`lh` Classes

The lh class uses these variables internally:

.-lh\:base {
  --hl: var(--hl--base);
}
.-lh\:xs {
  --hl: var(--hl--xs);
}
.-lh\:s {
  --hl: var(--hl--s);
}
.-lh\:l {
  --hl: var(--hl--l);
}

↓

Preview

1: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

xs: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

s: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

base: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

l: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

<p class="-lh:xs">Lorem ipsum ...</p>
<p class="-lh:s">Lorem ipsum ...</p>
<p class="-lh:base">Lorem ipsum ...</p>
<p class="-lh:l">Lorem ipsum ...</p>

Why Use Half-Leading?

With a typical line-height like 1.6, the effective line spacing grows as the font size increases.

That’s fine for body text, but for headings the spacing becomes too large.

By fixing the half-leading to a constant value, the distance between lines stays the same regardless of font size.

↓

Preview

H1: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

H2: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

H3: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

H4: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

H5: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

p : Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

s: Lorem ipsum dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor Incididunt ut. Labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut.

You can also remove half-leading easily using utility classes.

Utility Class

Learn about the utility classes in Lism CSS that apply bundled styles and decorations.