# line-height

> Applies `line-height`.

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

Applies `line-height`. Named values resolve through
`var(--ui-leading-{name}, fallback)`, so an app can override the scale
without losing the default; numbers and other strings pass through unchanged.

## 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:

```tsx
<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")`:

```tsx
<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.

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

## Responsive design

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

```ts
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:

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

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

```ts
leading("relaxed")
```

## Signature

```ts
u.leading(value?: LeadingValue)
```