How many times have you opened a webpage or walked past a shopfront and been utterly appalled by the font? Comic Sans, Papyrus, Calibri and many others – mainly old remnants of MS software that are rightfully gathering dust in the web design archives – are one-way tickets to reducing your content to a state of visual mockery. Good typography, on the other hand, can pique a viewer’s interest before they’ve even read the text. The visual impression is so sleek that the individual is already well-disposed to the content before they’ve interpreted it. Typography is not just a secondary box to tick — it is central to website design, along with colour scheme, ease of navigation, mobile-friendliness, which should all be held at the forefront when designing a website.
The leading actor in your web-script
What’s more important for a film’s success — the script, or the actor reading it? Most film fanatics would tell you it’s a 50/50 balance. Typography, the packaging in which text appears, should be seen as the leading actor in your webpage script. High-quality fonts create a visual character that frames the interpretation of the content, much like an actor’s voice and delivery frames the content of the script. And just as in Hollywood, the saying goes, ‘If in doubt, stop acting’, so too should typography refrain from ‘over-acting’ and distracting from the text’s readability. Text is designed to be interpreted, and any font or colour format that makes the reader’s job harder is a bad use of typography. Yes, typography is an opportunity for creative flair, especially if your business has some kind of artistic component, but above all it should allow for an easy, smooth user experience.
When deciding on a font, consider whether or not it reflects the character of the text. Elegant prose with longer words may lend itself to a delicate, intricate font, while direct, communicative language is generally better-suited to bulkier, clearer fonts. As the element of visual design that’s closest to the content itself, typography should mesh well with the text it presents.
Essential tool for CRO
Conversation rate optimisation (CRO) is a crucial aspect of web design and should always be held in consideration throughout the construction of a website. The premise of CRO is that webpages should be actively directing the viewer’s attention towards a desired outcome, such as a download, email subscription or free trial, rather than simply presenting visuals that are nice to look at. As such, a web designer practicing CRO must determine the hierarchy of on-page content in order to guide the viewer’s attention toward the correct areas. Once the hierarchy is established, typography is one of the most important tools for enacting it — by enlarging the most important on-page text and shrinking the information that’s less significant.
This may seem like child’s play to some of you. ‘Make it bigger if it’s important, make it smaller if it’s not’. But all-too often we see websites with no clear hierarchy, where larger typography is used across the page and the viewer’s eyes don’t know where to rest. Good websites provide fluid navigation experiences, and a key part of that is being clinical with what text deserves to jump out before the rest. For the visitor, this means having a clear, easy trail to follow, jumping from one piece of content to the next like a series of stepping stones.
Avoid too much variation
Realistically, a webpage should not have more than 4 different fonts displayed. Any more than this will simply clutter the page and confuse the viewer. Some of the sleekest websites employ only 2, with one font used for body text and another for headings. Experiment with different combinations to find out which produces the most enticing visual effect.
Similarly, colour formatting should be employed sparingly. Too much variation in text colouring will put off a viewer, as they don’t see a clear point of entry. As mentioned above, well-structured websites present their content in an order of importance, granting the viewer a clear path to take through the page. Colour can add signals along this path, but should be kept in check as it can all-too easily jumble the visitor’s first impression.
An often-overlooked element of visual design, typography contributes a huge amount to the overall impression of a website. The text itself is crucial, but viewers won’t interpret it immediately, and so the font is perhaps the first thing a viewer will truly notice. Alan Jenkins of web design agency
Back to blog home