# font-weight

> Applies `font-weight`.

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

Applies `font-weight`. Named values alias the standard numeric weight
scale (`thin` 100 through `black` 900); a raw number passes through
unchanged for values the named scale doesn't cover.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.weight("semibold")` | `css({ fontWeight: 600 })` |
| `u.weight(550)` | `css({ fontWeight: 550 })` |

## Examples

### Basic example

Use `weight(name)`, like `weight("medium")` or `weight("bold")`, to set the font weight of an element:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>weight("light")</p>
		<p mix={[weight("light"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>weight("normal")</p>
		<p mix={[weight("normal"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>weight("medium")</p>
		<p mix={[weight("medium"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>weight("semibold")</p>
		<p mix={[weight("semibold"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
	<div>
		<p mix={[...]}>weight("bold")</p>
		<p mix={[weight("bold"), text("xl")]}>The quick brown fox jumps over the lazy dog.</p>
	</div>
</div>
```

### Numeric weights

Pass a number from 1 to 1000, like `weight(550)`, for a weight between the named steps when the font is variable:

```tsx
<div mix={[...]}>
	<div>
		<p mix={[...]}>weight(350)</p>
		<p mix={[weight(350), text("3xl")]}>Aa</p>
	</div>
	<div>
		<p mix={[...]}>weight(450)</p>
		<p mix={[weight(450), text("3xl")]}>Aa</p>
	</div>
	<div>
		<p mix={[...]}>weight(550)</p>
		<p mix={[weight(550), text("3xl")]}>Aa</p>
	</div>
	<div>
		<p mix={[...]}>weight(650)</p>
		<p mix={[weight(650), text("3xl")]}>Aa</p>
	</div>
	<div>
		<p mix={[...]}>weight(750)</p>
		<p mix={[weight(750), text("3xl")]}>Aa</p>
	</div>
</div>
```

## Applying on a state

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

```ts
u.hover(u.weight("semibold"))
```

## Responsive design

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

```ts
u.at("md", u.weight("semibold"))
```

## Signature

```ts
u.weight(value?: FontWeightValue)
```