When talking about type, we often hear the words typeface and font. What is the difference? A typeface is a certain design of type, such as Helvetica. It consists of a collection of fonts. A font is a specific variation of a typeface, for example Helvetica italics.
The hunt for ‘just the right’ font will sound unfamiliar to most, but type can profoundly impact not only how your user experiences your website but also how they interpret your brand. In everyday life, poorly selected typefaces can be the equivalent of hiring a salesperson who mumbles and uses inappropriate slang; your potential customers will struggle to make out the message and it will be delivered in completely the wrong tone.
Below is a guide of how we select the right fonts for your brand and website and how we keep you and your visitors’ user experience enjoyable and ‘mumble-free’.
Step 1: Selecting a style that fit your brand
TL;DR: We start by choosing a style of fonts that match your brand’s tone of voice. If you have a more serious business, we will go for fonts that reflect this, and stay clear of whimsical or relaxed fonts.
Our first step is to decide which style of typeface matches the tone of your brand.
We do this by looking at your brand’s tone of voice. Whilst finding a brand’s tone of voice can take some time, it can usually be summed up with just a few words or attributes.
- Is your brand more formal or informal?
- More professional or relaxed?
- Serious or humorous?
- Reserved or warm?
- Mature or youthful?
With all these attributes in mind, your brand’s type has to be chosen to match. Similar to a brand’s voice, type can convey different emotions.
If you are a more serious than humorous business, such as a law firm, a professional font would suit your business better.
Once we have settled on a style of typeface for your brand, we choose a number of potential fonts that carry and complement your brand’s tone. We then move on to step 2 where we narrow-down this selection.
Step 2: Choosing fonts that work well together
TL;DR: In step 2 we select a combination of up to 3 fonts from the ones identified in step 1. A good font combination can help convey hierarchy and guide a reader’s eye from the most to the least important content. We select a heading font that is strong and eye catching, and a body copy font that is legible and easy to read at a smaller size. An important rule is having good contrast between the heading and body copy font.
Now from the fonts chosen in step 1, we select a combination of fonts that work well with one another, as well as your brand. Together these fonts should help convey hierarchy of your content.
We come across type hierarchy daily without noticing it. Next time you are walking around town, pay attention to what catches your eye. Is it the large letters on the billboard, or the bold type on the poster in the window? Your eye being drawn there is no coincidence. The designer wanted you to look.
Type is used to catch the eye and have you reading the most important text first. From there your eye is guided to read the less important information, such as the the slogan or sub-heading and then the body copy and lastly the fine print.
When selecting font combinations for your website, a good rule of thumb is to select no more than 3 different fonts.
This usually is comprised of a heading font for your brand, a body copy font, and sometimes an extra one for introductory copy or subheadings.
To make things simple, we’ll stick to discussing heading and body copy fonts for now.
- A heading font should be eye catching. This font does not need to be legible at a small size. This is often known as a display font.
- A body copy font must be legible and easy to read at a smaller size.
We pick out a heading font that stands out and carries the name of your brand well. This is complemented with a body copy font that provides good contrast.
If the heading font is bold and heavy, we tend to choose a lighter, thinner body copy font. If your heading font is a serif typeface, we often chose a sans-serif font to contrast the sharp edges of the serif typeface.
Step 3: Ensuring fonts are legible and readable
TL;DR: Perfecting type on a website does not stop with choosing a good selection of fonts. We make further adjustments to how the type is displayed, ensuring 3 things: That the text is large enough to read from a comfortable distance from the screen, that the characters per line stays within the recommended amount and that the line height gives enough room to breathe.
With any type, it needs to be clear what words the letters form. There should be no struggling here. This is legibility.
Then we need to make sure visitors can easily and rather quickly read the body copy of your site. This is readability. If a visitor has to put effort into reading a few lines of your 100 line blog post, they won’t remain on your site for long.
Ensuring legibility and readability does not come down only to selecting a good font. Often further fine tuning is required and we may experiment with the letter spacing and line height.
We adhere to the following guidelines when designing the application of fonts to a website’s design:
- Body copy should be large enough to read whilst maintaining a comfortable distance from the screen. The recommended size is no smaller than 16px for a desktop screen, though this can vary slightly depending on the typeface.
- A line of text in a paragraph should be no shorter than 45 and no longer than 75 characters. This includes spaces. This works out to an average of about maximum 14 words per line. Long lines of text are tiring for the eyes to read.
- Just as important as line width is line height. The spacing between lines of text gives our eyes room to breathe. Too little, and they get frustrated and tired. Too much, and the eyes don’t know where to go to find the next line of text. A good guideline is to stick to a setting between 1.3 and 1.7 for line height. For a font set at 16px, the line height should be anything from 21 to 26px. Again, this depends on the typeface and weight.
If this all sounds a bit technical, don’t worry. Ensuring legibility and readability is our area of expertise and we’ll take care of the jargon for you.
Step 4: Loading the fonts onto your site
TL;DR: Fonts need to be added to your site in order to display them. The most common methods are self-hosting or via a third party host, such as Google Fonts. We prefer Google Fonts for its speed and Adobe Typekit for its speed and large variety of fonts. However, as we have no control over their servers, there is a (small) possibility of down-time. We select web safe fonts as a fall back option on the off chance that this does happen.
We have your fonts selected, your brand’s tone matched and your layout ready for your visitor’s eye. Now all that’s left is getting the fonts up and running on your website.
There are a number of options available for hosting fonts, but the two most common ones are:
- Self-hosting: Fonts are downloaded as files and stored on the server along with the rest of the website’s files.
- Third-party hosting: Fonts are hosted by an external font server, such as Google Fonts or Adobe Typekit. The website calls for and loads the fonts from this third party host when displaying the site.
Self-hosting
Self-hosting can offer a large variety when it comes to font selection as you are not limited to the fonts of your third party host. This method, however, can mean slower page load speed, potentially affecting search rankings.
There are many sources of self-hosted fonts, free and paid alike. Some paid sources include My Fonts and Font Shop and free sources include DaFont, Font Squirrel and 1000 Fonts.
Third Party Hosting
Third party hosts include Google Fonts and Adobe Typekit. Typekit is a paid service providing premium licensed fonts where Google provides fonts for free.
In both cases the fonts are served by the host’s API (Application Programming Interface). An API, simply put, is part of a server that receives requests and sends responses. The host’s API automatically compresses the font for a faster download, and once downloaded, the font is cached (saved) for up to a year in the visitor’s browser and reused by any other web page that uses the same API. This means that after visiting your site the first time, your site will load faster on the second visit as the fonts have already been downloaded and stored in your browser.
We at Both Birds prefer using both Google Fonts and Adobe Typekit for hosting our fonts. Google Fonts hosts fewer fonts than Typekit, but is often preferred, for a number of reasons. Most importantly, it’s slightly faster than Adobe Typekit. All Google Fonts are compressed and delivered over Google’s CDN (Content Delivery Network), making the file sizes small and instantly visible on the client’s side.
Additionally, we make sure only to load the needed font weights, font-styles (italics, etc) and characters (usually Latin) that your website needs.
Using a third party host is, as far as we have listed, only beneficial. However, there is a (very) small likelihood that their services can go down. The consequence being your carefully chosen fonts do not load on your site. We do make provisions for this on the off chance that is does happen, and select a web safe font as a fall back that will display whenever the default font can’t be called.
A web safe font is a font that comes preinstalled on many operating systems. You will most likely know them well. They include the typefaces Times New Roman, Helvetica and Arial.
Conclusion
Type treatment on a site is crucial. We take extra care in selecting the right fonts for you brand, making sure they match your brand’s tone of voice. Then we spend time further fine-tuning how they are incorporated into the design to ensure they’re legible and look great. In terms of hosting, we use the fastest methods possible, Google Fonts and Adobe Typekit, to host your carefully selected fonts. To decrease the font file size and speed up loading even more, we select only the characters and font styles your website will be using.