Typography
Typography sets one typeface and a size, a line height, and a weight for each kind of text.
Typeface
tokens.css loads Hanken Grotesk as a variable font with one axis, weight, from 100 to 900. It doesn’t load the italic.
| Variable | Value | Purpose |
|---|---|---|
--font-sans | Hanken Grotesk Variable | All text except code |
--font-heading | --font-sans | The title of a surface, such as a Card or a Dialog |
--font-mono | Tailwind’s default stack | Code and the value in the tooltip of a Chart |
Type Roles
The components set text at three sizes: 12px, 14px, and 16px. A page title adds 24px. In the specimen, each row reads its size, line height, and weight from the element it shows.
Invoices
Due in 14 days
| Size | Utility | Line Height | Purpose |
|---|---|---|---|
| 24px | text-2xl | 32px | A page title |
| 16px | text-base | 24px | The title of a Card, a Dialog, an Alert Dialog, a Sheet, or a Drawer, and the text of an Input below md |
| 14px | text-sm | 20px | Body text, a Label, a Button, a Table, a menu row, and a description |
| 12px | text-xs | 16px | A Badge, a Tooltip, a Kbd, a menu shortcut, and the xs and sm Buttons |
A Label and a Dialog title add leading-none, and a Card title adds leading-snug.
Weights
Product screens use three weights. Display type adds a fourth, font-light.
Hanken Grotesk
Hanken Grotesk
Hanken Grotesk
| Weight | Utility | Purpose |
|---|---|---|
| 400 | font-normal | Body text, a description, a Table cell, and the value in a field |
| 500 | font-medium | A Button, a Label, a Badge, a tab, a Table header, and the title of a Card or a Dialog |
| 600 | font-semibold | A page title |
Figures
tokens.css sets tabular-nums on body. In Hanken Grotesk, the digits, the dollar sign, and the euro sign have the same width at the regular, medium, and semibold weights, so a semibold total lines up under the regular amounts above it.
- $18,420.00
- $7,703.33
- $911.07
- $27,034.40
Display Type
text-4xl to text-9xl, 36px to 128px, are for marketing pages.
Payé à temps.
Été comme hiver.
Summit sets all six to a line height of 1.13 and a letter spacing of -0.04em.
From text-5xl up, a display heading pairs a line in font-light with a line in font-semibold.
Rules
Apply these rules to text that the product sets around the components: a page title, a paragraph, and a column of amounts. The registry’s fields already follow the last one.
Amounts
Set text-end on the header and the cells of a column of amounts. The digits share one width, so amounts with the same number of decimals line up digit under digit.
- $18,420.00
- $703.33
- $2,759.40
text-end. The decimal points line up, and the longest amount is the largest.- $18,420.00
- $703.33
- $2,759.40
Balanced Headings
Set text-balance on a heading that is long enough to wrap so that its lines are of near equal length. Use text-pretty for a description.
Clients with unpaid invoices
text-balance on a heading that wraps.Clients with unpaid invoices
Line Length
Hold reading text to about 70 characters a line. Set the width on the container. max-w-md keeps 14px text at about 72 characters a line, and max-w-lg does the same for 16px text. Both are 32em wide.
An invoice is due 30 days after it is sent unless the client and the studio agree on other terms in writing. A reminder goes out three days before the due date, and a second one follows a week after it.
An invoice is due 30 days after it is sent unless the client and the studio agree on other terms in writing. A reminder goes out three days before the due date, and a second one follows a week after it.
max-w-prose is 65ch, but a ch is the width of the digit 0, which in this font is wider than the average character of English text. Its lines have about 80 characters and can reach 85. WCAG 2.2 SC 1.4.8 Visual Presentation, a Level AAA criterion, names 80 as the widest line of a block of text.
Truncation
Truncate only what is shown in full elsewhere. Avoid truncating a page title, a label, or an error message; let them wrap.
Display Breakpoints
Set a display size for each breakpoint, as in text-5xl md:text-7xl. Avoid sizing text in viewport units alone, as such text doesn’t grow when users zoom the page. WCAG records this as failure F94.
Input Text Size
Set a text input at 16px below md. The registry’s text fields have text-base md:text-sm: 16px below 768px and 14px from 768px. This prevents iOS from zooming the page, which it does when a field with smaller text receives focus. Keep both classes on a field built outside the registry.
Accessibility
All sizes are rem values, and all line heights are ratios of them, so text follows the font size that users set in the browser. WCAG 2.2 SC 1.4.4 Resize Text requires that text can be resized to 200% without loss of content.
See Color for the contrast of each text color and Accessibility for the floors for focus, targets, contrast, motion, and forced colors.
In Code
tokens.css sets font-sans on html, so only font-mono needs a class. See Theming for what else the file declares.
<header className="flex flex-col gap-1">
<h1 className="text-2xl font-semibold text-balance">Invoices</h1>
<p className="max-w-md text-sm text-pretty text-muted-foreground">
Every invoice sent this year, with what is paid and what is due.
</p>
</header>