Typography

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

Overview

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="uppercase font:semibold text:2xs tracking:widest">Architectural</div><div class="font:medium text:md text:strong">Future-proof infrastructure</div><div class="text:body text:sm line-clamp:3">    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>

@layer theme {    :root {        --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.

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 tokens like text:sm, text:md, and text:lg to style body text, descriptions, and paragraphs.

<p class="text:sm">Design is not just about aesthetics—it’s...</p><p class="text:md">Design is not just about aesthetics—it’s...</p><p class="text:lg">Design is not just about aesthetics—it’s...</p>

Headings

Use tokens like text:lg, text:xl, and text:2xl to style article headings.

<h2 class="text:2xl">Design is not just about aesthetics—it’s...</h2><h3 class="text:xl">Design is not just about aesthetics—it’s...</h3><h4 class="text:lg">Design is not just about aesthetics—it’s...</h4>

Page titles

Use tokens like text:3xl and text:4xl to style page titles and hero sections.

<h1 class="text:4xl">Designing for clarity and consistency...</h1><h1 class="text:3xl">Designing for clarity and consistency...</h1>

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.

The type treatment is assembled manually.

<h1 class="font:3xl tracking:-0.048em leading:2.4rem">...</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 {        --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 like font:xs, font:sm, and font:md to set the font size of an element.

<div class="font:xs">Sphinx of black quartz, judge my vow.</div><div class="font:sm">Sphinx of black quartz, judge my vow.</div><div class="font:md">Sphinx of black quartz, judge my vow.</div><div class="font:lg">Sphinx of black quartz, judge my vow.</div><div class="font:xl">Sphinx of black quartz, judge my vow.</div><div class="font:2xl">Sphinx of black quartz, judge my vow.</div>

Font families

Use tokens like font:sans, font:serif and font:mono to set font families for elements.

<p class="font:sans">Heavy boxes perform quick waltzes and jigs.</p><p class="font:serif">Heavy boxes perform quick waltzes and jigs.</p><p class="font:mono">Heavy boxes perform quick waltzes and jigs.</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 tokens like font:thin, font:regular, and font:bold to set the font weight of an element.

<div class="font:thin">Elegant forms shape visual harmony.</div><div class="font:extralight">Elegant forms shape visual harmony.</div><div class="font:regular">Elegant forms shape visual harmony.</div><div class="font:medium">Elegant forms shape visual harmony.</div><div class="font:semibold">Elegant forms shape visual harmony.</div><div class="font:bold">Elegant forms shape visual harmony.</div><div class="font:extrabold">Elegant forms shape visual harmony.</div><div class="font:heavy">Elegant forms shape visual harmony.</div>

Line height

Use the predefined line height tokens like leading:xs, leading:sm, and leading:lg to set the line height of an element.

<div class="leading:xs">Design is not just about aesthetics—it’s...</div><div class="leading:sm">Design is not just about aesthetics—it’s...</div><div class="leading:md">Design is not just about aesthetics—it’s...</div><div class="leading:lg">Design is not just about aesthetics—it’s...</div><div class="leading:xl">Design is not just about aesthetics—it’s...</div>

Letter spacing

Use tokens like tracking:tight and tracking:wider to set letter spacing.

<div class="tracking:tightest">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tighter">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:tight">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:normal">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wide">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:wider">LETTERS ALIGN WITH PERFECT RHYTHM</div><div class="tracking:widest">LETTERS ALIGN WITH PERFECT RHYTHM</div>