Serif, Sans-serif, Display…which font is the best fit for your website? We've put together a guide with all of the essential points to consider in order to choose that perfect font you’ve been looking for.
Choosing the best font for your website is an important task that can significantly improve, or, alternatively, spoil the design quality of your website in seconds. Let’s assume that you have a dignified lawyer firm website with a lot of text and images that were taken by a professional photographer. Everything looks AMAZING. But the font chosen for the headlines is Comic Sans.
Can we still take this firm seriously? Will visitors see this as a dignified firm? Not really. All The work that was invested in the photography and the content written has gone down the drain. That is probably the reason that choosing a font can be seen as a deterrent task. There are so many kinds of fonts in the world: serif, sans-serif, display…everything looks the same, right? Well, no. They are actually completely different to one another.
Unfortunately, very few of the people you know understand typography at a high enough level to help put you on the right path to choosing the best font.
So how do you choose the perfect font? Is there even such a thing? Well, yes. There is a perfect font out here that will fit your website like a glove. But how will I know which font that is? That’s a good question.
This is the reason why we’ve made this short guide with all the important points that you’ll need to check in order to choose that desired font you’re looking for. By the end of this article, you will know how to make the right choices when selecting a font for your website, even without having to turn into a stereotypical stuck-up typographer.
What Is the Message?
When we set out to design a website, the first thing we will want to understand is the message or the emotion that we want to convey to our visitors. If we are not sure what that message is, we can try to pick three or four words that we can use in a short line to describe the business in the best way possible. For example:
- “We are a formal, professional and respected real estate company.”
- “We are a young, crazy and hip startup company.”
- “We are a fun, childish and magical summer camp.”
When finding three words to describe our business, we better understand the message or the emotion that we want to convey, in a clear and simple way.
Once we’ve chosen adjectives that accurately describe our business, we can start creating the mood board to help us find our direction and focus of our design. We can use images, video, segments of text…whatever we want. Everything is relevant for this task. When our mood board is ready, we can start to see the design line that is right for our business and start our journey to find the perfect font for us.
Let’s say that we have a family business; a pizzeria with more than 30 years of experience. We could use words like “professional”, “traditional” and “family”. Using these words, we can start to grasp an idea of the types images that we’ll add to our “mood board”. We could try using black and white images that convey a vintage and nostalgic feeling. The colors that we select should be more stable, dark and heavy colors. To complete this look, we will probably pick a more serif, cursive or “script” fonts that are considered classic and traditional and that generate a sense of warmth and character.
Let’s explore another example, and say we are a startup for a new app on the market. With our target audience of 20 years olds (roughly), we will probably want our users to think of our company and product as a young, cool, and modern business. Our mood board should include modern imagery – perhaps invoking Instagram-style photos. We may want to include bright colors and employ a clean, modern design line. In this case, a font that would complement the scheme and messaging would probably be sans-serif – a clean and simplistic-looking font.
The Differences Between the Generic Font Families
How do we differentiate between the thousands of fonts out there in the world? Let’s try to create some order. There are a few generic font families that we can easily identify:
Serif — fonts that have a “serif” (the little ‘bump’ or ‘tail’ that appears at the end of the line that forms the letter). They are considered to be official fonts (they were among the very first fonts to be used in design, and in the world at large), and are quite readable. We can use them for headlines and for body text.
Black lettering — a specific generic family of a very ancient style of letters. They’re considered to be a tough, heavy and gothic font. Black lettering fonts are pretty difficult to read, even though popular books have been printed entirely in these fonts (antique printed editions of the New Testament, for example). Nowadays, we avoid using these fonts for body text, and use them for headlines and short lines of text instead.
Slab-serif — this generic font family has a thick wide serif, making them look chunky and less readable. Currently, these fonts tend to be associated with the hipster fashion style or scene, and are considered to be a modern version of serif fonts. We shouldn’t use them for body text, but we could definitely use them for headlines and short parts of text that we want to stand out.
Sans-serif — these fonts have no serif at all. While they are considered more modern, they can occasionally lack character. They can appear in countless variations: some more rounded, some more squared, some will be light, and some thick. Because there are so many styles for this category, we need to pay close attention to the selected font type and its visibility.
A geometric sans-serif font may seem to be very readable and can indeed be used for body text. However, reading long texts in a font comprised of characters that lack a difference in height could prove tiresome and difficult.
The reason for the popularity of the Helvetica font is that despite its lack of serifs, the font maintains a clear difference in character heights. Being a rounded font also helps Helvetica characters become more intelligible, making it a good choice for both titles and for body text.
Handwriting (Handwritten) — These fonts are designed to simulate handwriting or cursive letters, and thus appear as more flowing, and are considered to be personal and informal. As such, they are seldom seen as fonts for official or formal documents and designs. These fonts are also less readable, especially among non-native English speakers – making them inadequate for long blocks of text. Naturally, they are used mostly for headlines or short paragraphs of texts.
Decorative/Display — these fonts were made for a specific goal and have no design guideline by which to define or describe them. They can be seen in any shape or form (e.g. company logos, graffiti, etc.) and are used mainly for headlines, but rarely in anything else, as they weren’t designed to be used for long blocks of texts.
You can use this cheat-sheet that summarizes all the information:
What To Keep in Mind When Starting the Font Selection Process
Classic and official (suitable for texts and titles)
Gothic (mostly suitable for titles)
Hipster and modern (suitable for short titles and snippets)
Modern (can fit headings and sentences or body text, depending on font type)
Personal (suitable for short titles and short lines of text)
Has a specific purpose (suitable for dedicated titles or lines of text)
Regardless of the font you choose, it’s important to remember this rule of thumb:
Never use more than 3 types of font per project, unless you have a really good reason to.
This is because almost all forms of online written content are composed of three kinds of text categories:
- Body text
- Changing or dynamic text (e.g. descriptions of images or quotes)
Assigning more than three types of font to our three types of content will leave our pages with no hierarchy or differentiation in format between texts – looking very messy and confusing.
Choosing Fonts, Checklist and Comparisons
After deciding on a clear message or emotion that we want to convey to our visitors throughout our website, and putting together a mood board to help us visualize it – that is when it’s time to get busy with choosing fonts.
The number of fonts available online is probably immeasurable. Some of them are free, while some will cost a pretty penny. Two main companies currently dominate the world of fonts: Google and Adobe.
Google Fonts allows us to pick a free font from a library put together with some of the top typographers around the world.
Adobe Fonts allows us access to their library of fonts in exchange for membership to adobe cloud.
The major plus with these two resources is that all of the fonts they offer are checked and approved by typographers. All that’s left for us to do is download and use them. But what happens if we decide to download a font from another website, one that may not only work with professional typographers? Well, there are a few things that we need to pay attention to.
Try to pick fonts that have at least three different weights (most commonly appear as “normal”, “bold” and “light” or “black”). The various weights will give us more versatility, which can allow us to use a single font family in order to create a hierarchy between the different text blocks on the website.
After choosing a font or two, including their different weights, we’ll want to check and see what they look like in responsive mode, and see if they are readable and work well in both desktop and mobile views.
Again, the weight of a font also plays a part (not to be confused with font size). It’s possible that a lightweight font style may not look as good in mobile as it would in desktop view. This is why we should choose a heavier weight for fonts to render on mobile screens.
Luckily, we’ve already selected a font with multiple weights – so we don’t need to give up on our chosen font that quickly!
Matching between fonts is an art unto itself. Although we’ve discussed the main types of fonts and mentioned an important rule of thumb, it’s crucial to keep in mind that when adding another font to our design, it must be harmonious with the other fonts. The contrast between them should be felt, but it should not clash. Of course, it’s important that the font complements or expresses our ‘message’ or emotion. As we said before -this is an art.
Some may feel that pairing fonts is beyond their ability. Perhaps others consider it to be too much like hard work. Whatever the case, Google Fonts has a way to do this for us. Once we’ve selected our fonts, Google fonts offers us font options to pair with our font. We could also check out MailChimp’s guide to font pairing, or use this engine to choose from options of randomly-paired fonts.
When choosing a font, it is important to check its performance. When we upload the font to our website, all we need to choose is the specific weight to use. There is no need to load dozens of weights, even if we got them for free. After that, we’ll check the loading time of the website when it uses the new font. If the loading time is too slow — think of an alternative font to use.
Some may point out that this is a painful and annoying subject. Some browsers just don’t read certain types of fonts. So when choosing a font, it is advisable to check your site in different browsers and make sure that it appears as you intended, without displaying any system fonts.
System Font — Thinking Ahead
Despite all the preparations and experiments, problems will always come up. Therefore, it is considered a best practice to choose a font that will maintain the design style that we’ve chosen. For example, if we selected a Serif font as the “Perfect Font”, we need to select a similar Serif font that will appear in case the original font doesn’t load. This will allow us to control the “font family” displayed on our site – even in the event of unexpected faults.
Choosing the perfect font for our website is not an easy thing to do. There is a reason why typography is considered to be the “top decile” of the design world. Only super pedantic people can create really perfect fonts. But there is no reason to fear the process of choosing a font for a website, nor give up on it right from the beginning. If you work with the simple rules that we presented in this article, the process will be simple, short, and friendly.
Pay attention to the message or emotion that you seek to convey to your visitors – and select three adjectives that describe your business perfectly and will help you refine the message even more. Continue by creating a mood board that will get your creating juices flowing and give you a piece of insight for the beginning of the journey to find the perfect font.
Compile a shortlist of optional fonts that you can compare between and lose the ones that are not working for you. Check the amount of weight each one has, as well as their readability and pairing with other fonts. Don’t forget to assess their performance and their compatibility with other browsers. At the end of this process, you will be left standing with only one font that fits perfectly – complementing and completing your website’s design.