# text

> Applies `font-size` and its paired `line-height` from the named text scale through matching `var(--ui-text-*)` / `var(--ui-leading-*)` properties, so an extended name inherits a sensible default leading before defining one.

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

Applies `font-size` and its paired `line-height` from the named text scale
through matching `var(--ui-text-*)` / `var(--ui-leading-*)` properties, so
an extended name inherits a sensible default leading before defining one.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.text("lg")` | `css({ fontSize: "var(--ui-text-lg, 1.125rem)", lineHeight: "var(--ui-leading-lg, calc(1.75 / 1.125))" })` |

## Examples

### Basic example

Use `text(name)` with a step of the text scale, like `text("sm")` or `text("xl")`, to set an element's font size together with its line height:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>text("sm")</p>
		<p mix={[text("sm")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>text("base")</p>
		<p mix={[text("base")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>text("lg")</p>
		<p mix={[text("lg")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>text("xl")</p>
		<p mix={[text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>text("2xl")</p>
		<p mix={[text("2xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
</div>
```

### Paired line height

Every step brings the line height that suits it, so wrapped text stays readable from `text("sm")` up to `text("2xl")`:

```tsx
<div mix={[grid(), gridTemplate({ columns: "1fr 1fr" }), gap(8)]}>
	<div>
		<p mix={[...]}>text("sm")</p>
		<p mix={[text("sm")]}>
			The kettle clicked off just as the rain started, and for a minute the whole kitchen
			smelled of wet pavement and black tea.
		</p>
	</div>
	<div>
		<p mix={[...]}>text("2xl")</p>
		<p mix={[text("2xl")]}>
			The kettle clicked off just as the rain started, and for a minute the whole kitchen
			smelled of wet pavement and black tea.
		</p>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.text("lg"))
```

## Responsive design

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

```ts
u.at("md", u.text("lg"))
```

## Customizing your theme

### Customizing text sizes

Redefine a `--ui-text-*` variable to change a step, or declare a new one with the line height it sets beside it:

```css
:root {
	--ui-text-10xl: 10rem;
	--ui-leading-10xl: 1;
}
```

```ts
declare module "@sdxc/u" {
	interface TextSizes {
		"10xl": true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
text("10xl")
```

### 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.text(name: TextSizeName | (string & {}))
```