Your product uses the typefaces, weights, and type scale its DESIGN.md declares. Where DESIGN.md says nothing, the codebase's font and size tokens decide. Where neither does, Tailwind's default font stacks and type scale apply (TYP-1, TYP-3).
The fonts and sizes below are this site's, taken from its DESIGN.md as a worked example.
Plus Jakarta Sans
Display & headlines · weight 600
Inter
Body & UI · weights 400 / 500 / 600
Plus Jakarta Sans is geometric enough to feel modern, soft enough to feel warm. The name nods to Southeast Asia.
Inter is designed for screens: tall x-height, open apertures. For people scanning between tasks, readability is kindness.
Type scale
Give people their time back
Display · 48px · Plus Jakarta Sans 600 — Also 60 / 72 / 96px for larger surfaces.
Give people their time back
Heading 1 · 30px · Plus Jakarta Sans 600
Give people their time back
Heading 2 · 24px · Plus Jakarta Sans 600
Give people their time back
Heading 3 · 20px · Plus Jakarta Sans 600
Give people their time back
Body Large · 18px · Inter 400
Give people their time back
Body · 16px · Inter 400
Give people their time back
Body Small · 14px · Inter 400
Give people their time back
Caption · 12px · Inter 500
give people their time back
Label · 12px · Inter 600 — Sentence case, not all-caps (TYP-4).
| Step | Size | Font |
|---|---|---|
| Display | 96 / 72 / 60 / 48px | Plus Jakarta Sans 600 |
| Heading 1 | 30px | Plus Jakarta Sans 600 |
| Heading 2 | 24px | Plus Jakarta Sans 600 |
| Heading 3 | 20px | Plus Jakarta Sans 600 |
| Body Large | 18px | Inter 400 |
| Body | 16px | Inter 400 |
| Body Small | 14px | Inter 400 |
| Caption / Label | 12px | Inter 500 / 600, sentence case |
This site's scale is the Tailwind default type scale (text-xs … text-9xl). Sizes come
from named utilities, never arbitrary text-[Npx] values.
Body line-height: 1.5–1.6. Related standards: TYP-1, TYP-2, TYP-3, TYP-4.
Usage
<h2 className="font-display text-2xl font-semibold" /> {/* Heading 2 */}
<p className="font-body text-base" /> {/* Body */}Best practices
- DoUse the display face your DESIGN.md declares for headlines, and its body face for body and UI text.
- DoGive body text a line height of 1.5 to 1.6, and respect the scale.
- Don'tMix display and body roles, or reach for a decorative or script font.
- Don'tSet body text below 14px, or use all-caps — use sentence case (genuine acronyms excepted).