Design Foundations

Typography

Use text scale tokens, font utilities, line height, letter spacing, families, and weights.

Architectural

Future-proof infrastructure

From typography to spacing, every detail is intentionally designed to provide visual harmony, adaptability, and intuitive customization across your entire site.

<div class="text-2xs font-semibold tracking-widest uppercase">Architectural</div><div class="text-md font-medium text-strong">Future-proof infrastructure</div><div class="clamp-lines:3 text-sm text-body">  From typography to spacing, every...</div>

Typography tokens define readable type scale, line height, letter spacing, font families, and font weights. Use text:<size> when you want a complete type treatment, and use lower-level typography utilities when you need to tune one property.

<p class="text-lg font-medium">Readable product copy</p>

Generated CSS

@layer theme {  :root,  :host {    --font-size-lg: 1.125rem;    --font-weight-medium: 500  }}@layer utilities {  .text-lg {    font-size: var(--font-size-lg);    line-height: max(1.8em - max(0rem, var(--font-size-lg) - 1rem) * 1.12, var(--font-size-lg));    letter-spacing: clamp(-.072em, calc((var(--font-size-lg) - 1rem) * -.048), 0em)  }  .font-medium {    font-weight: var(--font-weight-medium)  }}

Namespaces for typography

Typography is built from theme tokens organized into focused namespaces.

Utility groups table
Group	Utility keys	Description
Text scale	`text`, `font`, `font-size`	Use the text utility for complete type treatments and font utilities for font-size-only changes.
Font family	`font`, `font-family`	Use family tokens for reusable typeface choices.
Font weight	`font`, `font-weight`	Use weight tokens for emphasis and hierarchy.
Line height	`leading`, `line-height`	Use leading tokens for readable vertical rhythm.
Letter spacing	`tracking`, `letter-spacing`	Use tracking tokens for repeated letter-spacing decisions.

Utilities search the relevant namespace, so font-lg, leading-md, and tracking-tight can use short token names without the full custom property prefix.

All-in-one text scale

At its core, the system is powered by a semantic type scale from text-3xs to text-10xl. These values are calibrated as complete text treatments, not just mathematically scaled font sizes.

Use text:<size> to apply the tuned font size, line height, and letter spacing with one class.

text-3xs ~ text-xs — For fine print, annotations, captions, or table labels
text-sm ~ text-lg — Standard text sizes for body copy, paragraphs, and buttons
text-xl ~ text-3xl — Ideal for subheadings, lead paragraphs, or callouts
text-4xl ~ text-10xl — Reserved for large headings, page titles, and hero sections

Use font:<size> when you only want the font-size token. Use leading:* and tracking:* when the design intentionally adjusts line height or letter spacing separately.

Body text

Use the smaller type steps for supporting text and body copy. Each text:* utility sets font size, line height and letter spacing together.

<!-- text-sm --><p id="target" class="max-w:28ch m:0 text-sm font-regular">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

<!-- text-md --><p id="target" class="max-w:28ch m:0 text-md font-regular">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

<!-- text-lg --><p id="target" class="max-w:28ch m:0 text-lg font-regular">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

Headings

Use the middle steps to establish a heading hierarchy. The heading element expresses structure; the class controls its visual treatment.

<!-- text-lg --><h2 id="target" class="max-w:28ch m:0 text-lg font-regular">A clearer way to work</h2>

<!-- text-xl --><h2 id="target" class="max-w:28ch m:0 text-xl font-regular">A clearer way to work</h2>

<!-- text-2xl --><h2 id="target" class="max-w:28ch m:0 text-2xl font-regular">A clearer way to work</h2>

Page titles

Larger steps use tighter leading and tracking. Keep titles short enough to wrap comfortably at narrow widths.

<!-- text-3xl --><h2 id="target" class="max-w:28ch m:0 text-3xl font-regular">Space for good ideas.</h2>

<!-- text-4xl --><h2 id="target" class="max-w:28ch m:0 text-4xl font-regular">Space for good ideas.</h2>

Without vs with `text:<size>`

Manually configuring typography often requires juggling font-size, line-height, and letter-spacing. This becomes inconsistent when the same heading or paragraph style appears across components.

font-5xl

Designing for consistency across every platform.

text-5xl

Designing for consistency across every platform.

The type treatment is assembled manually.

<h1 class="font-3xl leading:2.4rem tracking:-0.048em">...</h1>

The type treatment uses the shared text scale.

<h1 class="text-3xl">...</h1>

The text-3xl token applies a finely tuned combination:

@layer theme {  :root,  :host {    --font-size-3xl: 2rem  }}@layer utilities {  .text-3xl {    font-size: var(--font-size-3xl);    line-height: max(1.8em - max(0rem, var(--font-size-3xl) - 1rem) * 1.12, var(--font-size-3xl));    letter-spacing: clamp(-.072em, calc((var(--font-size-3xl) - 1rem) * -.048), 0em)  }}

Prefer text:<size> for repeated body, heading, and display styles. Reach for lower-level typography utilities only when the design intentionally departs from the text scale.

Type scale

