18 · Inter in use
Typographic composition
Typography is the visual voice of a brand without color. These rules define size, line height, tracking and measure so a piece looks like Nitente without needing the logo.
Full scale
| Role | Size / line height | Weight | Tracking | Use |
|---|---|---|---|---|
| Display | 104 / 100 (web), 72 / 72 (mobile) | 600 | −0.04 em | Once only, on the cover |
| Heading 1 | 64 / 68 | 600 | −0.03 em | Page title |
| Heading 2 | 40 / 44 | 600 | −0.02 em | Sections |
| Heading 3 | 24 / 30 | 600 | −0.01 em | Subsections and cards |
| Large text | 20 / 30 | 400 | 0 | Lead paragraphs |
| Text | 16 / 26 | 400 | 0 | Paragraphs |
| Support | 13 / 20 | 400 | 0 | Captions, notes |
| Label | 11 / 16 · JetBrains Mono | 500 | +0.05 em, uppercase | Page numbers, data |
Display · 104 · −0.04 em
Clear light
Heading 2 · 40 · −0.02 em
Everything fits in a short sentence.
Text · 16 / 26
A good Nitente piece has three things: a title that says what it is about, a paragraph that explains it without ornament, and room to breathe between the two.
Composition rules
- Measure
- 60 to 75 characters per line (≈ 38 em). In narrow columns, never fewer than 35.
- Line height
- 1.05 to 1.15 in headings; 1.5 to 1.65 in body text. Longer lines need more line height.
- Tracking
- The larger the size, the tighter: −0.04 em at 104 px, 0 in 16 px text, +0.05 em in small caps.
- Alignment
- Always left-aligned. Justified and centered only in short cover headlines.
- Weights
- 400 for text, 500 for emphasis, 600 for headings. 700 and 800 are not used.
- Italic
- Only for terms in another language and titles of works. Not for emphasis.
- Numbers
- Tabular (
font-variant-numeric: tabular-nums) in tables, prices and aligned figures. - Hierarchy
- At most three visible levels at a time. Distinguish them by size or by weight, not both.
Example of figures with and without tabular numbers:
Tabular
1,111.00
2,222.00
8,888.00
Proportional
1,111.00
2,222.00
8,888.00
Fallbacks and file weights
font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
font-feature-settings: "calt", "kern";
font-optical-sizing: auto;
/* Code and data */
font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;Font licenses
| Font | License | What it allows | What it requires |
|---|---|---|---|
| Inter | SIL Open Font License 1.1 | Use on screen and in print, embed in web and apps, modify and redistribute. | Keep the copyright notice and the license text if the files are redistributed. Do not sell the font by itself. |
| JetBrains Mono | SIL Open Font License 1.1 | Same as Inter. | Same as Inter. |