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 that you'll need to consider in order to choose that desired font you’ve been looking for.
Choosing a font for your website is an important task that can majorly improve or spoil the level 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 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 completely different.
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 that you are looking for. By the end of this article, you will know how to make the right choices of a font for your website, even without having to turn into a stereotype 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”.
In 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.
After choosing adjectives that truly speak for our business, we can start creating the “mood board” to help us find our direction and focus on our design. We can use images, video, bits 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 Pizzaria 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 images that we’ll add to our “mood board”. We could try using black and white images that give us 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, to 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 roughly aged 20 years old, 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 might want to include bright colors and employ a clean modern design line. A font that would compliment the scheme and message, in this case, would probably be sans-serif, a clean and modern looking font.
The Differences Between the 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 big families of fonts that we can identify easily:
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 official fonts (they were among the very first fonts to be used in design, in the world), and are quite readable. We could use them for headlines and for body text.
Black lettering — a specific family of very ancient style of letters. They’re considered to be a tough, heavy and gothic font. The letters in this font family are pretty difficult to read, even though popular books have appeared entirely in these fonts (antique printed editions of the New Testament for example). These days, we avoid using this font for body text, and use it in headlines and short lines of text instead.
Slab-serif — this family has a thick wide serif, making them look chunky and less readable. Currently, these fonts tend to be associated with the Hipster fashion or scene, and are considered a modern version of the serif font families. 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 could be used for body text. However, reading long texts in a font made up 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 the lack of serifs it maintains a clear difference in characters’ height. Being a rounded font also helps Helvetica characters become more intelligible, making it a good choice for using in both titles and body text.
Handwriting (Handwritten) — These fonts are designed to simulate handwriting or cursive letters, and thus appear more flowing, and are considered more 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 pick, it is 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 3 types of font to our 3 types of content will leave our pages with no hierarchy or differentiation in format between texts, and looking very messy and confusing.
Choosing Fonts, Check List and Comparisons
After deciding on a clear message or emotion that we want to convey to our visitors through our website, and we’ve put together a “mood board” to help us visualize it, that is when it’s time to get busy with choosing fonts.
The amount 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, and they are 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 companies 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 different weights will give us more versatility, which could allow us to use a single font family to create a hierarchy between the different text blocks on the website.
After choosing a font or two, with different weights, we’ll want to check and see what they look like in responsive mode, and see if they are readable and work equally well in desktop and mobile views.
Again, the weight of a font also plays a part (not to be confused with font size). It is possible that a font in lightweight 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 be displayed 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 have discussed the main types of fonts and mentioned an important rule of thumb, when adding another font to our design it must maintain a harmony with the other fonts. The contrast between them should be felt, but it should not clash. Of course it is important that the font complements or expresses our ‘message’ or emotion. As I 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 pick for out paired fonts randomly.
When picking a font, it is important to check its performance. When we load 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 with the new font. If it is too slow — think of an alternative font.
Some will 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 our site in different browsers and make sure that it appears without displaying any system fonts.
System Font — Thinking Ahead
Despite all the preparations and experiments, problems will always come up. Therefore, it is considered best practice to choose a font that will continue the design line that we picked. 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 “family type” displayed on our site even in the event of unexpected faults.
Choosing the perfect font for our website it’s not an easy thing to do. There is a reason why typography is considered the “Top decile” of the design world. Only people with high levels of OCD can create really perfect fonts. But there is no reason to fear the process of choosing a font for a website, nor give it up 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 want to convey to your visitors and pick three adjective words that describe your business perfectly and will help you refine the message even more. Continue with creating a “mood board” the will open your mind and will give you a piece of information for the beginning of the journey for finding the perfect font.
Pick a group of optional fonts that you can compare between and lose the ones that are not working for you. Check the amount of weight each on has, their readability and pairing with other fonts. Don’t forget also to examine their performance and their capability to other browsers. At the end of this process, you will be left standing with only one font that fits perfectly, complimenting and completing the design.