Most graphic designers are passionate about typography – to some, it’s an art. But for those outside of creative design, typography may seem to be of minor importance.
So you may be thinking, ‘why is typography important in web design?’. The answer is simple – words on your website matter. Typography holds the power to draw readers in, impacting on user perception, user experience and readability.
Think of your web pages as your digital shop window. And no, we’re not just talking about ecommerce web design here. In general, a web page should grab attention but also be clear, easy to read and effective enough to help guide the user to a goal – whether that be a conversion, link click or purchase.
Your choice of typography plays a huge role in whether or not that goal is completed. Use an uninspiring, standard font and your audience will get bored and bounce off your site. Use something too overwhelming and suddenly your website is too difficult to read, with important lines of text ignored and avoided. However, get it right and your website becomes a powerful tool.
Typography choice really is an important decision, and one that should be considered both visually and systematically. So how do you get it right?
How to use typography in web design
There are a number of ways to approach typography when it comes to web design. Consider the sheer number of available fonts, the font size, how they mix with your background colours and even the spacing and line height and it can quickly seem like a nightmare.
To make matters worse, web designers and graphic designers can sometimes disagree (as they do with the age old ‘Lorem Ipsum debate’). However, amidst the debate (and the growing number of fonts), a decision has to be made.
That’s why we’ve listed five key principles on how to best use typography in your web design, which will guide you through the process and help you reach your decision…
1. Approach web typography decisions systematically
In web design, every typographic decision needs to simultaneously accomplish a variety of results. Each headline that you create for your site not only needs to be easy to read and search engine friendly, but the chosen typeface should also fit in with your company brand guidelines.
That’s quite a lot of requirements for a headline and on some occasions, this can cause a problem. For example, styling and branding guidelines may require the designer to use a specific typeface and font, which cannot be used directly online. This is when a decision has to be made:
Do you move away from the given brand guidelines so you can achieve optimal search engine friendliness, which often asks for extended text?
- Do you use an image replacement solution to avoid the extra costs associated with complex responsive typography?
- Do you consider using sIFR (rich flash based dynamic font) that allows you to embed fonts into content presentation? In many cases, the myriad of goals web typography needs to serve will be conflicting with each other. With each web build project you need to prioritise and define which goals are more important than the others. Some clients will be more concerned with maintaining brand identity, and others will put search engine friendliness higher. When it comes to typographic decisions you need to focus on your goal. Different sites require different needs and there is never only one answer for each individual problem. It’s key for all teams to work in unison, analysing each of the strengths and weaknesses presented. The importance of font choice can’t be understated. Only when using a systematic approach can you truly find a solution that works for everyone, but more importantly, works for your website.
2. Utilise information hierarchy
When choosing typography it is important to define precedence. This includes the type size, colour, weight, case and whether you choose to use normal font or italics. All areas of font styles need to be considered as your choices will have an impact on how your web copy is perceived and therefore how your website performs.
Web users will also react differently depending on where copy is placed on your web pages. Type placed in the upper body of the page will be of more importance than type placed in a sidebar or on a footer. However, placing a larger size type in the sidebar will help draw attention. Note: always carefully balance your type in the main body text and sidebar areas based on how you want the user to digest the information that you are presenting to them.
3. Design for optimum flow
For a page to flow seamlessly, hierarchy is key. When the hierarchy on your web page is balanced, it helps users recognise the most important elements on a page as they are scrolling through. This, in turn, will help to create an effective user journey through your website – helping you reach goals on key pages. Other typographic issues such as copy spacing can also affect the page flow. White spacing, tracking, leading, indention, padding and margins are all key elements that help to form an effective page flow.
4. Maintain accessibility, readability and legibility alongside branding
If you want your website to stand out from the crowd, then it has to be visually stunning. And while that’s true, you must still consider accessibility and the general readability of your chosen font style. Does your branding consist of elaborate designs and eccentric fonts? If so, you may need to tone your design down slightly and find a style in line with user experience for your site. And if you’re unsure, ask yourself these simple questions.
Firstly, how legible is your chosen font? Can you make out all of the characters on your website with ease? Your website could hit a stumbling block should its visitors not be able to clearly read the characters displayed on screen. The goal is to make it as easy as possible, without straying too far away from your brand guidelines.
Aside from individual characters, you must also question how your copy is displayed across your entire web design. Your website will likely consist of various components – so be sure to check the legibility of your font style within all of those components. Don’t forget the different browser types too! When you’re happy with the legibility of your copy, be sure to test whether it renders the same across all web browsers.
Readability is key too. Think character spacing, alignment, paragraph spacing and line length – all important decisions that can aid the effectiveness of your website. Put simply, your chosen font should be easy-to-read without straining your eyes. If you’re struggling, then your website users will too. It’s key that your typography is accessible for those with visual impairments too. For us, when it comes to web design, we follow Google’s best practice guidelines on interface design and readability and accessibility.
And finally, with all of this in mind, please don’t forget about the responsiveness of your website. Your typography choices have an impact on all of the above and website responsiveness. Remember, what looks good on desktop may not carry the same impact on mobile. Sometimes, less really is more!
5. Don’t be afraid to experiment
By following the previous points, you should now know the key principles of web typography. However, with those in mind, don’t forget to be creative and experiment. Even if your brand operates in what’s known as a more conservative sector, typography can give your website (and brand) a huge lift. Just experiment with it and find something that works.
Taking inspiration from custom website designs helps by getting around mental blocks. Experimenting with what we believe to be wrong in website design. Playing with the possibilities by breaking the rules and a willingness to be wrong as part of the process to developing something that stands out.
As we mention above, it shouldn’t be over the top; just unique enough to be attention grabbing and set you apart from the competition.
Typography choice can help you unlock your website’s full potential. As a creative agency, we spend a lot of time considering typography throughout our web build projects.
And with these five key principles, you should now be one step closer to understanding how to use typography in your web design.
Have we missed any tips out? What has your experience been when using typography in web design?
Be sure to let us know by getting in touch or dropping us a message on social media. You can find us on Facebook, Twitter and Instagram.