The font scale ranges from font-3xs to font-10xl, with each size intentionally designed to deliver visual harmony and clear hierarchy across a variety of use cases.

Use font:* size tokens to change font size without setting line height or letter spacing. These specimens share leading-md, so their line height scales with their size.

<!-- font-xs --><p id="target" class="m:0 font-xs leading-md">Design with clarity.</p>

<!-- font-sm --><p id="target" class="m:0 font-sm leading-md">Design with clarity.</p>

<!-- font-md --><p id="target" class="m:0 font-md leading-md">Design with clarity.</p>

<!-- font-lg --><p id="target" class="m:0 font-lg leading-md">Design with clarity.</p>

<!-- font-xl --><p id="target" class="m:0 font-xl leading-md">Design with clarity.</p>

<!-- font-2xl --><p id="target" class="m:0 font-2xl leading-md">Design with clarity.</p>

Font families

font-sans, font-serif and font-mono select the preset family stacks. Their resolved typefaces depend on the available fonts and any project overrides.

<!-- font-sans --><p id="target" class="m:0 font-sans font-xl leading-md">Design with clarity.</p>

<!-- font-serif --><p id="target" class="m:0 font-serif font-xl leading-md">Design with clarity.</p>

<!-- font-mono --><p id="target" class="m:0 font-mono font-xl leading-md">Design with clarity.</p>

See the font family reference for more details on how to add custom fonts.

Font weights

Our typography system defines a semantic range of font weight tokens, from font-thin to font-heavy, providing clear naming for visual emphasis and typographic hierarchy.

font-thin extra-light strokes for subtle or elegant UI elements
font:line light weight, ideal for large headings or minimalist design
font-regular default weight for body text and general readability
font-medium slightly bolder for subheadings or emphasis
font-bold strong emphasis, often used in call-to-action or UI labels
font-heavy maximum weight for impact, branding, or visual anchors

Use named weight tokens from font-thin to font-heavy. The variable Geist face in this preview supports the full 100–900 range.

<!-- font-thin --><p id="target" class="m:0 font-thin font-xl leading-sm">Design with clarity.</p>

<!-- font-extralight --><p id="target" class="m:0 font-extralight font-xl leading-sm">Design with clarity.</p>

<!-- font-light --><p id="target" class="m:0 font-light font-xl leading-sm">Design with clarity.</p>

<!-- font-regular --><p id="target" class="m:0 font-regular font-xl leading-sm">Design with clarity.</p>

<!-- font-medium --><p id="target" class="m:0 font-medium font-xl leading-sm">Design with clarity.</p>

<!-- font-semibold --><p id="target" class="m:0 font-semibold font-xl leading-sm">Design with clarity.</p>

<!-- font-bold --><p id="target" class="m:0 font-bold font-xl leading-sm">Design with clarity.</p>

<!-- font-extrabold --><p id="target" class="m:0 font-extrabold font-xl leading-sm">Design with clarity.</p>

<!-- font-heavy --><p id="target" class="m:0 font-heavy font-xl leading-sm">Design with clarity.</p>

Line height

The leading tokens are unitless multipliers. Each paragraph uses 16px type and the same maximum line width, making its line spacing directly comparable.

<!-- leading-xs --><p id="target" class="max-w:24ch m:0 font-md leading-xs">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

<!-- leading-sm --><p id="target" class="max-w:24ch m:0 font-md leading-sm">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

<!-- leading-md --><p id="target" class="max-w:24ch m:0 font-md leading-md">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

<!-- leading-lg --><p id="target" class="max-w:24ch m:0 font-md leading-lg">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

<!-- leading-xl --><p id="target" class="max-w:24ch m:0 font-md leading-xl">Clear type gives each idea room to breathe. Keep the measure comfortable and let the content set the pace.</p>

Letter spacing

tracking:* adds or removes spacing in the letter sequence. These specimens use the same type size, so the tracking scale can be compared directly.

<!-- tracking-tightest --><p id="target" class="m:0 font-lg leading-md tracking-tightest">CLEAR TYPE</p>

<!-- tracking-tighter --><p id="target" class="m:0 font-lg leading-md tracking-tighter">CLEAR TYPE</p>

<!-- tracking-tight --><p id="target" class="m:0 font-lg leading-md tracking-tight">CLEAR TYPE</p>

<!-- tracking-normal --><p id="target" class="m:0 font-lg leading-md tracking-normal">CLEAR TYPE</p>

<!-- tracking-wide --><p id="target" class="m:0 font-lg leading-md tracking-wide">CLEAR TYPE</p>

<!-- tracking-wider --><p id="target" class="m:0 font-lg leading-md tracking-wider">CLEAR TYPE</p>

<!-- tracking-widest --><p id="target" class="m:0 font-lg leading-md tracking-widest">CLEAR TYPE</p>

Design Foundations

Spacing

Use spacing tokens, native CSS lengths, and precise low-level values for layout rhythm.

Build & Delivery

Benchmarks

Read reproducible Master CSS benchmarks for the runtime/CSSOM tradeoff: small runtime, fewer CSS rules, browser cost, and lifecycle behavior.