# type

> Combines text's `font-size`/`line-height` pair with the base sans font family, always opinionating the style to `sans`.

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

Combines text's `font-size`/`line-height` pair with the base sans
font family, always opinionating the style to `sans`. Pair `u.text()` with
an explicit `u.font()` when another family is needed.

## Quick reference

Every documented call, beside the CSS it emits.

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

## Examples

### Basic example

Use `type(name)` to set the sans family together with a step's font size and line height, like `type("2xl")` for a heading:

```tsx
<article mix={[font("serif"), ...]}>
	<h3 mix={[type("2xl"), weight("bold")]}>A field guide to winter birds</h3>
	<p>
		Chickadees stay put all winter, caching seeds in bark and moss and remembering thousands of
		hiding places well into spring.
	</p>
</article>
```

### Choosing a step

Pass any step of the text scale, from `type("xs")` for fine print to `type("4xl")` for a page title:

```tsx
<div mix={[...]}>
	<h3 mix={[type("xl"), weight("semibold")]}>Your order has shipped</h3>
	<p mix={[type("base")]}>It left our warehouse this morning and should arrive by Thursday.</p>
	<p mix={[type("xs"), fg("neutral.muted")]}>Order #10482 · Tracking updates every hour</p>
</div>
```

## Applying on a state

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

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

## Responsive design

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

```ts
u.at("md", u.type("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
type("10xl")
```

### Customizing font families

Redefine a `--ui-font-*` variable to change a family, or declare a new one:

```css
:root {
	--ui-font-display: "Inter Display", ui-sans-serif, system-ui, sans-serif;
}
```

```ts
declare module "@sdxc/u" {
	interface FontFamilies {
		display: true;
	}
}
```

The new name is then accepted wherever the scale is:

```ts
font("display")
```

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