Text in a webpage seems simple enough, right? Simply choose a cool font from a drop-down menu, type up your content and you’re all set! Box ticked, done and dusted. If only it were that simple.
Typography plays a crucial role in web design, and even small choices you make in regard to your text can have a huge impact on the performance of your website. If you don’t believe us, take a moment to consider this statistic:
More than 95% of the information on the internet is in written text form.
So, if this is the form people expect to get their information online – it makes sense to consider your typography choices! When it comes to design, every choice you make matters – even your text. However, if you haven’t considered it before and how to use it to your advantage it can be tough to know where to start.
Not to worry, we are here to help! Here is a guide on the things you need to consider about the typography in your web design.
Let’s start with one of the first, and arguably most important choices you need to make – your font. Simply open the drop-down menu of font options and you’ll find a crazy number of amazing fonts that will jump out at you. Choosing one of the most intricate, best looking, or nicely designed fonts seems like a no brainer but we must urge you against this.
The point of your website is to give people information about your product or business, but how can you expect potential customers to get these details if they can’t read what you’ve written?
Whilst more popular fonts like Times New Roman or Arial might seem a bit boring, they are the right fonts to choose. Other great options to consider are:
These fonts are clear to read and will look professional in any context, without being bland. Whichever font you choose, make sure to keep it uniform across the entire site. If you must use a unique design, make sure it serves a purpose, such as branding or creating an immersive experience.
You also need to make sure you choose a font with clear letters. If your audience can’t tell the difference between an ‘i’ and an ‘l’ on your page, they won’t spend much time on it will they?
Another common mistake people make with typography is having too many fonts. A design that isn’t uniform can create a chaotic look and deter users from your site. If you insist on using multiple fonts, keep the following points in mind:
Now you’ve settled on a font, the next is making sure your body copy is easy to read. To achieve this, there are a number of factors you need to consider.
Let’s start with your text colour. You may think that a text bright colour will make it pop off the screen and grab your readers attention. While this may be true, this can be counterproductive. Your main priority instead should be to focus on a strong contrast. If you don’t get the ratio right, it can be hard to read.
For smaller text, you should at least have a ratio of 4.5:1 against your background.
For larger text, you should aim for a ratio of at least3:1 against your background.
Test your colour choices with real users on multiple devices to make sure you’ve got it right. We also strongly advise against text that is red or green and flashing text. The former will be hard to read for those who are colour blind and the latter will be hard to read for essentially everyone.
The next step is to consider your layout, mainly, your text spacing and line length.
When it comes to spacing, having lines too far apart will look disjointed. Lines that are too close together will make it difficult to read. In Typography, this spacing is referred to as leading. You should aim for a leading that is roughly 30% more than your character height.
The next thing to consider is your line length. This refers to the number of characters in each line of text. This may seem pedantic, but it plays a big role in readability. The general rule of thumb is 60 characters per line, however, this changes slightly depending on the device. Given that mobile devices are smaller, 30-40 characters per line may be more suitable.
After reading this article, you should have realised there is a lot more to typography than you may have initially thought. If you follow these tips, you’ll be able to ensure that your website not only looks great but is easy to read too!
