Every business owner knows the importance of a clear, properly designed and well-maintained website. In this day and age, if you fail to give your customers a website what’ll truly impress them, you will lose them much faster than it took you to gain their trust.
Unfortunately, most entrepreneurs do put in the effort and hire designers who are good with development, they often overlook one crucial feature – typeface.
From the font style you use, to the size of the text that each of your inner website pages have, this is one of the things which will be the deciding factor in whether or not your clients stay, interacts and finally converts.
The truth is that though fonts don’t really seem that impactful, they have the power to take your business high above or down under. It’s simple really, if your website visitor is unwilling or unable to read the content that you have published, your message won’t go through to them and hence, you won’t be able to convert. Several researches have shown that the type of font-faces used on a website effect not only readability but mood, user experience and even the perceived article length. This is why it is essential that your designer understands the difference between just creating a website with a whole lot of content on it and developing one which has a pleasing and impactful design that improves the reader’s mood.
“Type is a beautiful group of letters, not a group of beautiful letters.”
When you think about fonts, what’s the first thing that comes into your mind? If you are like most people who don’t yet understand their importance, you’re probably thinking of typefaces like Calibri, Comic Sans, Arial, Times New Roman and others. However, what you need to know is that these are just the basics. When talking about typography which needs to implemented on your website, you don’t just need to consider the typefaces, but their sizes, colors, kerning and spacing as well.
In this article, our goal is to not only tell you about the impact of important features of fonts, but also to give you practical suggestions which you can use to increase your own website’s conversion rates. So, gear up with a pencil and notepad because this is the kind of information you don’t want to miss out on.
If you have read a few articles on fonts and typography, you know that there are several typefaces which are deemed worthy of online publishing. While some agree that Georgia brings in the most results, others think Baskerville takes home the winning glory. But before we start to talk about that, let’s discuss the overall impact of typefaces on your site’s branding. Here’s the thing; if your content is hard to read because the letters are too close together or the size is too small, then they will either leave immediately or try to read for a few more seconds and eventually leave if they still find it difficult. Even if you do have very loyal customers who took their time and actually read the entire copy, they will remember that it took them too long and you’ll end up losing them.
The typeface(s) you choose for your website is crucial because it will make the entire process of reading, understanding and comprehending your message effortless. If you select font which agrees with your readers, their attention will remain on the information you are providing and not how long it took to read.
Practical Tip: Not every font will work for every website. Fonts have different personalities and the one you decide on depends entirely on your business, the kind of customers you cater to and the message you want to portray. The best thing to do would be to research extensively and look at the typefaces which are used by others in the same industry. Try and test out several types on different platforms so you know you are making the right decision. Remember, choosing the appropriate font will take some time but it’ll all be worth it when you see your conversion rates increase.
When you talk about the size of your font, one of the main concerns you should have is that of readability. Readability becomes so much more important because you want to make certain that your message comes across. Even if your font choice isn’t perfect, the size proper size will save you because at least the visitor won’t need to strain their eyes in order read the content you are presenting. If you have the right font size, your customers will be a lot more likely to read your message, interact and even spread the word. When you are able to communicate better with your customers, your branding will be effected positively and this in turn will increase the reputation of your company.
Practical Tip: The size you choose your font to be presented in depends on the design context of the website. While a business card may require very small size, an event poster will require a much larger one. But because we are specifically talking about website design, you will need to consider if you are publishing for mobile devices or general screens. As a rule of thumb, experts recommend that you use from 10px to 14px for the body content and 16px to 20px for headings or titles. For best results, you can run a practice check on the sizes that feel right to you and then adjust accordingly if they don’t seem to perform well. Moreover, if you are catering to different screen sizes (which you should), make sure the font is also doing well when the size is reduced on mobile devices.
If you want to get your message across to your visitors in the best possible way, you won’t just need to consider the word selection but how it is presented as well. Now even though the font color may not seem like such a big deal, it is something that has a big impact, especially if you have a particularly chirpy website. Color psychology is an entire area of study and you can learn quite a lot from it. However, when implementing color, especially in fonts, remember not to go overboard because that’ll just end up looking funny. The colors that you choose should not only enhance the core values of your business but also bring a boost to the underlying personality that customers connect with. If you end up choosing the wrong color for your font, they will work against you and your business.
Another feature worth mentioning here is contrast. The contrast of your text or page is the difference in darkness which is present between the background and text. Though you don’t want to use old techniques like putting red text on green background, you should make sure that good contrast is present between the text and background so readability is increased.
Practical Tip: First, before you decide on the font color, you need to think very carefully about the colors and font that should be or has already been integrated into your brand and its logo. For example, when you think of Coca-Cola, you probably conjure up the very distinctive curly font along with the red color. When choosing the color, experts recommend that you think of it like coloring a room of your house. If you want your visitors to feel warm and cozy while reading the blog, use dull reds and oranges as these are meant to relax and calm the senses. But again, remember not to go overboard because most content looks good and readable in black, depending on the background color.
The headings you use for your content is extremely crucial not only in terms of the actual words but how it is presented as well. Several researches have shown that unless you use catchy and attention-grabbing headlines, your visitors will move on and look for something a little more interesting to read. There are particular patterns to how humans read the web and through this you’ll find out that most content is simply scanned through. So, if you aren’t grabbing your visitor’s attention with the heading, their chances of reading will go down even further. Now keep in mind that both the font and color you use for your heading will decide whether or not your visitor wants to read it. So, though you don’t want to start using Comic Sans simply to grab attention, you should keep it readable.
Practical Tip: If you are pairing fonts (using one for the headline and the other for the main content), make sure they actually look good together. Pairing can sometimes be tricky because you need to ensure that most of the elements of the fonts match so they don’t look very different from each other. In such a case, the headline font needs to complement the body text. On the other hand, if you are using the same typeface, you can experiment with varying sizes and line spacing to enhance the heading. The same typeface won’t just provide visual harmony for your reader, but will also reduce the number of fonts which need to loaded, hence boosting overall load-time and performance.
Most people who are making a website will consider the font, size, color and contrast of the text used. However, what they miss out on is the line length. Line length is responsible for increasing or decreasing overall readability and refers to the number of words or characters that are present in each horizontal line. What effects the readability is the shortness or lengthiness of the sentences. If the font you choose makes lines appear too long, your visitor’s eyes will need to travel a great distance, which will discourage their reading as it will take a lot of effort. On the other hand, if the lines are too short, the flow of sentences will break and the visitor will end up losing interest.
Practical Tip: One theory which was proposed by Usability Institute Baymard is that you should choose a font which uses 50-75 characters (spaces included) per line as this is gives optimal readability. You can also use the Golden Ratio Typography Calculator to determine the perfect line length depending on the screen that is being used to read the content.
According to Wikipedia, ‘Kerning is the process of adjusting the spacing between characters in a proportional font, usually to achieve a visually pleasing result.’ If you are using a good font, it will be well-kerned and the space between each pair of characters will be similar. If you have a designer who is setting the typeface in a graphic program like Photoshop, he’ll have the ability to change the space between the letters and make adjustments until the font and kerning looks perfect. Not focusing on the kerning will cost you because it is often the single biggest thing which distinguishes professional work from one that has been done by amateurs or wannabe designers.
Practical Tip: The amount of space that you have between each letter needs to be equal if you want your website to look professional. If you are designing a typeface, remember to integrate kerning because readability will increase if there is spatial continuity between the letters. On the other hand, if you are using the fonts which already exists, you don’t need to worry about this because all these fonts will contain information about the spacing.
For business owners who want to improve their website branding and bring in more customers, a crucial aspect to remember is to use typefaces that complement the copy. If you are doing things right, it’ll have an effect on your reader’s emotion, mood and action as well. This is in turn will make it more likely for them to convert into a loyal customer. Remember that one of the best ways to test the font, its size, color etc. is to test run it and see what the results bring in. Also, give this entire process some time and your undivided attention because if you want perfection, you’ll need to work for it.
In the end, I leave you with this inspirational quote from Steve Jobs, who is primarily responsible for why we pay so much attention to fonts today.
“I decided to take a calligraphy class to learn how-to (learn calligraphy). I learned about Serif and Sans-Serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can never capture.”