Step 3 of 7

Type

One sans family for titles and reading, plus mono for code. Sizes come from one ladder, and line-height is set per role rather than globally.

Families

Noto Sans

Display and titles. Tracking tightens slightly at large sizes.

--cds-font-display

Noto Sans

Body copy, UI labels, tables, forms, and meta.

--cds-font-body

JetBrains Mono

Code only. Never marketing body copy.

--cds-font-mono

Display ladder

Hero display

4xl · 56px · leading-display

Page title

3xl · 48px · leading-display

Section heading

2xl · 36px · leading-display

Accent subhead

xl · 28px · leading-snug · primary

Reading

A short lead runs at 22px with callout leading. It sets up the section without competing with the heading above it.

Body copy runs at 18px with 1.6 leading and is capped at 62 characters per line, because the measure is set in ch rather than pixels. That means the reading width tracks the font size instead of drifting when someone bumps the type scale. Emphasis uses semibold before it reaches for bold.

Muted 16px text handles captions, table cells, and helper copy. It is the floor: nothing readable goes smaller.

.cds-prose · measure 62ch · content-box

Size roles

Token	Size	Role
`sm`	16px	Compact UI, labels, table cells
`md`	18px	Default body and long-form
`lg`	22px	Short lead
`xl`	28px	Small display, card titles
`2xl`	36px	Medium display
`3xl`	48px	Large display, page titles
`4xl`	56px	Hero display

sm is the demo floor. If your product genuinely needs denser chrome, lower the floor in tokens.css once rather than sprinkling one-off sizes through components.

Line-height and weight

Leading token	Value	Use
`display`	1.1	2xl to 4xl titles
`snug`	1.15	xl and short titles
`body`	1.6	md and lg reading
`callout`	1.5	Alerts, contained copy
`ui`	1.35	Compact sm chrome

Weight	Value	Use
`regular`	400	Body copy
`semibold`	700	Labels, buttons, subheads (maps to bold in the demo)
`bold`	700	Display titles, meta

The demo uses 400 and 700 because Lato has no 600 cut on Google Fonts. Prefer the emphasis weight for UI chrome, and do not introduce 500 or 800 without adding a token for it.