Back to articles

Choosing Website Fonts: A Practical Guide to Web Typography

February 20236 min read
Choosing Website Fonts: A Practical Guide to Web Typography

Why your font choice matters more than you think

Most business owners spend weeks agonising over their logo and colour scheme, then pick a website font in about thirty seconds because Google Fonts had something that looked nice. That's backwards. Your visitors will read far more of your text than they'll ever stare at your logo, and the font carries a surprising amount of the weight in whether your site feels trustworthy, professional, or a bit off.

Bad type choices don't announce themselves. Nobody leaves your site thinking "the kerning was poor." They just feel like something's not quite right, get a bit tired reading, and click away. Good typography is invisible. It gets out of the way and lets people read.

Start with two fonts, not five

The single biggest mistake I see on small business sites is too many typefaces fighting each other. One for headings, a different one for the navigation, a script font for a quote somewhere, and the body text in whatever the theme shipped with. It looks like a ransom note.

Pick two fonts and stop there. One for headings, one for body text. If you want a third, use it sparingly for something like a logo lockup or a single callout, not scattered through the page.

A reliable pairing approach:

  • Pair a distinctive display or serif font for headings with a clean, neutral sans-serif for body copy. The contrast does the visual work without any font needing to be loud.
  • If you want a more unified look, use one typeface family but lean on different weights. A heading in bold, body copy in regular, captions in light. This is often the safer choice if you're not confident pairing fonts yourself.
  • Avoid putting two similar sans-serif fonts next to each other. If they're close but not quite the same, it reads as a mistake rather than a deliberate choice.

Readability beats personality every time

It's tempting to pick a font because it looks distinctive. But your website's job is to communicate, not to win a design award. If people have to work to read your paragraphs, you've lost before you've made your point.

A few things that actually affect readability, in rough order of importance:

  • Body text size. Sixteen pixels should be your floor for paragraph text. Anything smaller and you're asking people to squint, particularly on phones, which is where most of your traffic probably comes from.
  • Line length. Body paragraphs that stretch the full width of a wide screen are exhausting to read because the eye has to travel too far to find the start of the next line. Keep body text in a column roughly 60 to 75 characters wide.
  • Line height. Cramped lines make text feel dense and harder to scan. A line height of around 1.5 times the font size gives paragraphs room to breathe.
  • Contrast. Light grey text on a white background looks stylish in a mockup and is genuinely hard to read in daylight on a phone screen. Dark text on light backgrounds, or the reverse, with proper contrast, wins every time.

Serif fonts (the ones with little feet on the letters) can work fine online now, but they need to be a well-made web font, not a scan of something designed for print. Sans-serif fonts are still the safer default for body text, especially at smaller sizes.

Match the font to what your business actually is

Type carries tone whether you mean it to or not. A geometric, ultra-modern sans-serif on a funeral home's website sends a different signal than the same font on a tech startup's. A soft, rounded font suits a childcare centre; it looks out of place on a law firm's site.

Ask yourself what three words describe your business, then check whether your font choice agrees. A builder who prides himself on solid, no-nonsense work probably shouldn't have wispy, delicate type on his homepage. A boutique florist probably shouldn't use a heavy, industrial font built for engineering software.

This doesn't mean you need anything unusual. Plenty of well-run, trustworthy businesses use completely standard fonts like Inter, Source Sans, or Lato and it works fine, because the rest of the site (photos, colours, writing, layout) is doing the personality work. The font just needs to not contradict it.

Web fonts and page speed: the trade-off nobody warns you about

Here's the part most articles on this topic skip entirely, and it's the part that actually costs businesses money. Every custom font you load is a file your visitor's browser has to download before it can show your text properly. Load four font weights across two typefaces and you've added real weight to your page, which slows things down, particularly on mobile data.

A few practical fixes:

  • Limit yourself to two or three font weights total (say, regular and bold), not the full weight range a font family offers.
  • Use font-display: swap in your CSS so text shows in a fallback font immediately, then switches once your custom font has loaded, instead of leaving a blank space while it downloads.
  • Self-host your fonts where possible rather than pulling them from a third party at page load time. It cuts out an extra connection your browser has to make.
  • If you're using a font service, only load the specific weights and character sets you actually use. Loading the whole family "just in case" is a common and easily avoided waste.

Google's Core Web Vitals, which factor into search rankings, penalise slow-loading and jumpy-loading pages. A font that causes your headline to reflow the layout after it loads is a measurable, fixable performance hit, not just a cosmetic annoyance.

Consistency is the boring bit that actually works

Once you've settled on your fonts and sizes, use them the same way everywhere. Same heading style on every page, same body text treatment, same size for captions. It's not exciting advice, but it's the difference between a site that feels put together and one that feels like it was built in stages by different people, even if it was just you, tinkering over a few weekends.

If you're on a website builder or CMS, set this up once in your theme or style settings rather than manually styling text on every new page. Future you will be grateful when you don't have to remember what size you used for subheadings six months ago.

The short version

Pick two fonts. Make sure body text is easy to read at a normal size with decent line spacing. Choose a typeface that suits what your business actually does. Keep the number of font files you load to a minimum so your site stays fast. None of this is complicated, but it's the kind of detail that separates a website that feels professional from one that just feels like a website.

Let's talk today about how we can help you achieve your online goals!