Typography

Heading and Text

Headings in Crimson Pro or Inter, body text with tones, the eyebrow label, inline code and keys.

Ant Design: Typography

import { Heading, Text, Eyebrow, Code, Kbd } from '@alea/ui';

Examples

Headings

Crimson Pro Light for titles (serif), Inter for interface headings (sans). Level sets the element, size the look.

Design that plays

Section title

Card title

Interface heading

With the gradient

Text

Sizes, tones and weights from the tokens.

Large lead text for introductions.

Body text at 16 px, the default.

Muted text for secondary details.

Faint text for the least important things.

Saved to the file

Couldn't connect

A long line that gets cut with an ellipsis when it runs out of room.

Eyebrow, code and keys

The small label above a title, inline code and keyboard keys.

Figma plugin

Token Converter

Install with npm i @alea/ui, then press ⌘ K to search.

Props

`Heading` props

Show 10 React Aria props

A heading with the Alea type: Crimson Pro light for titles, Inter for UI.

Prop	Type	Default	Description
`family`	`"serif" \| "sans"`	`'serif'`	serif (Crimson Pro, light) for titles, sans (Inter, semibold) for UI headings.
`gradient`	`boolean`	-	Fills the text with the accent gradient.
`level`	`2 \| 3 \| 4 \| 5 \| 6 \| 1`	`2`	The outline level (h1 to h6). Pick it for the page structure, not the size.
`size`	`"md" \| "lg" \| "display" \| "xl" \| "4xl" \| "3xl" \| "2xl"`	-	Visual size; defaults from the level. display is the hero size.

`Text` props

Show 10 React Aria props

Body text with the token sizes and tones.

Prop	Type	Default	Description
`as`	`ElementType`	`'p'`	The element to render. Default p.
`size`	`"sm" \| "md" \| "lg" \| "base" \| "xs" \| "xl"`	`'base'`	xs 12, sm 13, md 14, base 16 (default), lg 18, xl 20 px.
`tone`	`"danger" \| "default" \| "success" \| "warning" \| "accent" \| "muted" \| "faint"`	`'default'`	default, muted, faint, accent, success, warning or danger.
`truncate`	`boolean`	-	Cut to one line with an ellipsis.
`weight`	`"regular" \| "medium" \| "semibold"`	-	regular, medium or semibold.

`Eyebrow` props

The small uppercase label above a section title.

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby. (React Aria)
`autoFocus`	`boolean`	-	(React Aria)
`className`	`string`	-	(React Aria)
`defaultValue`	`string \| number \| readonly string[]`	-	(React Aria)
`id`	`string`	-	(React Aria)
`inputMode`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (React Aria)
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	-	(React Aria)
`onSubmit`	`SubmitEventHandler<HTMLElement>`	-	(React Aria)
`role`	`AriaRole`	-	(React Aria)
`style`	`CSSProperties`	-	(React Aria)

`Code` props

Inline code.

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby. (React Aria)
`autoFocus`	`boolean`	-	(React Aria)
`className`	`string`	-	(React Aria)
`defaultValue`	`string \| number \| readonly string[]`	-	(React Aria)
`id`	`string`	-	(React Aria)
`inputMode`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (React Aria)
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	-	(React Aria)
`onSubmit`	`SubmitEventHandler<HTMLElement>`	-	(React Aria)
`role`	`AriaRole`	-	(React Aria)
`style`	`CSSProperties`	-	(React Aria)

`Kbd` props

A key or shortcut, like ⌘K.

Prop	Type	Default	Description
`aria-label`	`string`	-	Defines a string value that labels the current element. @see aria-labelledby. (React Aria)
`autoFocus`	`boolean`	-	(React Aria)
`className`	`string`	-	(React Aria)
`defaultValue`	`string \| number \| readonly string[]`	-	(React Aria)
`id`	`string`	-	(React Aria)
`inputMode`	`"none" \| "search" \| "text" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal"`	-	Hints at the type of data that might be entered by the user while editing the element or its contents @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute} (React Aria)
`onChange`	`ChangeEventHandler<HTMLElement, Element>`	-	(React Aria)
`onSubmit`	`SubmitEventHandler<HTMLElement>`	-	(React Aria)
`role`	`AriaRole`	-	(React Aria)
`style`	`CSSProperties`	-	(React Aria)

Heading level comes from the outline, size from the design: a small h2 is fine.
Muted and faint text tones pass WCAG AA on the default surfaces for their intended sizes; faint is for secondary text only.

Do and don't

One h1 per page.
Use the eyebrow above a title, not as a heading.

Don't

Don't skip heading levels to get a size: set size instead.
Don't use faint text for anything people must read.

In Figma

Text styles: Display, 4XL to MD for serif headings, Body and UI sizes, Eyebrow and Code.