Reading Time: 2 mins 52 sec

I get asked this question at least three times a week: “What’s the best font and size for my website?” And honestly, I totally get why people are confused. With thousands of typefaces available and screens of every imaginable size, choosing the right typography feels like navigating a maze blindfolded.

But here’s the thing—good web typography isn’t just about picking something that looks nice. It’s about creating an experience where your visitors can actually read your content without developing a headache. After years of testing fonts across different devices (and making plenty of mistakes along the way), I’ve learned that great web typography follows a few key principles that anyone can master.

Let me share what I’ve discovered about making text truly shine on screens of all sizes.

Not all fonts are created equal when it comes to screen display. Some typefaces that look stunning in print turn into blurry messes on monitors. The secret lies in choosing fonts with distinctive and open letterforms, characters that remain clear even at smaller sizes.

My current favourite is Inter, and there’s a good reason it’s become so popular among designers. It was specifically designed for computer screens, with carefully crafted letter spacing and character shapes that stay crisp across different devices. Other fantastic options include Proxima Nova, Georgia (a classic that never fails), and Fira.

When evaluating fonts for your website, look for these characteristics:

• Open counters (the spaces inside letters like ‘a’ and ‘e’)
• Clear distinction between similar characters (‘l’, ‘I’, and ‘1’)
• Good x-height (the height of lowercase letters)
• Balanced letter spacing that doesn’t feel cramped

Resources like Google Fonts, Font Library, and Adobe Typekit offer excellent web-safe options that load quickly and display consistently across browsers.

Here’s where many websites stumble—using the same font size across all devices. What looks perfect on your desktop might be unreadably tiny on a phone or overwhelmingly large on a tablet.

Follow these responsive sizing guidelines:

• Mobile: 12-16pt

• Tablet: 15-19pt

• Desktop: 16-20pt

Remember, these are starting points. The ideal size depends on your chosen typeface. A font with a large x-height might work well at 14pt on mobile, while one with smaller letterforms might need 16pt to achieve the same readability.

This might sound counterintuitive, but limiting yourself to no more than three fonts will make your website look more professional, not less creative. Too many typefaces create visual chaos and confuse your readers.

Instead of collecting fonts like Pokémon cards, choose one primary typeface with multiple weights and styles. Most quality font families include regular, bold, italic, and light variations—giving you plenty of design flexibility within a cohesive system.

Here’s something I learned the hard way—your typography might look perfect on your high-end monitor but terrible on an older smartphone or tablet. Testing across different devices isn’t optional; it’s essential.

Check your typography on:

• Various smartphone sizes and ages

• Different tablet orientations

• Multiple desktop screen resolutions

• Different brightness settings

If your text remains readable across these extremes, you’re golden.

Great web typography isn’t about following rigid rules—it’s about understanding how text behaves on screens and making thoughtful decisions that prioritise your readers’ experience.

Start with a solid, screen-friendly typeface like Inter, size it appropriately for each device, and test it thoroughly across different screens. Your website visitors will thank you with longer reading sessions and better engagement.

Ready to transform your website’s typography? Begin with one change at a time, and watch how better font choices can dramatically improve your site’s readability and professional appearance.