You’ve put so much work into developing the content that makes up a website, and now it’s time to put on the finishing touches. That includes choosing the typography that represents your client, the site, the products, or the service in the best light.
There are many different factors to consider when you’re setting up the typography for a website.
Some things to think about are :
- How the purpose affects the style, tone, and mood (font choice/color/contrast)
- How to approach color and contrast
- How to approach sizing and spacing
We’ll discuss each of these three topics in detail below, to help you deliver a stunning website experience.
How Can Typography Reflect The Purpose of The Site?
This is the first question that needs to be answered before you even begin. Every design choice has to support the purpose of the site. The style, tone, and mood of the site can be conveyed through the font choice.
If the purpose of the site is to deliver information, then you need to choose an easily readable font as the main font type.
If the purpose is to influence potential customers to complete a purchase, then the fonts should be directly related to the aesthetic that’s been established for the brand.
The purpose of the site you’re designing might not be either of these. If that’s the case, then ask yourself what style of font matches the brand the best.
Font Number Tip
Designers usually recommend using a maximum of two different fonts on a site, as more than two can become distracting for users. If you do choose to use several fonts, make sure at least two are in the same family (e.g., Arial and Arial Narrow).
Font Choice Tip
Cursive fonts are beautiful and look stunning, but should be reserved for more formal purposes. Spend time researching the best fonts for readability, and experiment with them in the context of the site’s overall design.
What Font Colors Should You Use?
Color palette is one of the most important choices a designer can make when building a website. However, when it comes to font colors, there’s really not that much choice. The best font colors are all about contrast and readability.
If you choose fonts that are too light and layer them over a white background, the user experience is going to suffer. It’s the same situation when you choose fonts that are dark and layer them on a black background.
Avoid this mistake by using high-contrast, easily readable font colors whenever possible. Stay true to the brand’s aesthetic, but never let font colors get in the way of the user’s experience.
Font Color Tip
Black text on a white screen is very easy to read, as is the reverse. As a default, go with this combination and only stray from it in places where a different color combination would promote the purpose of the site.
What Font Sizes and Spacing Should You Use?
Readability is your top priority when it comes to your typography choices. Part of that is the font size and spacing.
First, think about how long the lines are on the website. If they are too long – much longer than 60 characters – then it might be overwhelming for the user.
On the other hand, lines that are too narrow (between 0 and 40 characters) are also hard on the user’s eyes. Aim for about 60 characters per line for an easy reading experience.
When it comes to the mobile reading experience, make sure the site is designed responsively so that lines are limited to 30-40 characters.
Next, you should think about the spacing between the lines, also known as the leading. The leading (space) should be about 30% more than the character height for good readability – not too much or too little space in between the lines.
Font Size Pro Tip
Don’t determine the font size until after you’ve chosen the font type, as font type will have an effect on leading. Extensively test the readability of the site before launch. Experiment with different sizes and leading on both desktop and mobile. Spend time figuring out what the best combination is.
In Conclusion
The number of fonts, font type, color, size, and spacing are all different factors that require thought, time, and testing before site launch. Font choice majorly impacts the user’s perception of a brand.
When web designers choose readable fonts, they improve the user’s experience and increase brand trust. Take the time to experiment with different fonts before launching the site and make your client happy.