Fonts and Colors Do More Than You Think
When someone lands on your website, they form a first impression before they read a single word. That impression comes from your fonts and colors.
A mismatched color palette says amateur. The wrong font makes your text hard to read. But get these right and your site instantly looks more trustworthy and professional.
The good news: you don't need a design degree. You just need a few solid rules.
The Two-Font Rule
Use two fonts maximum. One for headings, one for body text. Any more than that and things start to look chaotic.
A classic combination: a bold, slightly decorative font for headings and a clean, simple font for body text.
Some reliable pairings from Google Fonts (free):
- Playfair Display (headings) + Lato (body)
- Montserrat (headings) + Open Sans (body)
- Raleway (headings) + Source Sans Pro (body)
- Inter for both (great for clean, modern sites)
All of these are free on Google Fonts. You can install them on any website with a few clicks.
Font Size Matters
Body text should be at least 16px. Smaller than that is hard to read on screens, especially on mobile.
Headings should be noticeably larger than body text to create a clear hierarchy. H1 around 36 to 48px. H2 around 28 to 32px. H3 around 22 to 26px.
Line height matters too. Set it to 1.5 to 1.7 for body text. That extra breathing room makes long paragraphs much easier to read.
Building a Color Palette
Pick three colors. A primary color, a secondary color, and a neutral.
- Primary: Your main brand color. Used on buttons, key headlines, and accents.
- Secondary: A complementary color for variety and highlights.
- Neutral: White, off-white, or light gray for backgrounds and large text areas.
Start with your primary color. Choose something that fits the feeling you want to create.
- Blue: trust, reliability, professionalism
- Green: growth, health, nature
- Orange: energy, creativity, warmth
- Black/charcoal: luxury, sophistication, authority
Free Tools for Picking Colors
You don't have to guess. These free tools do the hard work:
- co: Generates color palettes instantly. Hit the spacebar and it shows you new combinations.
- Canva Color Palette Generator: Upload a photo and it pulls a palette from the image colors.
- Adobe Color: More advanced, with complementary, analogous, and triadic color tools.
Canva is also great for testing how your fonts and colors look together before you touch your website. It's free to start and has a huge library of design assets.
Starting at $0/month
Save from 16% with yearly
Key Features
Extensive library of design templates and elements
Easy drag-and-drop interface
Collaboration tools for teams
Why We Recommend It
Allows for quick and professional designs with minimal effort
Facilitates teamwork on design projects with real-time collaboration
Suitable for users of all skill levels
Pros & Cons
- Highly user-friendly
- Wide range of templates and design options
- Free tier available with extensive features
- Advanced features require a paid subscription
- Limited customization compared to professional design tools
Contrast Is Critical
Light text on a light background is impossible to read. Dark text on a dark background is too. Make sure there's strong contrast between your text color and your background.
The standard for accessibility is a contrast ratio of at least 4.5:1 for normal text. Use the WebAIM Contrast Checker (free) to test yours. This also helps with Google rankings, since readability is part of how search engines evaluate page quality.
Stay Consistent Across All Pages
Once you pick your fonts and colors, use them consistently everywhere. Same heading font on every page. Same button color throughout. Same background colors in the same sections.
Inconsistency looks unfinished. Consistency looks intentional and professional.
