Many of the world’s biggest brands are instantly recognisable by their signature font, but you can create a unique look even if you only have a small personal website. In fact, we’d strongly recommend establishing a typographical identity for every project you work on, and creating a brief document of style guidelines so you (and others) have a handy reference tool.
1. Use a set
Build a set of core fonts for each website. The number will vary depending on the project, but as a standard guide you might want to have:
- Logo font
- Heading font
- Body text font
- Small font
You may need more or less depending on the versatility of the fonts you choose; some fonts will look great at all sizes and can be adapted accordingly.
2. Style to match
Your fonts are effectively a visual representation of your tone and values, so always match them to your website and audience. For example, a handwriting font is perfect for titles on a cookery website but is too informal for a law company’s page. Choose fonts likely to appeal to your target audience, and investigate other sites in your industry/niche to get inspiration.
3. Be consistent
Once you’ve determined your set of fonts, be consistent. Avoiding inline styling and setting up your CSS file properly for all your needs (yes, you will want to use H4s at some point, so style them!) will go a long way towards ensuring consistency. This is especially important if you’re intending to hand the website over to someone else at some point.
4. Less is more
When it comes to styling your text, keep it simple. Too many effects can be painful, especially if you’re working with smallish fonts. In particular, make sure that your standard body text is simply styled in one colour.
5. Use spacing consciously
look at kerning and line height (especially between paragraphs). Test-read some paragraphs of varying length when you’ve finished styling. If you find your attention wandering or squint to read, you’ll want to rethink your choices. Don’t forget to include colour in your styling assessment too – light fonts on dark backgrounds can be difficult to read, and fonts of similar tones or common colourblindness culprits can pose accessibility problems.
6. Think about different mediums
Even if you’re only currently thinking about choosing fonts for a web project, consider future adaptability and think about how your fonts can work for PDFs, print materials, logos and so on. Your clients will thank you for it.