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. Pick the page-level heading size first: this anchors everything else.
2. Set the body size and line height to match the reading context.
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 Innovator Grotesk and code uses Geist Mono. Both are variable fonts, so weights blend cleanly across the whole scale.

Innovator Grotesk is UI.MD’s brand face and what this site renders in. The components don’t ship or require it: font-sans defaults to Geist Sans and falls back to the system UI font, so installing a component never pulls in a licensed typeface. To match this site exactly, wire --font-sans-custom to your own face. See Theming for the full setup. Geist Sans (free via the geist npm package) is already the default, and a solid neutral choice on its own.

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.