Fonts and colours are the first things people notice on a website, even if they could not tell you why a site "feels" trustworthy or cheap. Getting them right is less about personal taste and more about a few principles that keep a site readable, consistent and recognisable. This guide explains how to choose fonts and colours for a business website without getting lost in endless options.
Begin with your brand, not the font menu
If you already have a logo and brand guidelines, they should drive your choices. Pull the existing colours and typefaces from those files before browsing anything new. If you do not have guidelines, write down three or four words that describe how you want customers to feel. "Calm, expert, approachable" points in a very different direction from "bold, fast, playful."
Those words act as a filter. A law firm and a skate shop can both have good websites, but they should never look alike.
Choosing fonts that work hard
Limit yourself to two typefaces
Most business sites need one font for headings and one for body text. Sometimes a single family with several weights is enough. More than two usually looks messy and slows the page down because each font is an extra file to load.
Prioritise readability for body text
Headings can show personality. Body text has one job: be easy to read for long stretches. Look for a typeface with open letter shapes, clear distinction between similar characters such as a capital I and a lowercase l, and a generous default size. Test it on a phone, not only on a large monitor.
Check licensing and performance
Web fonts come with licences. Free libraries are a sensible starting point, but confirm the terms allow commercial use. Load only the weights you actually use, such as regular and bold, rather than an entire family.
Building a colour palette
A practical palette has three layers:
- Primary colour: usually from your logo, used for key buttons and highlights
- Neutrals: whites, greys or soft off-whites for backgrounds and text
- Accent: one contrasting colour for alerts, offers or secondary actions
Resist the urge to use the primary colour everywhere. When everything is bright, nothing stands out. Reserve strong colour for the actions you most want people to take.
Contrast is not optional
Light grey text on a white background might look elegant in a design file, but many visitors will struggle to read it, especially outdoors or on older screens. Use a contrast checker to make sure text meets accessibility guidelines. This helps people with visual impairments and, frankly, everyone else too.
Think about meaning
Colours carry associations. Red often signals errors or urgency, green suggests success, and blue tends to feel stable. You do not need to follow these rules rigidly, but avoid making your main "Buy" button the same red you use for error messages.
Test in context before committing
Colour swatches and font samples can be misleading in isolation. Mock up a real page with a heading, a few paragraphs, a form and a button. Then view it:
- On a phone in daylight
- In dark mode, if your site supports it
- Next to your logo and social media profiles
- Printed in greyscale, to check that meaning does not rely on colour alone
If something feels off, adjust one variable at a time rather than starting over.
Document your choices
Once decided, write the rules down: font names, sizes for each heading level, line spacing, and colour codes with notes on where each is used. A short style guide keeps the site consistent as new pages are added by different people. Our design services often include this kind of guide alongside visual assets.
FAQ
Should my website fonts match my printed materials?
Ideally they should be the same or closely related, so customers recognise your brand everywhere. If a print font is not available for the web, choose a web-safe alternative with a similar shape and feel.
How many colours is too many?
If you need a chart to remember which colour goes where, there are probably too many. A primary, an accent and a set of neutrals cover most business needs comfortably.
Can I change fonts and colours later?
Yes, especially if the site was built with a central stylesheet or design system. That is another reason to document choices: changing them later becomes a contained update rather than a page-by-page hunt.
Next step: get a second opinion
Choosing visual styles is easier with someone who has seen many brands go online. The team at Export Apps can review your current look or design a fresh one as part of a website project. Contact us to start the conversation.