Typography

A short scale of named roles and three weights. The components and your app share the same ones.

Build something usefulheading-3636 / 1.15 / -0.025em · 600
Workspace preferencesheading-2424 / 1.3 / -0.015em · 600
Project detailsheading-2020 / 1.4 / -0.015em · 600
Notificationsheading-1616 / 1.5 / -0.015em · 600
Readable paragraphs and descriptions, set for long-form reading.body-md16 / 1.6 · 400
Control text and supporting copy beside settings.body-sm13 / 1.5 · 400
Project namelabel-md13 / 1.4 · 500
Workspacelabel-sm12 / 1.4 · 500
Updated a moment agocaption12 / 1.5 · 400
pnpm dlx shadcn@latest add buttoncode-sm13 / 1.6 · 400
Fig. 1 Every role in the system, set in itself and measured.

Roles, not sizes

Each role bundles a size, line height, weight, and tracking under a name that says what it’s for: headings for hierarchy, body for reading, labels for naming, caption for metadata, and code for source. Pick by what the text is, and the rest follows.

Do

Q3 planning

Goals, owners, and dates for the quarter.

Edited 2 minutes ago

The title leads, the description supports, and the time sits quietly below.

Don’t

Q3 planning

Goals, owners, and dates for the quarter.

Edited 2 minutes ago

A label-sized title under prose-sized text puts the eye in the wrong place first.

Fig. 2 The same card, set two ways.

Three weights

Regular for reading, medium for labels and actions, semibold for headings. Every role includes its weight, so you rarely set one yourself.

Workspace preferencesRegular400
Workspace preferencesMedium500
Workspace preferencesSemibold600
Fig. 3 The three weights the system uses.

Build it

Choose the semantic element for the content, then apply a role. A smaller heading is still a heading.

type-roles.tsx

The roles live in styles/jzb-typography.css, which the theme imports. Edit the shared tokens to adjust the whole system:

styles/jzb-theme.css