There’s no sure way to quantify all of the different types of fonts available for website designers. Nearly every day, there’s a new typeface showing up in my inbox or my Twitter feed. But no matter how beautiful one of these typefaces is, it doesn’t necessarily make it right for designing a website.
To choose the perfect font for a website, you have to consider a number of things such as the design purpose, compatibility, and load times. In this post, we have put together 7 essential tips to help you choose and use the ideal web font for your web design project.
1. Focus on the Fundamentals First
When it comes to most typography projects, you start with the fundamentals, and working with web fonts is not different.
Serif vs. San Serif: there are so many other choices and types of typeface categories, but when it comes web design, every project is based on one of these options. One of the most dominant choice among these is the Sans serif typeface.
Kerning, tracking and Leading: the space that surrounds text is ideally as important as the typeface itself. The space between letter pair is referred to as the kerning, while the space between a group of characters is called tracking. Leading is the space between the line of text, also referred to as the line height.
Readability: When working with text meant for a website, the number of characters contained in each line is very important. You have to think about the size of the screen where the text will appear, and focus on making the text easy to read.
Hyphenation: the general rule is; just don’t use hyphens. They make a mess of the text on the screen, and reduce the readability.
Alignment and Justification: this is most applicable to large volumes of text, and determines how well the text will align on the screen, and whether the block of text will be fully justified or have rugged edges.
Contrast: Regardless of what typeface you choose, if there isn’t enough contrast between the text and the background, it won’t be readable. The most important elements that determine contrast are size, color, stroke weight, and space.
Number of Type Faces: Don’t use more than 3 typefaces, unless there’s a really good reason to.
2. Consider the Compatibility
Web browsers on all platforms are always changing and getting updates, and this makes web typography quite difficult to master. As such, you want to choose a typeface that will be compatible with all the modern web interfaces used on both mobile and desktop devices.
That sounds easy, right? Well, it may take some testing across multiple devices to find something that will work seamlessly across the platforms. You will be better off sticking to the font family designed for the web, or using the different options from the @font-face rule or Google fonts.
3. Consider Using a Service
Web Fonts: Most web designers prefer to use a web font service such as Google Fonts. It’s actually a great idea and can make a lot of the technical issues people face easy to overcome. Besides Google, which is perhaps the most popular option, there are a number of other free font choices. Although the Google Fonts service is free of charge, the pricing tiers of other options vary from free to more expensive tiers.
Some of these options include:
- Adobe Typekit
- Webtype
- Fonts.com
- Fontspring
Each of these services comes with thousands of font options, and these are easy to use. The great thing about any of these options is that they provide an expansive library without the need to spend a lot of money on individual fonts. The major shortcoming is that the typefaces are only available for use online and not with printed projects.
4. Consider the Tone and Message
Sometimes, font selection usually comes as an afterthought. However, if you start with determining the type options first, things will come together much easier. You then need to think about how the text plays in with the rest of the design elements like color and images.
Of course, selecting the ideal font will most likely put your brain into a visual overload, considering all the available choices. It will be much easier for you to navigate through all the font clutter when you already have an idea of exactly what you are looking for before you start.
It’s important to make sure that the typeface you choose matches the message and the tone of the project you are working on. Below are some of the questions that can help you map it out:
- Is the project casual or formal?
- Will the typeface be for small text or large text?
- Should the text be lighter or bolder?
- How will the typeface match the color and images of the site?
- Is the mood of lettering in line with the words being read?
5. Look at the Suggestions
Google Fonts essentially lets you look at different font combinations, and makes suggestions on font combination. Don’t worry, there is no shame in using any of these options. Keep in mind that the Adobe Typekit library also helps you choose typefaces based on how you intend to use them. For guidance, take a look at the available tools on the right side of the screen.
Font pairing is quite difficult, and is not a strong suit for many developers. Getting the right help is ok, but be wary of overusing font combinations. Keep in mind the basic principle of font pairing; look for letterforms that are similar in terms of stroke, mood, and x-height. Think about the slant and shape of the letters, and go for the fonts with similar outlines. It’s always a good idea to mix and match styles, and to choose a sans serif and a novelty typeface or a serif and sans serif pair.
6. Load Times are Vital
When a font takes too long to load, just leave it and look for another option. Many users today don’t have the patience to wait for a slow website to load. Regardless of how awesome the typeface is, it has to load in near-lightning speed for it to be effective.
Most services allow users to test a typeface for speed, including Google. Also think about more ways to keep the load times low. Such considerations include using a limited number of typefaces, only choose the languages that you intend to use with the font, and only choose the styles you plan to use.
7. It’s OK to be Choosy
You don’t have to use Arial, Helvetica, or Droid Sans for the web typography. Take the time to choose the ideal font palette for you. There are plenty of great free fonts out there, as well as paid ones.
Typewolf is an incredible resource if you want to avoid the popular fonts. It ranks among the top 10 most popular options in a number of categories – sans serif, serif, monospaced, slab serif, etc. it also provides fun lists of great alternative to the popular fonts, such as the ones mentioned above.
