5 Facts About Fonts
When choosing fonts for your website, there is one main idea to keep in mind.
Readability
In this article, we will discuss 5 points about fonts that you should keep in mind when deciding on typography for your website.
1. Contrast
The first thing a website font must have is good contrast, meaning that it must stand out from the background. The maximum amount of contrast a font can have is black text on a white background (or conversely, white text on a black background). Everything in between will have varying levels of contrast.
One of the fads that I have seen far too much of in website design is the use of light grey font on a white or grey background. The intended effect is meant to look modern and artistic. The actual effect is that the text can very hard to read.
Here’s is an example of low contrast typography. While it is still readable, some viewers may have a hard time with it.
Easy to read:
The quick brown fox jumps over the lazy dog” is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
Difficult to read:
The quick brown fox jumps over the lazy dog” is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
2. Font Size
Another factor in website readability is the size of the font. Font that is too small can be difficult to read, especially for an older audience.
Here’s an example:
Easy to read:
The quick brown fox jumps over the lazy dog” is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
Difficult to read:
The quick brown fox jumps over the lazy dog” is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
3. Font Style
Staying with the idea of readability, the style of a font also needs to be taken into consideration. With thousands of fonts to choose from, it can be tempting to use fonts that look fancy. An example of this is script style fonts. These can look nice – even elegant at times, but they can also be difficult to read.
For example:
Easy to read:
The quick brown fox jumps over the lazy dog” is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
Difficult to read:
The quick brown fox jumps over the lazy dog” is an English-language pangram—a phrase that contains all of the letters of the alphabet. It is commonly used for touch-typing practice. It is also used to test typewriters and computer keyboards, show fonts, and other applications involving all of the letters in the English alphabet. Owing to its brevity and coherence, it has become widely known.
Just because you can use a font, doesn’t mean you should. Take some time to think about the typeface that you use. It should support your image and brand, but it also must be easily read.
4. Font Pairings
A general rule of thumb is to use one font for headings, and a complimentary font for paragraph text.
Knowing how to choose the correct font’s for your website can be a daunting task. There are, however, some online resources to help you out.
One of the best I’ve seen is fontpair.co. This website tool gives you some great font-pairing suggestions, and even allows to enter your own text so you can see exactly what your content will look like. We even use it at our agency when we need a little inspiration.
Often times a professionally designed website will use a serif font for headings and sans-serif font for paragraphs (or visa versa). That, of course, is not a hard and fast rule. On our agency website we use sans-serif fonts exclusively.
5. The 2 Font Rule
Generally speaking, a website should use no more than 2 font types – one font for headings and one for the main paragraph text. On some occasions, a third font can be introduced for the navigation, but this is generally not needed.
Introducing too many font types into your website can lead to a cluttered and disorganized look, and it can make it look less professional. It can also slow your website down, as this is another resource that your website has to retrieve and download.
To sum up, these are the top 5 strategies that we think you should keep in mind when deciding on font choices for your website.
What are your thoughts about website fonts? Let us know in the comments.