[ @sdxc/u/typography ]

line-height

Applies line-height.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { leading } from "@sdxc/u/typography";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.leading("relaxed")`	`css({ lineHeight: "var(--ui-leading-relaxed, 1.625)" })`
`u.leading(1.8)`	`css({ lineHeight: 1.8 })`
`u.leading("2rem")`	`css({ lineHeight: "2rem" })`

Examples

Basic example

Use leading(name) with a step of the leading scale, like leading("tight") or leading("loose"), to set the line height of an element:

leading("tight")

The ferry left at dawn, and by the time the fog lifted we could see the island: a low green line, a lighthouse, and one road climbing from the harbour to the church.

leading("normal")

The ferry left at dawn, and by the time the fog lifted we could see the island: a low green line, a lighthouse, and one road climbing from the harbour to the church.

leading("loose")

The ferry left at dawn, and by the time the fog lifted we could see the island: a low green line, a lighthouse, and one road climbing from the harbour to the church.

<div mix={[grid(), gridTemplate({ columns: "repeat(3, 1fr)" }), gap(6)]}>
	<div>
		<p mix={[...]}>leading("tight")</p>
		<p mix={[leading("tight")]}>
			The ferry left at dawn, and by the time the fog lifted we could see the island: a low
			green line, a lighthouse, and one road climbing from the harbour to the church.
		</p>
	</div>
	<div>
		<p mix={[...]}>leading("normal")</p>
		<p mix={[leading("normal")]}>
			The ferry left at dawn, and by the time the fog lifted we could see the island: a low
			green line, a lighthouse, and one road climbing from the harbour to the church.
		</p>
	</div>
	<div>
		<p mix={[...]}>leading("loose")</p>
		<p mix={[leading("loose")]}>
			The ferry left at dawn, and by the time the fog lifted we could see the island: a low
			green line, a lighthouse, and one road climbing from the harbour to the church.
		</p>
	</div>
</div>

Numbers and lengths

Pass a number for a line height relative to the font size, like leading(1.8), or a length to fix it, like leading("2rem"):

leading(1.8)

The night train to Lisbon leaves at ten. Bring a book, a sweater, and something to eat, because the dining car closes long before the border.

leading("2rem")

The night train to Lisbon leaves at ten. Bring a book, a sweater, and something to eat, because the dining car closes long before the border.

<div mix={[grid(), gridTemplate({ columns: "1fr 1fr" }), gap(8)]}>
	<div>
		<p mix={[...]}>leading(1.8)</p>
		<p mix={[leading(1.8)]}>
			The night train to Lisbon leaves at ten. Bring a book, a sweater, and something to eat,
			because the dining car closes long before the border.
		</p>
	</div>
	<div>
		<p mix={[...]}>leading("2rem")</p>
		<p mix={[leading("2rem")]}>
			The night train to Lisbon leaves at ten. Bring a book, a sweater, and something to eat,
			because the dining car closes long before the border.
		</p>
	</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.leading("relaxed"))

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.leading("relaxed"))

Customizing your theme

Customizing line heights

Each named line height reads a --ui-leading-* variable before its built-in value, so a theme retunes one by declaring it:

:root {
	--ui-leading-relaxed: 1.7;
}

Every call that names the step now reads the new value:

leading("relaxed")

Signature

u.leading(value?: LeadingValue)