Website Typography: How to Choose Fonts That Sell
Typography impacts readability, brand perception, and conversion. A practical guide to font selection, pairing, and performance optimization.
Author: Meiko Neuman
Founder and web strategist, Kodulehe Haldus
The Importance of Typography
MIT research shows that good typography increases reading speed by 35% and recall by 22%. Poor typography is the primary reason why visitors close a page.
Core Rules
1. Maximum of 2 Fonts - **Heading font** (titles) – distinctive, full of character - **Body font** (content) – readable, neutral
2. Readability Minimums - Body: 16px+ (17px+ on mobile) - Line-height: 1.5–1.7 - Max paragraph width: 65–75 characters - Contrast: WCAG AA (4.5:1)
3. Hierarchy ```text H1 – 48-72px (one per page) H2 – 32-48px H3 – 24-32px Body – 16-18px Small – 14px ```
Types of Fonts
Sans-serif (Most popular for web) - **Inter** – modern, neutral - **Plus Jakarta Sans** – friendly, contemporary ([we use it ourselves](/)) - **DM Sans** – minimal, geometric - **Manrope** – characterful
Serif (Classic, authoritative) - **Playfair Display** – luxurious - **Lora** – balanced - **Merriweather** – highly readable for blogs
Display (Special usage) - **Space Grotesk** – technical - **Caveat** – handwriting style
Monospace (Code) - **JetBrains Mono** - **Fira Code**
Free vs Premium
Google Fonts (Free) [Google Fonts](https://fonts.google.com/) – 1500+ fonts, GDPR compliance via [Bunny Fonts](https://fonts.bunny.net/).
Premium - [Adobe Fonts](https://fonts.adobe.com/) – for Creative Cloud users - [Fontshare](https://www.fontshare.com/) – a collection of free premium fonts - [Pangram Pangram Foundry](https://pangrampangram.com/)
Font Pairing
Rule: contrast. Combine: - Serif heading + Sans body - Geometric sans + Humanist sans - Display heading + Neutral sans body
Classic pairs: - Playfair Display + Source Sans Pro - Space Grotesk + DM Sans - Merriweather + Open Sans
Tool: Fontjoy – AI font pairer.
Performance
Every font is an HTTP request. Optimization: - Load only used weights (400, 700 is usually enough) - WOFF2 format - font-display: swap - Self-host critical fonts
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
Estonian Language Specifics
The letters õ, ä, ö, ü, š, ž must be supported. Check: - Glyphs present? (not a fallback) - Correct kerning? - Latin Extended subset (Latin Extended)
Typography Checklist
- Maximum 2 fonts
- Body 16px+ desktop, 17px+ mobile
- Line-height 1.5+
- Contrast WCAG AA
- Estonian characters supported
- Font loading optimized
- One H1 per page
- Hierarchy is visual and semantic
Design Trends 2026
See also Web Design Trends 2026.
Summary
Good typography is invisible – the visitor reads fluently without even noticing the font. Poor typography is the first thing noticed. We provide website design with a professional typography system – request a quote.
Sources
Need help with your website?
Our team maintains, optimises and protects your website. Pricing is agreed based on scope.
Request a quoteAbout the author
Meiko Neuman — Founder and web strategist, Kodulehe Haldus. Meiko leads the Kodulehehaldus team and has spent over a decade helping companies maintain and optimise their websites for measurable business results. He writes about website management, SEO, AEO/GEO and the commercial side of the web.