Typography in Web Design: 7 Rules of Readability
• Friday, 14th November 2025 • Web Design •
Why Typography Decides the Success of a Website
You have 3 seconds. That is how long a user gives you to convince them to stay on your site. What do you see in those 3 seconds? Not colourful graphics. Not photos. You see text. And if that text is illegible, too small, too dense or chaotic – 38% of users leave the page immediately (Google study 2024).
Typography is not "pretty fonts". It is the foundation of user experience. It is a communication tool that either helps the user understand the content or frustrates them. In this article you will learn 7 universal rules of legible typography in web design – rules that work regardless of industry, tools or technology. Rules that will immediately improve your site's UX.
Rule #1: Font Size - Minimum 16px for Body Text
Why Is 16px the Minimum?
The average viewing distance from a computer screen is 50-75 cm. From that distance a font smaller than 16px requires visual effort – the user squints and leans over the screen. This causes fatigue and frustration. 16px is the gold standard, confirmed by WCAG 2.1 (Web Content Accessibility Guidelines) and eye-tracking studies.
What Does It Look Like in Practice?
- Body text (paragraphs, lists): 16-18px
- Long-form text (articles, blog): 18-20px (easier reading over longer stretches)
- Captions, footnotes, metadata: 14px (minimum!)
- H1 headings: 32-48px (depending on the hierarchy)
- H2 headings: 24-32px
- H3 headings: 20-24px
CSS Example:
body {
font-size: 16px; /* baseline */
}
p, li {
font-size: 1rem; /* 16px - responsive */
}
article p {
font-size: 1.125rem; /* 18px - for long texts */
}
h1 { font-size: 2.5rem; } /* 40px */
h2 { font-size: 2rem; } /* 32px */
h3 { font-size: 1.5rem; } /* 24px */How to Check on Your Own Site
Open DevTools (F12 in Chrome/Firefox) → "Elements" tab → Click a paragraph → Check "Computed" → "font-size". If you see less than 16px – that is a problem.
Rule #2: Contrast - Minimum 4.5:1 for Text (WCAG AA)
What Is Contrast and Why Does It Matter?
Contrast is the ratio of the luminance of the text colour to that of the background colour. Low contrast (for example light grey text on a white background) makes text invisible to people with visual impairments, in sunlit screen conditions or at low monitor brightness. WCAG 2.1 Standard AA requires a minimum of 4.5:1 for normal text and 3:1 for large text (18px+).
How to Calculate Contrast
Use online tools:
- WebAIM Contrast Checker: webaim.org/resources/contrastchecker
- Coolors Contrast Checker: coolors.co/contrast-checker
- Chrome DevTools: F12 → Elements → "Accessibility" tab → "Contrast ratio"
Safe Colour Combinations:
- Black on white (#000000 / #FFFFFF): Contrast 21:1 – ideal
- Dark grey on white (#333333 / #FFFFFF): Contrast 12.63:1 – excellent
- Purple on white (#7c3aed / #FFFFFF): Contrast 5.14:1 – OK (WCAG AA)
- Light grey on white (#999999 / #FFFFFF): Contrast 2.85:1 – ❌ TOO LOW (does not meet WCAG)
CSS Example with Correct Contrast:
/* ✅ GOOD - contrast 12.63:1 */
body {
color: #333333;
background-color: #ffffff;
}
/* ❌ BAD - contrast 2.85:1 (too low!) */
.footer {
color: #999999;
background-color: #ffffff;
}
/* ✅ FIX - make it darker */
.footer {
color: #666666; /* contrast 5.74:1 - OK */
background-color: #ffffff;
}Rule #3: Line Height - 1.5-1.8 for Optimal Readability
What Is Line Height and Why Is It Crucial?
Line height (line-height in CSS) is the spacing between lines of text. Line height that is too tight (for example 1.0-1.2) makes lines "stick together" – the eye gets lost when moving to the next line. Too loose (2.0+) makes the text "fall apart" – it is hard to keep a continuous train of thought. Optimal line height: 1.5-1.8 (confirmed by Robert Bringhurst in "The Elements of Typographic Style").
How to Choose Line Height
- Short text (headings, CTAs): 1.2-1.4 (stronger visual impact)
- Medium text (paragraphs on landing pages): 1.5-1.6
- Long text (articles, blog): 1.6-1.8 (easier reading over a long time)
- Wide text (>75 characters/line): 1.7-1.8 (larger spacing compensates for the width)
CSS Example:
body {
line-height: 1.6; /* baseline */
}
h1, h2, h3 {
line-height: 1.3; /* stronger impact */
}
article p {
line-height: 1.75; /* for long texts */
}
.btn {
line-height: 1.2; /* buttons - compact */
}Practical Test:
Open an article on your site. Can you read 3 paragraphs without squinting or rereading? If not – increase the line height by 0.1-0.2.
Rule #4: Line Length - 50-75 Characters (the Optimal Zone)
Why Does Text Width Matter?
A line that is too short (20-30 characters) forces the eye to jump to a new line all the time – tiring. A line that is too long (100+ characters) makes the user lose their place when returning to the start of the next line. Eye-tracking studies (Baymard Institute) show: the optimal line length is 50-75 characters (including spaces).
How to Control Line Length
Use max-width on text containers instead of letting the text stretch across the full width of the screen.
CSS Example:
/* ✅ GOOD - limits width to ~65 characters */
article p {
max-width: 65ch; /* "ch" = width of the "0" character */
font-size: 18px;
line-height: 1.7;
}
/* Alternative in pixels */
.content {
max-width: 700px; /* ~70 characters at 16px */
margin: 0 auto; /* centre */
}
/* ❌ BAD - text across the full screen width */
p {
width: 100%; /* 150+ characters on large monitors */
}The "ch" Unit - Your Best Friend:
The ch unit in CSS is the width of the "0" character in the current font. max-width: 65ch means "a maximum width of 65 characters" – regardless of screen size or font. It is the most precise way to control line length.
Rule #5: Typographic Hierarchy - Maximum 3-4 Font Sizes
What Is Hierarchy and Why Can't You Live Without It?
Typographic hierarchy is a system that shows the user what is important (large, bold), what is less important (medium) and what is an extra (small). Without hierarchy everything looks the same – the user does not know what to focus on. The golden rule: a maximum of 3-4 different font sizes on a page (H1, H2, H3, paragraph).
Sample Hierarchy:
- H1 (main heading): 40px (2.5rem) – bold – one per page
- H2 (main sections): 32px (2rem) – bold
- H3 (subsections): 24px (1.5rem) – semibold
- Paragraph (body text): 16px (1rem) – regular
Type Scale - a Tool for Harmony:
Instead of choosing sizes "by eye", use a mathematical scale. The most popular is the 1.25 scale (Major Third):
/* Scale 1.25 (Major Third) */
h1 { font-size: 2.441rem; } /* 39px */
h2 { font-size: 1.953rem; } /* 31px */
h3 { font-size: 1.563rem; } /* 25px */
h4 { font-size: 1.25rem; } /* 20px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.8rem; } /* 13px */Tool:
Type Scale Generator: typescale.com – automatically generates a harmonious scale.
Rule #6: Font Family - Maximum 2 (One for Headings, One for Text)
Why Are Too Many Fonts Chaos?
Every font has its own "personality". Comic Sans is childish, Times New Roman is stiff classic, Futura is modern minimalism. Mixing 4-5 fonts on one page is like wearing striped trousers, a checked shirt and a polka-dot jacket – visual chaos. Professional sites use a maximum of 2 fonts: one for headings (distinctive, with character), the other for text (neutral, legible).
Safe Combinations (Google Fonts):
- Montserrat (headings) + Open Sans (text): Modern, clean, universal
- Playfair Display (headings) + Lato (text): Elegant, for premium brands
- Poppins (headings) + Roboto (text): Tech-friendly, for startups
- Merriweather (headings) + Lora (text): Classic, for blogs/publishers
CSS Example:
/* Import from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Open+Sans:wght@400;600&display=swap');
/* Headings - Montserrat */
h1, h2, h3, h4, h5, h6 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
/* Text - Open Sans */
body, p, li, a {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
}
strong, b {
font-weight: 600; /* semibold for emphasis */
}The Contrast Rule for Fonts:
A good font pair has stylistic contrast. For example, geometric sans-serif headings (Montserrat) + humanist sans-serif text (Open Sans), or serif headings (Playfair) + sans-serif text (Lato). Avoid mixing two very similar fonts (for example Arial + Helvetica) – it looks like a mistake, not a deliberate choice.
Rule #7: Spacing (Whitespace) - "Space Breathes"
Why Is Empty Space Not Wasted Space?
Beginner designers are obsessed with "filling every pixel". The result: a crowded page where everything screams for attention and nothing is visible. Professional sites use whitespace (empty space) generously – this lets the content "breathe", gives the eye somewhere to rest, and makes important elements stand out.
Where to Use Whitespace
- Between paragraphs: 1.5-2em (1.5-2x the line height)
- Between sections: 3-4em
- Around headings: 1.5-2em above, 0.5-1em below
- Side margins: Minimum 20px on mobile, 40-60px on desktop
CSS Example:
/* Spacing between paragraphs */
p {
margin-bottom: 1.5em; /* 1.5x the line height */
}
/* Spacing around headings */
h2 {
margin-top: 2em; /* more above - separation */
margin-bottom: 0.75em; /* less below - ties it to the text */
}
/* Sections */
section {
padding: 4rem 0; /* 64px top/bottom */
}
/* Side margins */
.container {
padding: 0 20px; /* mobile */
}
@media (min-width: 768px) {
.container {
padding: 0 60px; /* desktop */
}
}The 80/20 Whitespace Rule:
Professional sites use around 80% whitespace, 20% content (visually, not literally). This makes the 20% of content super visible and legible. Amateur sites reverse it – 80% content, 20% whitespace – the result: chaos.
Pre-Publication Checklist - Check These 7 Points
Before you publish a new site or a redesign, go through this checklist:
- ✅ Font size: Minimum 16px for body text
- ✅ Contrast: All text meets WCAG AA (4.5:1)
- ✅ Line height: 1.5-1.8 for paragraphs
- ✅ Line length: 50-75 characters (use
max-width: 65ch) - ✅ Hierarchy: Maximum 3-4 font sizes, a clear H1 > H2 > H3 structure
- ✅ Font families: Maximum 2 (headings + text)
- ✅ Whitespace: Generous spacing between sections and paragraphs
Testing Tools:
- WebAIM Contrast Checker: Check colour contrast
- Google Lighthouse: Accessibility audit (F12 → Lighthouse → Accessibility)
- WAVE Extension: Automatic check for accessibility errors
- Type Scale: A harmonious type scale generator
Summary - Typography Is the Foundation of UX
Typography is not cosmetics. It is the foundation of user experience. Good typography means users:
- Stay on the site longer (lower bounce rate)
- Read more of the content (greater scroll depth)
- Understand the message better (higher conversion)
- Come back more readily (a better impression)
The 7 rules in this article are the minimum. If you apply them, your site will be more legible than 80% of sites on the internet. That is a competitive advantage you can implement in an hour.
Get in touch – we will gladly help with an audit and the implementation of typographic changes that will immediately improve your site's UX and conversion. Professional typography is the foundation of every effective website.
