Typography

Typography carries structure before decoration. In this system, sizes stay restrained and the hierarchy comes from a few repeated combinations: uppercase labels, compact section heads, and generous body measure.

Font Family

The shared UI family is exposed through font-sans. That class resolves to var(--font-sans), which is set by the current marketing font selection and falls back to Helvetica Neue and Arial.

Type Scale

Use the size utilities below as a stable scale. They are the classes already appearing across docs, previews, and marketing specimens.

Title Measure

Title width is controlled separately from text size. That gives the system more variety without losing rhythm.

Use the shared title-measure roles when a heading needs to feel tighter, wider, or more record-like:

The default goal is simple: constrain measure by role, not by habit.

Preferred Controls

Use the measure props on the shared primitives first:

<SectionHeading
  eyebrow="Interactive demo"
  title="See the system under load."
  measure="display"
/>

<CardTitle measure="panel">Pricing decisions, stated clearly.</CardTitle>

<ProseTitle measure="display">
  Product writing can match the interface.
</ProseTitle>

For route-specific headings or blocks that do not use those primitives, use the shared helper instead of introducing a new one-off width:

import { getTitleMeasureClassName } from "@/lib/title-measure"
import { cn } from "@/lib/utils"

<h2
  className={cn(
    "text-3xl font-semibold uppercase tracking-[-0.04em]",
    getTitleMeasureClassName("panel")
  )}
>
  What ships is visible.
</h2>

Rendered Measure Comparison

This stack uses the same heading content with different measure roles so the line breaks are easy to compare at a glance.

How To Choose A Role

• Use hero when the title is the main poster move on the page.
• Use display when the heading should feel editorial but not theatrical.
• Use card for the default authored card silhouette.
• Use panel when the title reads more like a supporting sentence or needs a little more room.
• Use record when the heading carries concrete nouns, workflow labels, or selected-item detail.
• Use fluid sparingly, usually when the grid already sets the right measure.

Guidance

Prefer Roles Over Raw Sizing

Do not choose a text size in isolation. The Swiss character comes from the full combination of size, weight, case, and tracking.

Do not choose title width in isolation either. Prefer the shared measure roles before reaching for a local max-w-[Nch] cap.

Vary Title Measure By Job

Not every heading should resolve to the same narrow poster width.

• Let editorial and hero moments stay tighter.
• Give FAQ, support, and utility titles more room.
• Let record-led surfaces read like product UI instead of miniature billboards.

Keep Body Copy Calm

Default explanatory copy should usually stay at text-base leading-8. Move down to text-sm leading-7 when the copy is secondary or the surface is denser.

Use Uppercase With Intent

Uppercase labels work well for navigation, section markers, and compact metadata. They lose force when applied to long sentences or large blocks of body text.

Let Display Type Stay Rare

text-4xl and text-5xl are for page titles and hero moments. Most product surfaces should rely on the smaller section and body roles.