Two families · two weights · seven sizes
Typography
Atkinson Hyperlegible for everything a person reads, JetBrains Mono for what a machine wrote. Both ship with the package as woff2 and are served from the same origin as the page.
Families
Il1 O0 rn m, agdqp
--rl-font-sans
Drawn by the Braille Institute for low vision: capital I, lowercase l and the digit 1 are told apart, as are O and 0, r n and m. The system fallback is explicit so a surface that cannot load the font still reads.
'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif
Il1 O0 rn m, agdqp
--rl-font-mono
Code fragments, selectors, the abbreviation of a status, a figure that must align.
'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace
Weights
Two, because the font ships two: --rl-weight-regular is 400 and --rl-weight-bold is 700. The product used to write 600 and 750, which every
browser snapped to 700; the scale says what is rendered.
Regular, for running text.
Bold, for what carries.
The scale
The type scale, ratio 1.25, anchored at 16px.
- Les 106 critères, du relevé au livrable.
- Les 106 critères, du relevé au livrable.
- Les 106 critères, du relevé au livrable.
- Les 106 critères, du relevé au livrable.
- Les 106 critères, du relevé au livrable.
- Les 106 critères, du relevé au livrable.
- Les 106 critères, du relevé au livrable.
- Les 106 critères.
The display heading carries the personality: strong weight, tight tracking. Body text stays very readable.
Line heights, trackings, measures
Line heights. The large sizes carry their own so a heading breathes like a heading, not like a paragraph. Letter spacing. Uppercase labels used four different values across the surfaces; these are the ones that remain. Line lengths, in characters.
| Token | Value | Where |
|---|---|---|
--rl-leading-tight | 1.1 | 3xl headings. |
--rl-leading-snug | 1.15 | 2xl headings. |
--rl-leading-heading | 1.2 | xl headings. |
--rl-leading-body | 1.6 | |
--rl-leading-row | 1.4rem | A table row. Line height and min height at the same value, or two neighbouring rows land half a pixel apart. |
--rl-tracking-tight | -0.02em | |
--rl-tracking-label | 0.08em | Uppercase table headers in a report. |
--rl-tracking-stat | 0.09em | The label under a figure. |
--rl-tracking-eyebrow | 0.16em | The small line above a title. |
--rl-measure-prose | 58ch | |
--rl-measure-wide | 70ch | |
--rl-measure-stat | 34ch |