# Typography & fonts - sizes, pairing, safe free fonts

Digested from Erik D. Kennedy: [Font Sizes in UI Design: The Complete Guide](https://www.learnui.design/blog/ultimate-guide-font-sizes-ui-design.html) (web chapter: [/blog/mobile-desktop-website-font-size-guidelines.html](https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html), principles: [/blog/font-size-principles-resources.html](https://www.learnui.design/blog/font-size-principles-resources.html)), [The Step-by-Step Guide for Pairing Fonts](https://www.learnui.design/blog/guide-pairing-fonts.html), rule 6 of [7 Rules Part 2](https://www.learnui.design/blog/7-rules-for-creating-gorgeous-ui-part-2.html). Paraphrased in our vocabulary.

## 1. Font-size floors and ranges (web)

- **Desktop body:** 18–24px for text-heavy pages (reading like a book), 14–20px for interaction-dense pages (tables, dashboards). Never above 24px for body.
- **Mobile body:** 16–20px text-heavy, 16–18px interaction-heavy; 17px is a good start.
- **Form inputs: ≥16px always** - below that, iOS zooms in on focus and wrecks the layout. A hard floor, not a preference.
- **Secondary text: body −2px** plus a lighter gray - two quiet demotions together, not one loud one.
- **Page titles:** 28–40px mobile, 35–50px desktop, in a heavier weight.
- **~4 sizes per page** (title, body, secondary, optional label) is the healthy count.
- **Angular size principle:** comfortable reading is ~0.3° of visual field from baseline to cap height - twice as far away needs twice as big. Rule of thumb for physical media: 1/16 inch of cap height per foot of viewing distance. Desktop wants ~33% larger than mobile for long reading (closer pixel density difference than viewing-distance difference).
- **Line length: 50–75 characters.**
  - **House note, measured 01-09-2026: `ch` is not a character.** The CSS `ch` unit is the advance of the digit zero, and English prose averages far narrower letters. Measured in Source Sans 3: 1ch = 7.96px at 16px, while a prose character averages 6.69px, so a `max-width:72ch` line carries about **86 characters**, well past his ceiling. **Use `58ch` for a 70-character line**, at any body size, since both numbers scale with the font. Caught on the [restyled OBFC change document](../../../2%20-%20eR%20services/countries/Lesotho/services/renew-not-on-dashboard/review-kennedy-01-09-2026.html), whose author had written 72ch believing it was 72 characters.

## 2. Pairing fonts (the six steps)

1. **Name the brand** in 3–5 adjectives (his five families: clean/simple, classy, friendly, quirky, techie).
2. **Brainstorm fonts that convey it subtly** - never the novelty font that shouts the theme (no Papyrus for Egypt).
3. **Choose the body font by legibility alone:** high x-height, open counters, no hairline horizontals; a good body font never calls attention to itself.
4. **Add a secondary font for what the body font can't say** - 95% of the time that means pairing a serif with a sans. Never pair near-twins.
5. **Write usage rules** - which font, which case, which weight, for headers / body / labels / tags / inputs. The pairing is the rules, not the pair.
6. **Repeat only if a brand dimension is still uncovered.**

## 3. Safe free fonts (his shortlist, rule 6)

- **Satoshi** (FontShare) - modern-neutral with warmth.
- **Metropolis** (GitHub) - free stand-in for Gotham / Proxima Nova.
- **Source Sans** (Google Fonts) - humanist, honest; −1% letter-spacing on heavy weights; pairs with Source Serif/Code.
- **Figtree** (Google Fonts) - clean-yet-casual, friendly.
- Deeper well: [Free Font Alternatives guide](https://www.learnui.design/blog/ultimate-guide-similar-fonts.html) (per-font subpages for Avenir, Circular, DIN, Futura, Gotham, Helvetica, Proxima Nova…).

---

## Delta vs our system

**CONFIRMS**
- **50–75ch ≈ our 65ch** - our number sits dead center of his range.
- **~4 sizes per page ≈ our 5-step scale used sparingly** - same restraint, we enforce it by token.
- **Body font never calls attention to itself ≈ plain figures + "easy and pleasant reading always."**
- **Secondary = smaller AND grayer, gently ≈ scarce emphasis** (demote quietly, don't shout in reverse).

**ADDS**
- **The ≥16px input floor.** Mechanical, testable, absent from our system; belongs in token-audit/Autocontrol for any page with a form.
- **Text-heavy vs interaction-heavy body split.** Our system was born from documents; boards and cockpits legitimately run 14–16px body. Naming the two regimes stops false Autocontrol failures on dense dashboards.
- **The six-step pairing method + usage-rules requirement.** We have a fixed system face but no procedure for the next brand (country leaflets, OBFC-like brands). Step 5 - write the usage rules - is the part we'd skip.
- **Angular-size principle** - gives us a principled dial for posters, decks, wall screens: 1/16" cap height per foot of distance.

**TENSION**
- **Secondary size:** his "body −2px" at 16px body = 14px; our 0.8 step gives 12.8px. Kennedy would call our secondary a touch too small - worth one honest look at real pages before deciding.
- **Title sizes:** his desktop titles (35–50px) reach past our 2.441rem ≈ 39px top step; only our hero 3.052rem ≈ 49px matches his upper range. In practice compatible, but his instinct is bigger titles than our scale defaults to.