If your visitors can’t comfortably read your content, nothing else matters.
I see this problem constantly on Sydney business websites. Tiny grey text on white backgrounds. Fancy decorative fonts used for entire paragraphs. Line spacing so tight the words blur together. Body copy that’s perfectly readable on a 27-inch monitor but completely illegible on a phone.
Poor typography doesn’t just look bad. It actively prevents people from engaging with your content. Research from MIT found that good typography increases reading speed by 15% to 20% and improves comprehension by up to 25%.
On the web, better readability means lower bounce rates, longer time on page, and higher conversion rates. Let’s break down exactly how to make your website typography work.
Font Size: Stop Making People Squint
The single biggest typography mistake I see? Body text that’s too small.
A Chatswood consulting firm had their body copy set at 13px. On desktop it was barely readable. On mobile it was painful. Their average time on page was 22 seconds. People weren’t reading because they literally couldn’t.
We increased body text to 18px on desktop and 16px on mobile. Average time on page jumped to 1 minute 48 seconds. Bounce rate dropped from 68% to 49%.
The Minimum Font Size Standards
For body copy (the main text people read):
- Desktop: 16px to 20px (18px is optimal for most sites)
- Mobile: 16px minimum (Google penalizes smaller text in mobile search)
- Tablet: 16px to 18px
Anything smaller than 16px creates reading friction. Your 25-year-old eyes might handle 14px fine, but your 50-year-old potential customers can’t read it comfortably.
Heading Sizes That Create Hierarchy
Your headings need to clearly distinguish themselves from body text and from each other. Here’s a solid starting point:
Desktop:
- H1 (main page title): 36px to 48px
- H2 (section headings): 28px to 36px
- H3 (subsection headings): 22px to 28px
- H4 (minor headings): 18px to 22px
- Body text: 16px to 20px
- Small text (captions, footnotes): 14px to 16px
Mobile:
- H1: 28px to 36px
- H2: 24px to 28px
- H3: 20px to 24px
- H4: 18px to 20px
- Body text: 16px to 18px
- Small text: 14px minimum
The key principle: each heading level should be noticeably larger than the one below it. If your H2 is 24px and your H3 is 22px, they’ll look nearly identical and your content hierarchy disappears.
Using Relative Units (rem vs px)
Modern web development uses rem (root em) units instead of pixels because they scale better across devices and respect user preferences.
Here’s the conversion: if your base font size is 16px, then 1rem = 16px.
- 0.875rem = 14px
- 1rem = 16px
- 1.125rem = 18px
- 1.25rem = 20px
- 1.5rem = 24px
- 2rem = 32px
- 2.25rem = 36px
Using rem units means if someone has increased their browser’s default font size (which older users often do), your entire site scales proportionally. Using fixed pixel sizes ignores their preferences.
Line Height: Give Your Text Room to Breathe
Line height (also called leading) is the vertical space between lines of text. Get this wrong and even perfectly sized text becomes hard to read.
The Optimal Line Height Range
For body text, aim for a line height of 1.5 to 1.8 times your font size.
If your body text is 18px:
- Minimum line height: 27px (1.5 x 18)
- Optimal: 28px to 32px (1.55 to 1.78)
- Maximum before it feels too spaced: 32px (1.8)
In CSS, you’d write this as line-height: 1.6; (unitless values are relative to the font size).
Why Line Height Matters
Too tight (1.2 or below): Lines of text crowd together, making it hard for eyes to track from the end of one line to the beginning of the next. Causes eye strain and slows reading speed by 10% to 15%.
Too loose (2.0 or above): Lines feel disconnected from each other. Readers lose their place and comprehension suffers.
Just right (1.5 to 1.8): Comfortable reading, good flow, minimal eye strain.
Headings Need Different Line Heights
Large headings look better with tighter line height than body text:
- H1: 1.1 to 1.3
- H2: 1.2 to 1.4
- H3: 1.3 to 1.5
- Body text: 1.5 to 1.8
A 48px H1 with a line height of 1.8 would have 38px of space between lines, which looks awkward and disconnected. A line height of 1.2 (58px total) keeps multi-line headings feeling cohesive.
Line Length: The Goldilocks Principle
The optimal line length for comfortable reading is 50 to 75 characters per line, with 66 characters considered ideal.
This is based on decades of readability research. Lines that are too long force eyes to travel too far, causing fatigue and reducing comprehension. Lines that are too short feel choppy and interrupt reading flow.
How to Control Line Length
Use max-width on your content containers. For 18px body text, a max-width of 600px to 750px typically gives you that optimal 50 to 75 character range.
Example CSS:
.content {
max-width: 680px;
font-size: 18px;
line-height: 1.6;
}A common mistake: letting text stretch full-width on large monitors. A paragraph that’s 1800px wide on a 27-inch screen might have 150+ characters per line. Nobody can read that comfortably.
A Bondi law firm had full-width paragraphs on their blog. I measured 142 characters per line on a standard desktop monitor. After implementing a max-width of 720px, their average reading time increased by 67% and bounce rate dropped by 31%.
Mobile Considerations
On mobile devices, line length naturally constrains itself (screens are only 320px to 428px wide). Your bigger concern is making sure text doesn’t get too short on small screens.
Avoid narrow columns or sidebars on mobile. Full-width text (with appropriate padding) works best.
Font Selection: Readability Over Personality
Your website needs two fonts: one for headings, one for body text. Maybe three if you need a monospace font for code. That’s it.
Using five different fonts doesn’t make your site interesting. It makes it chaotic.
Body Text Fonts: Prioritize Readability
For body copy, choose fonts designed for extended reading. Good options include:
System fonts (fastest loading):
- -apple-system, BlinkMacSystemFont (uses whatever system font the device has)
- Segoe UI (Windows)
- Roboto (Android)
Google Fonts (most popular):
- Open Sans: Clean, neutral, highly readable
- Lato: Friendly but professional
- Roboto: Modern, geometric, works well on screens
- Merriweather: Serif option that’s designed for screens
- Source Sans Pro: Designed by Adobe for UI, excellent readability
Avoid for body text:
- Decorative or script fonts (Lobster, Pacifico, etc.)
- Condensed fonts (too hard to read in paragraphs)
- Very thin weights (under 300) for body text
- All caps (reduces reading speed by 10% to 15%)
Heading Fonts: Personality Is Allowed
Headings appear briefly and in larger sizes, so you can use more distinctive fonts. But they still need to be readable.
Good pairing strategies:
Sans-serif headings + serif body:
Headings: Montserrat, Raleway, Oswald
Body: Merriweather, Lora, PT Serif
Serif headings + sans-serif body:
Headings: Playfair Display, Crimson Text, Libre Baskerville
Body: Open Sans, Lato, Roboto
Sans-serif for both (simpler):
Headings: Montserrat Bold, Poppins SemiBold
Body: Open Sans Regular, Lato Regular
The key: create contrast between your heading font and body font. Don’t use Roboto Bold for headings and Roboto Regular for body text. They’re too similar. Pick fonts that feel distinctly different.
Web Font Performance
Custom web fonts (like Google Fonts) need to download before they display, which can slow your page load.
Best practices:
- Limit to 2 to 3 font families maximum
- Only load the weights you actually use (don’t load 300, 400, 500, 600, 700, 800, 900 if you only use 400 and 700)
- Use font-display: swap in your CSS to show fallback fonts while custom fonts load
- Consider system fonts for body text to eliminate font loading entirely
A Pyrmont architecture firm was loading 6 Google Fonts with 4 weights each. Their page load time was 4.2 seconds. We reduced to 2 fonts with 2 weights each. Page load dropped to 1.8 seconds.
Font Weight: Use the Right Thickness
Font weight ranges from 100 (ultra thin) to 900 (ultra black). Most websites only need two or three weights:
- 400 (Regular): Body text
- 600 or 700 (SemiBold or Bold): Headings, important UI elements
- 300 (Light): Optional for large display text only
Body Text Weight
Use 400 (Regular) or 500 (Medium) for body text. Anything lighter becomes hard to read, especially at smaller sizes or on lower-quality screens.
Exception: some fonts (like Roboto) are designed with slightly heavier default weights. Test readability on actual devices.
Heading Weight
Headings typically look best at 600 (SemiBold) or 700 (Bold). This creates clear visual hierarchy and makes headings stand out from body text.
Using 400 for both body text and headings reduces contrast and makes your content hierarchy weak.
Colour and Contrast: Make It Readable
We covered this in the colour post, but it bears repeating: text needs sufficient contrast against its background.
WCAG 2.1 standards:
- Body text: minimum 4.5:1 contrast ratio
- Large text (18pt+ or 14pt bold+): minimum 3:1 contrast ratio
- For enhanced accessibility (AAA): 7:1 for body text, 4.5:1 for large text
Common mistakes:
Light grey text on white: #CCCCCC on #FFFFFF = 1.6:1 (fails badly)
Better: #555555 on #FFFFFF = 8.6:1 (passes AAA)
White text on light blue: #FFFFFF on #87CEEB = 1.8:1 (fails)
Better: #FFFFFF on #0066CC = 7.1:1 (passes AAA)
Use WebAIM’s contrast checker before committing to any text colour combination.
Don’t Use Pure Black on Pure White
Counterintuitively, #000000 on #FFFFFF (maximum contrast) can cause eye strain during extended reading. The harsh contrast creates an effect called “halation” where the letters appear to vibrate slightly.
Better: dark grey on off-white or white
- #2C2C2C on #FFFFFF
- #333333 on #FAFAFA
- #1A1A1A on #F8F8F8
These combinations maintain excellent readability (12:1 to 16:1 contrast ratios) while being easier on the eyes for long reading sessions.
Spacing and White Space
Typography isn’t just about the letters. It’s about the space around them.
Paragraph Spacing
Add space between paragraphs to break up long blocks of text. A good rule of thumb: paragraph spacing should be 1.5 to 2 times your line height.
If your line height is 28px (1.6rem), your paragraph spacing should be 42px to 56px (1.5em to 2em).
In CSS:
p {
margin-bottom: 1.5em;
}Section Spacing
Space between major sections should be larger than paragraph spacing to create clear visual separation. Typically 2.5 to 3 times your body text size.
For 18px body text: 45px to 54px between sections.
Padding Around Text Containers
Don’t let text touch the edges of its container. Add breathing room:
- Desktop: 40px to 60px horizontal padding
- Mobile: 20px to 30px horizontal padding
This prevents text from feeling cramped and improves readability, especially on mobile where thumbs need to grip the sides of the phone.
Mobile Typography: Special Considerations
Typography that works perfectly on desktop often fails on mobile. Here’s what changes:
Increase Font Sizes Slightly
Mobile screens are viewed at different distances and angles than desktop monitors. Bump your base font size up slightly:
- Desktop: 18px
- Mobile: 16px to 17px
Wait, that’s smaller, not larger? Yes. The key is maintaining comfortable reading at the typical viewing distance. 16px on mobile at 30cm viewing distance is roughly equivalent to 18px on desktop at 60cm viewing distance.
Reduce Heading Sizes Proportionally
A 48px H1 that looks great on desktop becomes comically oversized on a 375px wide mobile screen. Scale down headings for mobile:
- Desktop H1: 48px → Mobile H1: 32px
- Desktop H2: 36px → Mobile H2: 26px
- Desktop H3: 28px → Mobile H3: 22px
Tighten Line Height Slightly on Mobile
Desktop body text at 1.6 to 1.8 line height works well. On mobile, you can tighten to 1.5 to 1.6 because shorter line lengths make tracking easier.
Test on Actual Devices
Browser dev tools show you mobile layouts, but they don’t show you actual readability. Test your typography on real phones:
- iPhone 13/14 (390px width)
- iPhone SE (375px width, smaller screen)
- Samsung Galaxy S21+ (412px width)
- Older phones with lower-resolution screens
What looks readable on your 5K iMac might be illegible on a budget Android phone from 2020.
Accessibility Considerations
Good typography benefits everyone, but it’s especially critical for users with vision impairments or reading difficulties.
Allow Text Resizing
Use relative units (rem, em, %) instead of fixed pixels so users can increase text size in their browser settings. Don’t disable zoom on mobile with viewport restrictions.
Don’t Rely on Colour Alone
If you use colour to convey meaning (red for errors, green for success), also use icons, bold text, or other visual indicators. Colour-blind users need alternatives.
Avoid Text in Images
Screen readers can’t read text embedded in images. When you must use text in images, provide alt text that includes the text content.
Use Proper HTML Heading Hierarchy
Don’t skip heading levels (going from H1 to H3 with no H2). Screen readers use heading structure to help users understand the organization of your content.
Common Typography Mistakes
After auditing hundreds of Sydney business websites, these typography mistakes appear constantly:
Mistake 1: Justifying Body Text
Fully justified text (aligned on both left and right edges) creates awkward spacing between words, especially in narrow columns. It looks formal but hurts readability.
Stick with left-aligned text for body copy. It’s easier to read and works better on the web.
Mistake 2: All Caps for Long Text
ALL CAPS IS HARDER TO READ. We recognize words by their shape. All caps removes those shape cues, slowing reading speed by 10% to 15%.
Use all caps sparingly: short labels, CTAs, or design accents. Never for body text or long headings.
Mistake 3: Tiny Footer Text
I see 10px or 11px text in footers constantly. Just because it’s less important doesn’t mean it should be illegible. Minimum 14px, even for footer content.
Mistake 4: Overusing Bold and Italics
When everything is bold, nothing stands out. Use bold sparingly to emphasize key points. Italics are best for subtle emphasis, foreign words, or titles. Overuse of either creates visual noise.
Mistake 5: Poor Link Styling
Links need to be obviously clickable. Underlining remains the most recognizable link indicator. If you remove underlines, make sure links are a distinctly different colour (with sufficient contrast) and consider underlining on hover.
Your Typography Checklist
Audit your website against these standards:
- Body text: 16px minimum (18px optimal) on desktop, 16px on mobile
- Line height: 1.5 to 1.8 for body text
- Line length: 50 to 75 characters per line
- Contrast: 4.5:1 minimum for body text, 3:1 for large text
- Font count: 2 to 3 maximum
- Heading hierarchy: Clear size differences between H1, H2, H3
- Paragraph spacing: 1.5em to 2em
- Mobile optimization: Readable text sizes, no horizontal scrolling
- Accessibility: Relative units, proper heading structure, sufficient contrast
If you’re failing more than two of these, your typography needs immediate attention.
The Impact of Better Typography
Typography improvements might seem subtle, but the data shows real impact:
- Increasing font size from 14px to 18px: 15% to 25% longer reading time, 10% to 20% lower bounce rate
- Improving contrast from 3:1 to 7:1: 12% to 18% increase in time on page
- Reducing line length from 120 characters to 65: 23% faster reading speed
- Proper line height (1.6 vs 1.2): 11% improvement in comprehension
A Mosman financial services firm implemented all the typography recommendations in this article. Their average blog reading time increased from 48 seconds to 2 minutes 14 seconds. Contact form submissions from blog posts increased by 41%.
Better typography means more people actually read your content. More reading means more trust, more engagement, and more conversions.
Start With Body Text
You don’t need to overhaul your entire typography system today. Start with the highest-impact change: fix your body text size and line height.
If your body text is currently 14px, increase it to 18px. If your line height is 1.4, increase it to 1.6. Test on mobile. Measure time on page and bounce rate before and after.
You’ll likely see immediate improvement. Then you can tackle headings, spacing, font selection, and the rest.
Good typography isn’t about making your website look fancy. It’s about making your content accessible, comfortable, and easy to read. Get the fundamentals right and everything else improves.
Need a Website With Professional Typography?
Sites By Design builds websites for Sydney businesses with typography that’s optimized for readability, accessibility, and user engagement. We handle font selection, sizing, spacing, and testing across devices to ensure your content actually gets read.
Contact us today for a free typography audit of your current website with specific recommendations for improvement.
