The typography of your website basically means what fonts you use and how you use them. The way typography is executed on a website will have great impact on the over- all look and feel. Strangely enough, however, it is often not given proper attention or simply underestimated – especially by beginners. Typography plays a vital part in web design, not only aesthetically but also when it comes to usability; when implemented the right way, it will provide an excellent way to help guide the user through your content.
Don’t use too many fonts at once
Many companies or brands have one font family (one font, with a variety of styles, such as italic, bold, medium et cetera) as their corporate font. In web design it is not uncommon, though, to use more than one font, or font family for that matter. Using more than one font can open up your design possibilities. Some font combinations just work really well and can enhance your overall web design, when done the right way. Having said that, it’s a common mistake to go overboard with this. As a rule, don’t use more than three fonts, and if you do, make sure they compliment each other.
Be consistent
Yet again? Well yes…Consistency in your overall web design is of the utmost importance, but when it comes to typography it’s key. And it is precisely here where mistakes are very often made…Once you’ve settled on a certain font, or combi- nation of fonts, try to define rules how you will be using different fonts, font weights and font sizes. It’s very important to then stick with this and keep it in check. Keep the fonts of your headlines, paragraphs, lists, blockquotes the same throughout the entire site.
Consider legibility, readability and functionality
However great your copy is (and of course it should be 😉 and however good you think a font looks, it’s pretty worthless if no one can read it properly. Legibility plays a vital role in typography. It’s also impor- tant for your copy to be laid out in an aesthetically pleasant way, so that it helps your users to absorb your content. A couple of general rules will help you achieve just that:
Here is an example of a list with bullet points:
- avoid curly, showy or script-like fonts for body text. Extravagant fonts may work well for headlines, but not when used in a block with line-after-line of text. For this you might want to stick to a more common, simpler font that’s ‘easy on the eyes’. In general it’s a good idea to not overuse ‘flashy’ fonts altogether.
- don’t include large blocks of text. Large blocks of text are intimidating to most of your readers, which will often result in them not bothering at all. Try to break up your texts into smaller chunks and/or force paragraph breaks every now and then.
- pay attention to color pairings and backgrounds. Some color combinations can lead to text being very hard to read. Make sure there’s enough contrast for the text to be legible. Also avoid using ‘busy’ background images behind text blocks; the text is important and should be legible, not the picture.