Typography

Rules of typesetting throughout the system.

Font Families

Ambient uses two custom variable fonts designed for optimal readability across interfaces.

Booton

The primary typeface for all UI text. Booton is a humanist sans-serif with excellent legibility at small sizes and a warm, approachable character.

The quick brown fox jumps over the lazy dog.

font-family: var(--font-booton), system-ui, sans-serif;

ABC Otto

A display typeface with distinctive character, used sparingly for branded moments and decorative headings.

The quick brown fox jumps over the lazy dog.

Reserve Otto for marketing pages, hero sections, and brand expressions.

font-family: var(--font-otto);

Type Scale

A harmonious set of font sizes that maintain visual hierarchy across the interface.

Size Name	Font Size
`2xl`	24px/1.5rem
`xl`	20px/1.25rem
`lg`	18px/1.125rem
`md`	16px/1rem
`sm`	14px/0.875rem
`xs`	12px/0.75rem

Font weights

Booton is a variable font supporting weights from 100 to 900. The system uses three semantic weights.

Weight Name	Font Weight Value	Usage
`normal`	300	Body text and default content
`medium`	400	Labels, buttons, and emphasis
`bold`	500	Headings and strong emphasis

Line Height

Two line height values cover most typographic needs.

Normal Line Height / 1.167This is an example of normal line height, which provides comfortable spacing for body text and longer passages of content.

Tight Line Height / 1.5This is an example of tight line height, which creates a compact and impactful feel for headings and short bursts of text.

Letter Spacing

Tight Letter Spacing / -0.01emThis is an example of tight line height, which creates a compact and impactful feel for headings and short bursts of text.

Usage guidelines

Hierarchy

Use 2xl–xl sizes for page titles and section headings
Use lg–md for subheadings and lead paragraphs
Use sm for body text, form labels, and UI controls
Use xs for captions, helper text, and metadata

Accessibility

Maintain a minimum font size of 12px (xs) for legibility
Ensure sufficient color contrast (4.5:1 for body text, 3:1 for large text)
Avoid using font weight alone to convey meaning

Responsive considerations

Base font size is 16px (1rem) by default
Type scales proportionally with user browser settings
Consider reducing heading sizes on mobile viewports