How to Choose Website Colours and Fonts for Your Brand

On this page

1. Colours
2. Fonts
3. Performance
4. Apply them as global styles

Colours and fonts shape how your business feels to visitors: trustworthy, premium, friendly, modern. They also affect readability and speed. Here's a simple way to choose well.

Colours

Start with your brand

Use your logo colours as a starting point. Think about the feeling you want: calm and clinical for healthcare, warm for food, bold for creative agencies, dependable for B2B.

Keep the palette small

• Primary colour: buttons, links and highlights
• Secondary or accent colour: used sparingly
• Neutrals: text, backgrounds and borders

Prioritise contrast

Text must be easy to read. Check contrast with a contrast checker, since light grey text on white is a common problem; see accessibility basics.

Use colour consistently

If buttons are violet, keep all primary buttons violet, so visitors learn what's clickable.

Fonts

• One or two families: one for headings, one for body (or one for both)
• Readable body text: at least 16px, with comfortable line height
• Limited weights: each extra weight adds loading time
• Support for your languages, including Devanagari or regional scripts if needed

Performance

Web fonts should load efficiently (only needed weights, with a fallback shown while loading) so they don't slow pages or cause text to jump.

For the practical side, including weights, self-hosting, font-display and preloading, see how to load web fonts without slowing your site.

Apply them as global styles

Set colours and typography as global styles in your theme or builder, so the whole site stays consistent and changes happen in one place; see design handoff tips.

For the bigger picture, see logo, favicon and brand basics.