Typography & fonts - sizes, pairing, safe free fonts

Digested from Erik D. Kennedy: Font Sizes in UI Design: The Complete Guide (web chapter: /blog/mobile-desktop-website-font-size-guidelines.html, principles: /blog/font-size-principles-resources.html), The Step-by-Step Guide for Pairing Fonts, rule 6 of 7 Rules Part 2. 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, 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 (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.