# font-size

> Applies `font-size` from the named text scale (`xs` through `9xl`, or an app-extended name), resolving the same token as `u.text()`'s font-size half but touching only `font-size`, leaving line-height fully caller-set.

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

Applies `font-size` from the named text scale (`xs` through `9xl`, or an
app-extended name), resolving the same token as `u.text()`'s font-size
half but touching only `font-size`, leaving line-height fully caller-set.

## Quick reference

Every documented call, beside the CSS it emits.

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

## Examples

### Basic example

Use `fontSize(name)` with a step of the text scale, like `fontSize("sm")` or `fontSize("2xl")`, to set the font size of an element:

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

### Display sizes

The upper steps of the scale, from `fontSize("4xl")` to `fontSize("9xl")`, size headlines and large figures:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>fontSize("4xl")</p>
		<p mix={[fontSize("4xl"), leading("none"), weight("bold")]}>Quarterly report</p>
	</div>
	<div>
		<p mix={[...]}>fontSize("6xl")</p>
		<p mix={[fontSize("6xl"), leading("none"), weight("bold")]}>$48,210</p>
	</div>
	<div>
		<p mix={[...]}>fontSize("8xl")</p>
		<p mix={[fontSize("8xl"), leading("none"), weight("bold")]}>97%</p>
	</div>
</div>
```

### Setting the line height

`fontSize()` touches only the font size, so pair it with `leading()` to choose the line height yourself, or reach for `text()` to set both:

```tsx
<div mix={[maxIs(96), ...]}>
	<div>
		<p mix={[...]}>fontSize("lg"), leading("tight")</p>
		<p mix={[fontSize("lg"), 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={[...]}>fontSize("lg"), leading("loose")</p>
		<p mix={[fontSize("lg"), 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>
```

## Applying on a state

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

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

## Responsive design

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

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

## Signature

```ts
u.fontSize(name: TextSizeName | (string & {}))
```