Today we have so much choice with the styles of fonts available to use on our websites, which go a long way to creating a unique and great user experience. However, it is easy to get a bit carried away with the design and make reading your website's content difficult.
Fonts generally fall into these groups:
- Sans Serif
Serif fonts generally look a little “Old fashioned” due to the embellished details on each letter, and resemble the text we would find on Victorian books and posters. An example of this type of font, historically used on websites would be “Time New Roman”.
Sans Serif fonts literally appear to have all the little details ‘sanded’ off, and generally appear more modern, due to their minimal nature. An example of this font often used on websites would be “Helvetica”.
Which font style is easier to read?
For years graphic designers have been taught that serif fonts are easier to read, especially if they are black on a white background. However, these rules were based on printed media, and don’t necessarily apply when reading text on a computer or mobile device, as contrast and screen glare become major factors in readability. We are also used to considerably more font variants nowadays, and therefore current thinking is that either font style works equally well if presented clearly.
Text presentation tips for the web and mobile
With what appears to be an infinite number of fonts available, we can now choose font styles that suit our brand and identity and create something visually delightful and unique. However, we must remember that if the text is unclear, it will impact the chances of your users achieving their goals.
The perils of small text
Small text might look more stylish, but if it’s too hard to read, it will be skipped and this might impact your users achieving their goals. This especially affects older users but can affect almost everyone when eye fatigue becomes a factor. Also, don’t expect your users to zoom in on text on their mobiles, as this can become irritating.
The perfect text block
Users struggle if text blocks are too wide as it becomes difficult to read from one line to the next. It is generally recommended that text blocks should be no wider than 700 pixels, which is around 75 characters per line.
Line height is another important factor for readability. Generally speaking too much is better than too little, however far too much can make paragraphs merge into one another.
Making your text stand out
Light text on a light background is generally hard to read. This is an easy mistake to make as screens differ so much from each other, and what might look great on one monitor won’t always look so great on another, and in severe cases can become completely unreadable.
The complete opposite can also cause reading issues, such as black text on a white background, or poorly chosen colour combinations that appear saturated.
For text on white backgrounds, we recommend using very dark greys so they appear less harsh and always test your website design on as many different devices as you can to check the readability of your text.
Common mistakes with bold text
Overly heavy text can be hard to read, such as blocks of bold type. This is because the lack of white space around each character makes them less clear. If you need to draw attention to your text consider using easily scannable titles or just bolded the 1st word in the sentence.
The invisible font
Lighter fonts are becoming increasingly popular for websites, as they make sites look clean and contemporary. Problems occur with these fonts with they’re either too small or their colour is too light, which can make them almost invisible on some monitors.
Overuse of uppercase text can look a bit “Shouty” and there’s just something about all caps text that rubs people up the wrong way. This is why I find it surprising when I see so many websites using uppercase text to emphasise a message when what they’re actually doing is the opposite, as by reducing the shape contrast for each word, they’re making their content really hard to read.
Users especially find upper text in top navigation hard to scan, especially when the links are really close to one another.
Don’t stand too close to me!
We recommend giving condensed fonts a miss completely. Condensed fonts are versions of fonts where individual letter widths and spacing have been reduced, allowing more characters per line. A side effect of this space efficiency is that condensed fonts generally don’t lend themselves to readability and can look intimidating and difficult to comprehend.
Fun with fonts
The internet has opened up a world of font possibilities, many of which were once resided to pen and paper, such as fonts that appear handwritten or drawn. These fonts can really add so much to the look and feel of your website, but may not always be suitable for all your content. Generally, we recommend using for banners and large headings only and finding another font for everything else.
Combinations are cool
Many designers are now using combinations of fonts to make their typography look more interesting & district from other websites. Choosing font combinations is a whole other article, but as a rule, avoid using more than two font families on your website as this might make it look inconsistent and may impact the page load speed and readability. Mixing Sans Serif & Serif fonts together usually works really well when each font has a consistent purpose, for example, one font for headers, menu items, buttons and the other font for text blocks. I recommend you read this article from Smashing Magazine on the Best Practices of Combining Typefaces if you’re interested in learning more.