Typography makes up around 95% of the content on a website. A poor choice of fonts can ruin the user experience even if the rest of the design is faultless. The reverse is also true: careful typography improves legibility, strengthens brand credibility and can increase time on site by 20 to 30%.
Yet typography is the element small businesses most often neglect when building their site. A font gets picked "because it looks nice", with no thought for what it communicates, how it reads on mobile or what it does to site performance. This guide corrects the most common mistakes and gives you a clear decision-making system.
Which types of font should you choose for a professional website in your sector?
There are 5 broad font families, each with its own personality and strategic uses:
Serif (Georgia, Merriweather, Playfair Display). The serifs (small strokes at the ends of the letters) convey elegance, authority and tradition. Ideal for: editorial, luxury, professional practices, finance.
Sans-serif (Inter, Open Sans, Montserrat, Poppins). With no serifs, they project modernity, clarity and approachability. The dominant family on the web in 2026, favoured by startups, agencies and technology brands.
Monospace (Fira Code, JetBrains Mono). Every letter takes up the same width, echoing computer code. Use for: code blocks, data, technical interfaces.
Display (Bebas Neue, Archivo Black, Clash Display). Designed for large sizes, they create immediate visual impact. Reserved for headings and never for body text.
Handwriting (Dancing Script, Pacifico). These add a human, warm touch, but they are hard to read at small sizes. Use sparingly, for decorative accents only.
Choosing according to your brand positioning:
At ConvertiLab we use Inter plus Playfair Display on our own website, combining maximum legibility (Inter for long text) with editorial authority (Playfair for headings).
How do you build an effective visual hierarchy with typography?
Visual hierarchy guides the visitor's eye through your content in the order of importance you have set. Without it, everything carries equal weight, and when everything carries equal weight, nothing gets read.
A recommended scale for a professional site:
| Level | Size | Weight | Use |
|---|---|---|---|
| H1 hero | 48 – 72px | Bold (700) | Main page heading |
| H2 section | 32 – 40px | Semibold (600) | Section headings |
| H3 subsection | 24 – 28px | Semibold (600) | Subheadings |
| H4 detail | 20 – 22px | Medium (500) | Card titles, lists |
| Body text | 16 – 18px | Regular (400) | Paragraphs |
| Small text | 12 – 14px | Regular (400) | Captions, legal notices |
Non-negotiable legibility rules:
10 proven Google Fonts pairings:
How do you optimise Google Fonts performance on your site?
Every web font adds 20 to 100KB to your page load, and every extra weight (light, medium, bold, extra-bold) is a separate file. On a site loading 4 fonts in 6 different weights, typography alone can account for more than 500KB of blocking resources.
Performance best practice:
Impact on Core Web Vitals: a badly configured font is the leading cause of CLS (Cumulative Layout Shift), where the text visibly jumps as the font loads, hurting your Google score. Target: CLS below 0,1. Above that, you take a direct ranking penalty.
Typography trends for 2026:
A real example: a consultancy we worked with was using Raleway plus Raleway on its site (the same font everywhere, with 8 weights loaded). After switching to Inter plus Playfair Display with only 3 weights, LCP went from 3,8s to 1,9s, rated "Good" on PageSpeed, and time spent on the expertise pages rose by 22%.
Check how your typography affects your design score with our Design Score tool.
The 5-step method for choosing your fonts
8 ready-to-use Google Fonts pairings
| Headings | Body text | Impression it gives | Suits |
|---|---|---|---|
| Playfair Display | Source Sans 3 | Elegant, editorial | Professional practices, hospitality, fine crafts |
| Montserrat | Open Sans | Modern, approachable | Business services, charities |
| Poppins | Inter | Young, technical | Startups, apps, training |
| DM Serif Display | DM Sans | Refined, contemporary | Architecture, interiors, beauty |
| Space Grotesk | Inter | Technical, precise | Industry, software, engineering |
| Fraunces | Nunito Sans | Warm, artisanal | Restaurants, food shops, wellbeing |
| Manrope | Manrope (different weights) | Understated, uniform | Accountants, solicitors, consulting |
| Lora | Lato | Classic, reassuring | Healthcare, property, insurance |
All of them are free, including for commercial use, and available as woff2 files so you can host them on your own domain. If you are unsure about the result, our free design score rates the legibility and typographic consistency of your site in seconds.
Frequently asked questions about web typography
How many fonts should you use on a website?
2 fonts maximum for most sites: one for headings, one for body text. You can add a third for decorative accents or code. Beyond that, the design loses coherence, performance suffers and the brand identity weakens. The golden rule: a clear contrast in style between the two fonts you choose (serif plus sans-serif works almost every time), with consistent proportions and personality.
Is Google Fonts free for commercial use?
Yes, every Google Fonts typeface is open source and free, including for commercial use, with no attribution required. It is the reference library, with more than 1 400 families available in 2026. For performance, consider self-hosting the .woff2 files directly on your own server, which removes the external dependency and saves a few hundred milliseconds on load time.
What is the minimum text size on mobile?
16px minimum for body text on mobile. Below that, users have to pinch to zoom, which hurts UX and can hurt SEO (Google penalises sites that require zooming to read). Most experts recommend 16 to 18px. Use the CSS clamp() function for responsive type that adapts automatically to screen width without media queries.
Does typography affect conversion rates?
Yes, measurably. Eye-tracking studies show that users read web pages in an F pattern: they read the first line in full, then scan vertically. Typography with a clear hierarchy (contrasting headings, airy paragraphs) increases reading time by 20 to 30% and reduces the bounce rate. In practice: a CTA button in a legible, high-contrast typeface converts better than one in a hard-to-read decorative face, even with identical wording.
Can you use premium fonts (not from Google Fonts) on your site?
Yes. Adobe Fonts (included with Creative Cloud), Fontshare (free), Fonts In Use and independent foundries (Klim, Commercial Type, Production Type in France) offer premium fonts that are often more distinctive than Google Fonts. Self-hosting then becomes necessary for both licensing and performance reasons. For small businesses on a limited budget, Google Fonts covers 95% of needs, and premium fonts make sense when brand identity is a strong point of difference.
