Foundations
Typography
Three self-hosted families, four size tokens and one lockup. Sizes scale with the page container (cqi); each specimen below is measured at this frame’s width.
This frame:
Families
| Family | Weights | Used for |
|---|---|---|
| DM Sans | 300, 800, 1000 | Headings, the name lockup, figures |
| Inter | 400, 500 | The interface: menu, subtitles, labels, meta |
| Archivo | 300 | Reading text: descriptions and paragraphs |
Size tokens
| Token | Defined as | Here | Used for |
|---|---|---|---|
--h2 | | Every section heading | |
--h3-lg | | The featured post’s title | |
--h3 | | Post titles, step titles | |
--body | | Paragraphs (32px from 1920px up) |
The interface sizes are fixed: the menu and its buttons 18px, labels and meta 16px, De Stijl’s own lists 14px. From 1920px up, --body becomes 32px and the headings step up with it.
Specimens
Section heading: .s-head, DM Sans at --h2, a light line over a bold one ()
Accessibilityby standard
Title: .b-title, DM Sans 800 at --h3 ()
The cheapest bug is the one in the mock-up
Body: .s-body, Archivo 300 at --body, line-height 1.5, left-aligned, at most 60–65ch ()
Accessibility is not a final audit, it is where every component starts. I write about making it a habit a whole team keeps.
Interface: Inter 500, 18px
About · Blog · Settings
The name lockup
“Leonardo” (DM Sans 300) over “Almeida” (DM Sans 1000) over the subtitle (Inter 500), scaled as one piece like an image. Each tier sets only --title-size, the size of “Almeida”; every other size is a measured ratio of it, so the lines share one ink width, --title-ink = 3.751 × --title-size, and their left edges line up exactly (each line is pulled left by its first glyph’s side bearing).
Hi! I’m Leonardo Almeida
Front-end developer at Rabobank
| Line | Ink width | Side bearing |
|---|---|---|
| “Almeida”, DM Sans 1000, −0.03em | 3.751em | A 0.005em |
| “Leonardo”, DM Sans 300, −0.03em | 3.607em | L 0.045em |
| “Front-end developer at Rabobank”, Inter 500, −0.01em | 15.6111em | F (and H) 0.0805em |
Change the name, the subtitle’s words, a weight or a letter-spacing, and the ratios must be measured again (canvas measureText, actualBoundingBox*).