Typography

Every interface is a sequence of typographic decisions. Size, weight, tracking, and rhythm do most of the work before color or layout ever get a turn. A system that gets type right feels calm; a system that gets it wrong feels noisy no matter how many other details are polished.

The scale here spans twelve sizes, from text-3xs for dense metadata up to text-jumbo for marketing moments. Most of your UI will live between text-xs and text-lg.

Hierarchy, not decoration

Headings exist to help the eye skim, not to announce importance. Use them sparingly, and let weight and size carry the structure. When every heading shouts, none of them do.

A few rules worth internalizing:

• •Never skip levels: an h2 follows an h1, not an h3.
• •Keep measure tight: aim for 60 to 75 characters per line for body copy.
• •Trust the scale: if a size doesn’t exist in the system, extend the scale rather than reach for an arbitrary value.

A typical workflow

When composing a new page, start from the outside in:

1. 1.Pick the page-level heading size first: this anchors everything else.
2. 2.Set the body size and line height to match the reading context.
3. 3.Fill in supporting sizes last: overlines, captions, metadata.

For inline emphasis, prefer semantic weight over italics. Links should feel like links: we use underlined accent color so they read clearly in both paragraphs and lists.

Code in prose

Inline tokens like font-semibold or leading-reading sit comfortably mid-sentence. Longer examples get their own block:

export function Button({ children }: { children: React.ReactNode }) {
  return (
    <button className="h-8 px-4 rounded-lg bg-accent text-accent-foreground">
      {children}
    </button>
  )
}

The body font is Geist Sans and code uses Geist Mono. Both are variable fonts, so weights blend cleanly across the whole scale.

This specimen is itself rendered with the system’s tokens: no custom typography CSS. If a line looks off here, it’ll look off everywhere.