As website and digital marketing professionals, matching typography and colours is in our daily routine. When it comes to design, we have to make sure that all our work is neat, readable, adheres to the clients’ brand guidelines and most importantly, aesthetically beautiful before sending them to the client. We try our best to make sure the designs are ready-to-go masterpieces, and don’t look like rough drafts.
Importance of Good Typography
Typography is an essential component in design. Firstly, it brings out the brand identity. For example, a professional academic website would not be compatible with a cursive font that probably does not match the brand identity. We need to use fonts that look official and readable. On the other hand, a gaming website will require a futuristic and techno typeface. Using sans-serif or serif itself will make the website look very boring.
Secondly, typography determines the readability and clarity of the entire website. Without the right typography, the website visitors will feel uncomfortable while browsing the website and as a result will increase the bounce rate of the website.
Typography is also used in showing emphasis in headings. You only have 3 seconds to catch the visitor’s attention before they move on to navigate other websites. You need to make sure they are able to find the key points of the website and digest them within a few seconds. Therefore, adding emphasis on important key points is very important.
Some important things to consider about typography can be seen through our work below.
Thick vs Thin Fonts
We recently revamped the website for our client, RUMC. It is a website for medical university students and parents to get more information about their courses. They chose Poppins as the typeface for their brand. It is modern, clean and can create minimal design.
Poppins come in many weights. We need to make sure the weights we used throughout the website is readable and at the same time don’t make the website look too cramped.
Poppins SemiBold & Poppins Regular
Poppins Regular & Poppins Light
We went live with the Poppins Regular & Poppins Light combination, because the other combination looks too heavy. The lighter font feels cleaner and easier on the eyes when we read.
What is the right Line Height for websites?
Another thing I would like to highlight is the space between each line. When we are building text-heavy websites, it is very important to set the right line height for the content. It will affect the reader’s mood.
Here are some examples from one of the blogs we have written for our client, Saffron Store.
We set the line-height to 1.6 in this website. 1 is too cramped and the readers will eventually give up reading after a few lines. Even though 2 is nice to read, but it will make the website too long and the readers will need to keep scrolling while reading to reach the end. I personally like to set between 1.2 – 1.6, depending on the amount of text on the website and the font we use.
How to pick the right Font Combinations?
For a parenting blog and e-commerce website that sells educational materials like Dumond Education, we don’t want the typography to be too formal. We think it should have a more fun combination of font so that the visitors will feel a fun and inviting mood when reading.
Heading font: Chicken Pie, Paragraph font: Century Gothic
Heading font: Century Gothic, Paragraph font: Century Gothic
We have used Chicken Pie as the heading and Century Gothic for the content to enhance the brand. We avoided using just one font throughout the entire website. Don’t you think it would look like a template design?
We want all our website design for our clients to be customised to their brand and will leave an impression for its visitors.
What is the right Font Size for your website?
When designing a website, we want to have a balance between the font size and amount of space we have throughout the website. If we make the font size too big, not only it will take up more space, it will also be hard to read because it will increase the lines you need to read and your eyes will need to keep shifting back and forth.
Normal font size
Large font size
Let’s take the LPR website as an example. If we had made the font size too big, it would have broken the heading and paragraphs into more lines. Even though it doesn’t affect scrolling, the text will take up too much space and it will not be aesthetically nice to look at. The text content wouldn’t have been balanced because the heading will look too huge.
Having larger text doesn’t mean it’s more readable. Sometimes it strains the readers’ eyes more when you give them too many lines to read.
Cater your website to Dyslexics
Not many people know about this, but we have learnt this recently when building a website for a new client, Posity, that people with dyslexia have difficulty in reading. We can help people with this reading disorder to be able to read better by giving them an option to switch to dyslexic font. Dyslexic font is a unique typeface that uses thicker lines in some parts of the letters and slightly slanted.
Font: Open Dyslexic
When we have website visitors with special needs, we need to always be aware of the font and the colours we use. We can’t have too little contrast between the text and the background. It can be very challenging for some people. The text should also be big enough to cater to people with low vision or vision impairment. Better yet, you can provide them an option to increase the font size for the entire website.
Every website is different
You can’t use the same typeface for every website. Every website is catered for different target audiences and it needs to have its own identity. Read about the differences between template design vs custom design websites.
Before you design the website, make sure you identify its target audience and the purpose of the website. Make sure you go through all the content first and break content into different sections when needed, to ensure that the web page is not too overwhelming.
Nowadays, there are many online tools that will make matching fonts a lot easier. You can refer to my list below to pick the right font for your next website: