Half-Leading (line-height)

Lism CSS takes a unique approach to line-height, managing it through half-leading values.

Half-leading refers to the spacing above and below a line of text — the space between line-height 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 makes line-height depend on the --hl variable (which specifies the half-leading amount), enabling layouts where the spacing between text remains 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>

Benefits of Half-Leading Management

When line-height is set to a typical value like 1.6, the effective line spacing grows as the font size increases.

This works fine for body-sized text, but for headings it becomes too large and difficult to read.

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

↓

Preview

H1: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H2: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H3: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H4: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

H5: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

p : ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

s: ロレム・イプサムの座り雨。目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。

Additionally, removing half-leading becomes straightforward.

Reference: Half-leading trim class