Choosing the right fonts for a website is crucial for not just aesthetics but for function and search engine optimization as well. One of the most common issues I see come up on a Google PageSpeed test is that fonts are set to small. When visiting sites, seeing fonts over used or used inconsistently is another common occurrence. A lot of thought can go into it and still not address all the possible issues that may arise. The extra effort is not always needed though, as a plan to share with you my strategy for simplifying the entire selection process.
Font Sourcing
The most common font request I get from design clients is Calibri, hands down. Anyone who ever used a Microsoft Office app knows this one best. What they often do not know is that Calibri and many other popular fonts are not free and may require a paid license to use in your own websites and apps. The font then needs to be installed and may not even render on the site due to the browser, device, or settings used by visitors. Not only did they pay for a license, not everyone may even see it and who knows what fonts are getting loaded in its place.
This is why I will recommend using Google Fonts as the source. Most people will have these fonts already downloaded or in their cache just from viewing other websites that use them. And the best part, no need to worry about license fees. This means they are included in most web building tools as well. If you are needing to connect to Google Fonts manually, simply add the following line in your site's head section:
<link href="https://fonts.googleapis.com/css2?family=Font+Name" rel="stylesheet">Simply replace "Font+Name" with the font of your choice. Any space in the name should be replaced with the plus sign (+). Additional fonts can be added by placing the pipe character (|) between each of the names as such:
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans|Roboto|Tinos|DM+Serif+Text" rel="stylesheet">In this example we are loading four font families into the website, Fira Sans, Roboto, Tinos, and DM Serif Text. For additional ways of connecting to Google Fonts, and for more advanced options, I do recommend the documentation pages provided by Google.
What Fonts to Use Where
Google Fonts has four "Classifications" it will organize fonts into, which I recommend ignoring out right. These fonts have roles they will play, but the primary purpose of text on a website is to be read. With this in mind, we want to choose fonts that will be easy to read, and simple in design. We will want to turn our focus to the "Decorative Stoke" section of "Serif", "Slab Serif", and "Sans Serif".
Serifs are often referred to as the "little feet" added to letters, small lines usually on the bottom of letters. These lines are meant to help with the overall flow by directing the reader along. Slab serif is similar; however, these small lines are more like blocks and squares. Much bolder than normal serifs, these can be good for catching the eye immediately, especially when the need to direct readers is not as much of a priority. This makes both these types of fonts great for headlines, titles, and the like. While the normal serif can still be good for body and paragraph text, the slab serif fonts are not well purposed for this type of content. That is where the sans serif fonts come in.
Sans serif fonts are just as the name implies, lacking in those lines found in serif fonts. They have a much cleaner, more minimal appearance that also helps the overall look of a site appear more modern. The omission of these additional lines looks better on digital screens or in a pixel format. Artifacts or distortions are close to non-existent with this style of font. This makes sans serif fonts and excellent choice for body, paragraph, or any other larger block of text. This makes the text easier to read and visitors to the site moving along and obtain the information they are looking for faster.
How Many Different Fonts Are Needed?
Not many. Our strategic goal is to keep this process simple and to maintain consistency. The few fonts we have in the mix, the easier that is going to be. Keeping the number to three or four is usually enough to cover an entire site. First a good serif font to use for titles, headlines, slogans, or anything else that you want to catch attention but where you do not need to say a lot. Second will a sans serif font for those larger text blocks and paragraphs, where people will be doing the most reading.
A font to be used for button and navigation labels should be chosen as well. I find the slab serif fonts can look good here since it can help guide site visitors to things like navigation and site functions. If space is an issue, serif fonts are fine to use here as well, and again, can help keep the site looking modern. An additional sans serif font is good to have for things like form labels, comments, and other text that may be required but do not need to distract from the other more featured site content.
Strategy Summary
The process of choosing fonts for website design is a key step that does not have to be overly difficult. While the appeal of popular fonts like Calibri is undeniable, it is essential to consider the practicalities of font licensing and compatibility across different browsers and devices. Taking advantage of Google Fonts as a source simplifies this process significantly, offering a range of free, easily accessible fonts that enhance user experience and website performance. Limiting the selection to three or four fonts ensures a consistent, and visually appealing website that caters to the needs of its visitors while maintaining ease of navigation and readability.