# Typography (/docs/typography)



Luke UI defines semantic typography styles. Each style is a complete treatment: font family, size,
weight, line height, letter spacing, and Capsize trim.

## Base components [#base-components]

Use `Text` for body copy and other non-heading content. Use `Heading` for document and section
headings. Heading manages semantic levels and selects a matching typography style by default.

apps/docs/src/examples/overview/typography-components.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Heading } from '@luke-ui/react/heading';
import { Text } from '@luke-ui/react/text';

export default () => {
	return (
		<Box display="flex" flexDirection="column" gap="sp12">
			<Heading>Account settings</Heading>
			<Text>Choose how this account appears to others.</Text>
		</Box>
	);
};
```

Use `Numeral` for locale-aware values. It inherits the typography styles. It formats currencies,
percentages, units, and compact values. Use `Emoji` when an emoji needs a reliable accessible label.

## Typography styles [#typography-styles]

`Text` and `Heading` use these styles, from smallest to largest:

| Style                 | Intended use                                              |
| --------------------- | --------------------------------------------------------- |
| `caption`             | Ancillary text at the smallest size                       |
| `label`               | Terse UI and control text at label size with label weight |
| `body`                | Normal body copy                                          |
| `lead`                | Larger introductory body copy                             |
| `heading4`–`heading1` | Visual heading hierarchy                                  |
| `display`             | Oversized editorial or marketing moments                  |

apps/docs/src/examples/text/typography.tsx

```tsx
import { Box } from '@luke-ui/react/box';
import { Text } from '@luke-ui/react/text';
import { typeStyles, vars } from '@luke-ui/react/theme';
import { Fragment } from 'react';

export default () => {
	return (
		<Box display="flex" flexDirection="column" gap="sp12">
			<Box
				alignItems="flex-end"
				display="grid"
				elementType="dl"
				gap="sp12"
				style={{ gridTemplateColumns: 'max-content minmax(0, 1fr)' }}
			>
				{typeStyles.map((typography) => (
					<Fragment key={typography}>
						<Text color="secondary" elementType="dt" typography="caption">
							{typography}
						</Text>
						<Box
							elementType="dd"
							style={{ borderBlockEnd: `1px dashed ${vars.color.border.decorative}` }}
						>
							<Text elementType="div" typography={typography}>
								Aa
							</Text>
						</Box>
					</Fragment>
				))}
			</Box>
		</Box>
	);
};
```

`Text` defaults to `body`. `Heading` selects a style from its level, and accepts `typography` when
the visual hierarchy needs a deliberate override. An `h2` can use `heading3` visually without
changing its semantic level. There is no `heading5` or `heading6` style. Those HTML levels reuse
`lead` and `body` with heading weight.

## Capsize trims [#capsize-trims]

Each style includes Capsize trim values for the active font family. A line box normally reserves
space above and below its letters. Trim removes that extra space from a block text element. Read
[Text](/components/typography/text#trimming) for how `Text` infers trim from the element type.

## Weight and colour [#weight-and-colour]

Each typography style already carries its weight. Pass `fontWeight` only when you need a different
role. Themes expose `body`, `label`, `heading`, and `emphasis` for that purpose, and for `Strong`.
Text also accepts semantic `color` values such as `primary`, `secondary`, `accent`, `info`,
`success`, `warning`, and `danger`.

```tsx
<Text color="secondary" typography="label">
	Last updated 12 minutes ago
</Text>
```

Applications load any font files required by a custom theme. The theme then assigns that typeface to
the shared styles and weight roles. Luke UI computes trim values from that font's metrics.

## Continue learning [#continue-learning]

<Cards>
  <Card href="/components/typography/text" title="Text">
    Apply typography styles, trim, and colour on body copy.
  </Card>

  <Card href="/components/typography/heading" title="Heading">
    Manage heading levels and pair them with typography styles.
  </Card>

  <Card href="/docs/styling" title="Styling">
    See where typography sits beside layout utilities and tokens.
  </Card>
</Cards>