Typography
Inter across the whole system, with Untitled UI sizing and tracking. Display sizes carry tighter letter-spacing; control labels are font-semibold.
Display scale
For headings and hero text. Rendered here at font-semibold.
The quick brown fox
text-display-2xl72pxHero displayThe quick brown fox
text-display-xl60pxMarketing headlineThe quick brown fox
text-display-lg48pxPage heroThe quick brown fox
text-display-md36pxSection titleThe quick brown fox
text-display-sm30pxCard / dialog titleThe quick brown fox
text-display-xs24pxPage header (h1)Text scale
For body copy and UI. Body is text-md; most UI text is text-sm.
The quick brown fox
text-xl20pxLead paragraphThe quick brown fox
text-lg18pxSub-headingThe quick brown fox
text-md16pxBody (default)The quick brown fox
text-sm14pxUI text, labelsThe quick brown fox
text-xs12pxCaptions, badgesWeights
Inter ships regular through bold; controls and headings use semibold.
Regular (400) — body copy
Medium (500) — links, quiet emphasis
Semibold (600) — labels, headings
Bold (700) — strong emphasis