In this article · 8 sections
- Colours: a simple system
- Contrast matters more than colour choice
- Industry colour conventions (not rules)
- Fonts: keep it to two
- Sizes and spacing
- Mistakes that make sites look unprofessional
- Frequently Asked Questions
- What's the best button colour?
- Do fonts affect SEO?
- Can I use dark mode design?
- Get a professional design
Visitors form an impression of a website in a fraction of a second, and colours and fonts are a big part of it. Good choices make a small business look established and make the content easy to read. Poor choices — clashing colours, tiny text, five different fonts — make even good businesses look unreliable.
Colours: a simple system
- Primary colour: your main brand colour, used for headers, links and highlights.
- Accent colour: one contrasting colour reserved for calls to action (Book Now, Call, WhatsApp). If everything is bright, nothing stands out.
- Neutrals: white/off-white backgrounds, dark grey text (pure black can feel harsh), light grey borders.
- Status colours: green for success, red for errors — used consistently.
Most professional sites use one or two brand colours plus neutrals. More than that gets messy.
Contrast matters more than colour choice
Text must be easy to read on its background. WCAG guidelines recommend a contrast ratio of at least 4.5:1 for normal text. Light grey text on white, yellow on white, or text over busy photos fail this and lose readers — especially on phones outdoors.
Industry colour conventions (not rules)
- Healthcare: blues, greens, clean whites — calm and trustworthy.
- Taxi/travel: yellow, black, blue — energetic and recognisable.
- Food: warm reds, oranges, browns — appetising.
- Finance/legal: navy, deep green, grey — stable and serious.
- Luxury: black, gold, deep jewel tones.
Your logo colours usually decide the palette.
Fonts: keep it to two
- Heading font: can have personality (a strong sans-serif or elegant serif).
- Body font: highly readable sans-serif (e.g., Inter, Roboto, Open Sans, DM Sans).
- Use Google Fonts or system fonts and load only the weights you use for speed.
- If you have Hindi or Punjabi content, choose fonts supporting Devanagari or Gurmukhi (e.g., Noto Sans families).
Sizes and spacing
- Body text at least 16 px on mobile; line height around 1.5–1.7.
- Clear heading hierarchy (H1 > H2 > H3).
- Line length of about 50–80 characters on desktop for comfortable reading.
- Generous white space — cramped layouts look cheap.
Mistakes that make sites look unprofessional
- Many bright colours competing for attention.
- Decorative fonts for paragraphs.
- All-caps paragraphs.
- Text placed directly over busy photos without an overlay.
- Different button styles on every page.
Frequently Asked Questions
What's the best button colour?
There's no universal best — choose a colour that contrasts strongly with your page and use it consistently for primary actions.
Do fonts affect SEO?
Indirectly — heavy font files slow pages, and readability affects engagement.
Can I use dark mode design?
Yes, if contrast and readability remain strong; it suits some brands (nightlife, tech, luxury).
Get a professional design
Joboo Web designs brand-consistent, readable websites. See branding basics or website design.