Typography
Choose a type role and a font role for a title, a paragraph, or a caption, and see which face each look sets.
The kit has one type scale and three font roles. The scale sets sizes, and a look only chooses the faces, so a heading is the same size in Washi, ICS, Ramson, and Vistula and only its face changes. This page lists the roles and sizes, then the three font roles and which face each look gives them, so you can decide which pair to put on a piece of text.
Switch looks in the sidebar to see the faces change while the metrics stay put.
Scale
Each role is a text-* utility that sets size, line height, tracking, and weight. It does not set a family, so pair it with font-display for display and headings or with font-body for body and caption. Use the role as written and do not combine it with a raw size such as text-xl.
text-display48 / 1.2Display
text-heading-136 / 1.25Heading one
text-heading-230 / 1.25Heading two
text-heading-324 / 1.25Heading three
text-heading-420 / 1.25Heading four
text-heading-518 / 1.25Heading five
text-heading-616 / 1.25Heading six
text-body-lg18 / 1.5Body large. Supporting lede under a title.
text-body-md16 / 1.5Body. Running copy. One scale, three faces.
text-body-sm14 / 1.375Body small. Captions under a title, helper text.
text-caption12 / 1.33Caption. Meta, timestamps, footnotes.
| Role | Pair with | Size | Line height | Tracking |
|---|---|---|---|---|
text-display | font-display | 3rem (48px) | 1.2 | -0.012em |
text-heading-1 | font-display | 2.25rem (36px) | 1.25 | -0.012em |
text-heading-2 | font-display | 1.875rem (30px) | 1.25 | -0.012em |
text-heading-3 | font-display | 1.5rem (24px) | 1.25 | -0.012em |
text-heading-4 | font-display | 1.25rem (20px) | 1.25 | -0.012em |
text-heading-5 | font-display | 1.125rem (18px) | 1.25 | none |
text-heading-6 | font-display | 1rem (16px) | 1.25 | none |
text-body-lg | font-body | 1.125rem (18px) | 1.5 | none |
text-body-md | font-body | 1rem (16px) | 1.5 | none |
text-body-sm | font-body | 0.875rem (14px) | 1.375 | none |
text-caption | font-body | 0.75rem (12px) | 1.33 | none |
Every role has weight 400. The weight of UI text is separate and comes from the look, through font-ui.
Ink is a separate choice from the role. Use text-fg for primary text, text-fg-muted for helper text, and text-fg-subtle for meta text.
<h1 className="text-display font-display text-fg">Display</h1>
<h2 className="text-heading-3 font-display text-fg">Section</h2>
<p className="text-body-md font-body text-fg">Running copy.</p>
<p className="text-body-sm font-body text-fg-muted">Helper under a title.</p>Font roles
font-display
Titles sit here
Washi and Ramson use Fraunces. ICS uses Outfit. Vistula uses Archivo. Dry is a system serif.
font-body · font-sans
Running copy uses the body face. Buttons, inputs, and the shell stay on font-sans, which is UI, not prose.
| Utility | Role | Used for |
|---|---|---|
font-display | Titles | Display and headings |
font-body | Prose | Body and caption text |
font-sans | UI | Buttons, inputs, and the shell, with a Tailwind size such as text-sm |
font-mono | Code | System monospace only, set in no look |
font-ui is not a family. It is the UI weight a look sets, and it pairs with border-stroke so text and lines stay in step. See Stroke.
Each look fills the three roles with these faces. The files load in the host, and the CSS only names them.
| Look | font-sans | font-body | font-display | UI weight |
|---|---|---|---|---|
| Dry | system sans | system serif | system serif | 400 |
| Washi | Hanken Grotesk | Newsreader | Fraunces | 400 |
| ICS | Sora | Sora | Outfit | 600 |
| Ramson | Outfit | Outfit | Fraunces | 500 |
| Vistula | Archivo | Newsreader | Archivo | 400 |
Accessibility
- Sizes are in rem and line heights are unitless, so text follows the root font size that a reader sets in the browser and the spacing grows with it.
- The smallest role is
text-captionat 12px. Keep it for meta text such as timestamps and usetext-body-smor larger for anything a reader has to act on.
Next
Retune covers how a look sets the faces and the UI weight. Color covers the ink roles used above, and Radius covers stroke weight.