Foundations

Typography

6 tokens

Geist for headlines and body, one font for everything.

Loading saved values…

Live preview

Kicker — small

Heading XL

Heading LG

Heading MD

Body — attendance, results and fees in one place, for every role in the school.

Font family--ds-font

Geist everywhere — headlines and body

Aa Bb Cc

Heading XL--ds-heading-xl

Hero headlines — 67px on desktop (Perfect Fourth step 5); tablet ÷1.333, phone ÷1.333²

rem(67px)

Heading LG--ds-heading-lg

Section headings — 50px on desktop (Perfect Fourth step 4); tablet ÷1.333, phone ÷1.333²

rem(50px)

Heading MD--ds-heading-md

Sub-headings — 24px

rem(24px)

Body--ds-body

Body text — 16px

rem(16px)

Small--ds-small

Kickers, labels, badges — 14px

rem(14px)