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

`hl` Classes

Half-leading is specified with the hl (half-leading) property. The -hl:* classes (or the hl prop on <Lism>-based components) set these variables on --hl internally:

.-hl\:base {
  --hl: var(--hl--base);
}
.-hl\:xs {
  --hl: var(--hl--xs);
}
.-hl\:s {
  --hl: var(--hl--s);
}
.-hl\:l {
  --hl: var(--hl--l);
}
.-hl\:0 {
  --hl: 0px; /* no half-leading */
}

↓

Preview

0: 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="-hl:xs">Lorem ipsum ...</p>
<p class="-hl:s">Lorem ipsum ...</p>
<p class="-hl:base">Lorem ipsum ...</p>
<p class="-hl:l">Lorem ipsum ...</p>

hl also supports breakpoints, so you can switch it responsively like hl={['s', null, 'l']} (-hl_md:l).

`lh` (Compatibility Shortcut)

For cases where you prefer to think in terms of line-height, lh is available as a compatibility shortcut.

|Value|Behavior| |---|---| |lh="base" / "xs" / "s" / "l"|References the same tokens as hl (controls --hl)| |lh="1"|No half-leading (equivalent to hl="0")| |Arbitrary numbers like lh="1.7"|Output as a raw CSS line-height, as before|

Official examples use hl by default. Use lh only when you want to specify a raw line-height value.

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.

Utility classes are also available to remove half-leading.

Utility Class

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