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.

Numbers

Booton's proportional digits vary in width by up to ~25% (1 is much narrower than 0), so columns of numbers only align with tabular figures. But Booton's tnum feature also widens the comma, period, and space to a full figure slot — a bare tabular-nums makes any value with a thousands separator, decimal, unit, or currency symbol render with gappy punctuation ($3,200, 8 yr).

So use TabularNum from @smartacteam/ambient-web/tabular-num for any rendered number — it applies tabular widths to the digit runs only, leaving punctuation at its natural width. A bare tabular-nums class is a lint error.

That holds even for a value that has no punctuation today. An integer becomes a grouped one the moment the data grows past 999, or a formatter gains a unit — and that change happens far from the class that decides how it renders. TabularNum on a plain integer renders identically to tabular-nums, so the uniform rule costs nothing and removes the question.

import { TabularNum } from "@smartacteam/ambient-web/tabular-num";
 
<TabularNum>{value.toLocaleString()}</TabularNum>;

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