What’s The Right Font Size For the Web? (https://lnkd.in/e6GqEbPn), with practical tips on how to set font size, line height and line length with a type scale — to improve the legibility of your content. By Oliver Schöndorfer.
What’s The Right Font Size For the Web?
🚫 Avoid centered text if you can, at least for more than 3 lines of text.
✅ The size of the font, the space between lines, and the length of the lines are always related.
✅ Longer lines need more space between lines, while shorter lines need less.
✅ Select a range of font sizes to establish a visual order.
✅ It’s best to keep the space between lines flexible and matched with the width of the column.
✅ If you must use the same spacing for both computer and mobile, go with a spacing of 1.5.
Display text (for <h1>)
*****
✅ Default choice: 40px/2.5em for an <h1>.
✅ Desktop: go up until 64px/4em (max).
✅ Mobile: 32px/2em or smaller, since it uses up too much space.
✅ Larger headings work better with smaller line height — e.g. 1.1.
✅ Line height smaller than the type size might work better.
Body text
*****
✅ Default choice: 16px/1em (also browser’s default).
✅ Desktop: go up until 24px/1.5em (max).
✅ Mobile: Use the defaults, at times 10% smaller (min 14–15px)
✅ Desktop: keep 50–75 chars per line (25–37.5rem), line height 1.5–1.6.
✅ Mobile: usually 40–50 chars per line (20–25rem), line height 1.3–1.45.
Functional text (captions, nav)
*****
✅ Default choice: 12px/0.75em – 14px/0.875em.
✅ Desktop: go up until 16px/1em.
✅ Mobile: Don’t go below the defaults, it’s already very small.
The attributes of a typeface define how font size, line length and line height work together. Typically we would first choose the right typeface(s) and set a type scale for headings, body text and functional text.
Then, we achieve fluid typography with CSS clamp(), where we interpolate between min/max values for font size and line height, depending on container’s width (and hence line length).
There is no magic number that will always look right, but the guidelines above and the tools below hopefully will move the needle in the right direction. And when in doubt, make your font size larger.
Useful Resources:
Ideal Line Height and Line Length, by Oliver Schöndorfer
Seven Typographic Presets Might Be Enough, by Dan Mall
Better Typographic Hierarchy, by Oliver Schöndorfer
Line Length Revisited, by Mary Dyson
Practical Typography (free book), by Matthew Butterick
Modern Fluid Typography with CSS, by Adrian Bece
Useful tools:
Fluid Type Editor: https://lnkd.in/epGn3FuA
Proportio: https://proportio.app
Utopia: https://lnkd.in/ezTdwgx5
Fluid Type Scale: https://lnkd.in/ej2d98K8
Type Scales (Figma, Adobe XD): https://typescale.io
