Design System / 02

Typography

One face: Neue Montreal carries everything, from display headlines to system labels. Hierarchy comes from size and casing, almost never from weight changes.

Face

Neue Montreal

AaBbCcDdEeFfGg 0123456789

Local woff2 · 400 / 500 / 700 · --font-sans, --font-heading

System labels

The same face, styled small, uppercase, and tracked out.

--font-mono aliases Neue Montreal · no second typeface ships

Scale

Display XL

clamp(3rem, 9vw, 7rem) · 500 · leading-none · uppercase

Utility page heroes

Lorem

Display Menu

clamp(2.85rem, 17vw, 4.35rem) · 500 · leading-[0.9]

Mobile menu links

Lorem Ipsum

Feature

clamp(2rem, 5vw, 4rem) · 500 · leading-none

Section statements

Lorem Ipsum Dolor + Sit Amet

Body

1rem · 500 · leading-[1.2]

Default body text (set on <body>)

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button

0.775rem · 500 · uppercase · tracking-[0.075em]

Form buttons, CTAs

Lorem Ipsum

Nav micro

0.625rem · 500 · uppercase · tracking-[0.02em]

Primary navigation, address block

Lorem — Ipsum — Dolor — Sit

System label

0.72–0.8rem · uppercase · tracking-[0.04em]

Eyebrows, metadata, system text (via font-mono alias)

Lorem Ipsum Dolor

Voices

The system speaks in roles, not fonts: a display grotesque carries the voice, system labels annotate it, and an optional accent face may join for exactly one role per page. Voices may interleave in a single headline at identical size — contrast comes from weight and case, never from scale.

Lorem Ipsumdolor sit amet,Consectetur

DisplayDuet — interleaved dual-voice headline

Role map: display Neue Montreal 500–700 · labels the mono alias, uppercase, tracked · accent voice reserved — an ultralight or serif face may take voice B of a duet, once per page, when one enters the system.

Rules

  • Anything that names the system speaks in small tracked uppercase (the font-mono alias); anything that speaks to the customer is set at reading sizes.
  • Interface text ≤ 0.8rem is always uppercase with 0.02–0.075em tracking — tracking widens as size shrinks.
  • Display sizes tighten: leading-none or 0.9, and never bold — medium (500) at large sizes keeps the editorial tone.
  • Paragraphs use text-wrap: pretty; headings use text-wrap: balance (set globally).
  • The rem scale is fluid at the root — clamp(15px, 14.5px + 0.104vw, 16.5px) — so every size flexes together with no per-element formulas.
  • Display leading tightens by tier as type grows: 1 / 0.85 / 0.8 / 0.75 (--leading-display-1 through -4).
  • Captions may set justified micro-mono (never body text) so caption lines fill their measure.