Product Strategy

Typography

Our typography system uses Inter Variable for clarity at text sizes and geometric precision at large scales. Token-driven sizing ensures consistency across components.

Typeface Demonstration

Inter Variable: Signal & Precision

Our type system uses Inter Variable for its clarity at text sizes and geometric precision at large scales. Token-driven sizing ensures consistency across components without manual adjustments.

Headline Hierarchy

Semantic headings mapped to the type scale.

Signal-to-noise matters most.

Structure keeps teams aligned.

Subheads reinforce the story.

Supporting details stay calm.

Body copy relies on the base size and relaxed leading to guide longer reading. Use bold and italic for emphasis sparingly so the cadence stays balanced.

Quote + Meta

Blockquotes, lists, and inline code.

Typography is the craft of endowing human language with a durable visual form.

— Robert Bringhurst, The Elements of Typographic Style

Start from base-size token—all scale references cascade from it.
Use semantic HTML; avoid class-only typography coupling.
Modular scale ensures visual rhythm without magic numbers.
Line-height adapts to content: tighter for headlines, relaxed for body.

Inline snippets like var scale = tokens["type"]; inherit the mono font token and tighten letter spacing for clarity.

System Highlights

Token-driven sizing references.

Base Size: 1rem (16px) anchors the scale. Fluid growth via clamp() adapts to viewport without breakpoint brittleness.
var(--type-size-base)
Scale Ratio: Major third (1.25) provides comfortable distinction between levels. Large displays scale further via viewport units.
1.25 × previous size
Heading Sizes: Six semantic levels from h1 (3.052rem) to h6 (1rem). Each level has a clear purpose in content hierarchy.
h1–h6 mapped to scale
Leading (Line-Height): Headlines use 1.2 for compactness. Body copy uses 1.6 for comfortable reading. Code blocks use 1.5 for clarity.
Context-adaptive spacing