Typography
Typefaces, weights and the type scale.
Typefaces
Headings
Outfit
Body
IBM Plex Sans
Code and technical identifiers
ui-monospaceCode-like text uses the system monospace stack; there is no extra file to download.
Typefaces are served from our own servers; no external font service is used. License: SIL Open Font License.
Weight
Allowed:
- 400
- 600
- 700
Not used:
- 100
- 200
- 300
- 500
- 800
- 900
Names and body text 400, emphasis 600, headings 700. Thin weights are hard to read at small sizes.
Italics
Italics are not used in screen interfaces; emphasis comes from weight and color. Printed documents may keep established conventions.
Scale
The scale is based on the Small content-size step of the Apple Human Interface Guidelines typography table, the closest step for dense data screens. The unit is rem; the table shows the values at the default 16 px root.
| Token | Size | Line | Tracking | Role |
|---|---|---|---|---|
text-caption2 | 11px · 0.6875rem | 13px | 0.006em | Smallest allowed text |
text-caption1 | 11px · 0.6875rem | 13px | 0.006em | Label, badge |
text-footnote | 12px · 0.75rem | 16px | 0em | Footnote, dense table row |
text-subhead | 13px · 0.8125rem | 18px | -0.006em | Subheading |
text-calloutinterpolated tracking | 14px · 0.875rem | 19px | -0.011em | Callout text |
text-body | 15px · 0.9375rem | 20px | -0.016em | Paragraph, default body |
text-title3interpolated tracking | 18px · 1.125rem | 23px | -0.025em | Section heading |
text-title2 | 20px · 1.25rem | 25px | -0.023em | Page subheading |
text-title1interpolated tracking | 26px · 1.625rem | 32px | 0.005em | Page title |
text-large-titleinterpolated tracking | 32px · 2rem | 39px | 0.010em | Top-level title |
At the Small step, Caption 1 and Caption 2 share the same value; new designs must not rely on telling them apart.
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Daily production report: 1,284.50 kg — quick brown fox
Minimum size
11px. No text is set smaller than this.
Field text
--text-field 16/20 · 1rem
Text fields (input, select, textarea) use a separate size outside the scale: iOS Safari zooms the page when a field with text smaller than 16 px gets focus. Buttons, body text and headings do not use this value.
Why px, not pt
Apple’s pt is a logical point; its web equivalent is the CSS px. The CSS pt is a print unit (1/72 inch) and draws the same number about one third larger.