Are You Choosing the Right Font for Your Website?
There is an art to choosing the right font to suit the tone and style of your website. Have you ever seen a website where the font choice just seemed off? On the other hand, there are times when a font seems to perfectly match the tone of the design. Your goal as a designer is to create a design that meshes so well that the font looks as though it was specifically created for the design and vice versa.
Fortunately, there are plenty of fonts from which to choose, or you can always design your own if that capability is in your design repertoire. Arial is the top font on the internet, used by about 616,190 sites, while Verdana comes in a distant second at 271,656. The reason is that Arial is a versatile font that works on most browsers. However, you don’t have to limit yourself to only the top fonts.
Many factors go into choosing the perfect font for your audience and your website. Here are six important elements to consider:
1. Serif or Sans Serif
You’ve probably heard the terms, but knowing the difference between these fonts is a bit more complicated. In a nutshell, a serif font has a tail on the edges of letters and sans serifs do not. Traditionally, serifs were used in print and not used for online designs. However, today’s serifs are sharper and translate better at lower resolutions — computer screens are also more advanced — so you can get by with using them, particularly for headlines.
Chattanooga Renaissance Fund uses a serif font, creating an Old-World look in a modern design. This works particularly well for this site, whose name has a historical connotation. Note how the serif font is used in some spots and not in others. This creates a nice contrast and break for the eyes, and also speaks to the modern elements in this site.
Not only do you need to choose a font that is visually pleasing to your site visitors and matches the tone of your overall brand, but you also need a font that is compatible with all the different web browsers out there. One way to make sure your font is compatible is to use fonts from Google Fonts or the @font-face rule. You should also test your planned fonts in as many browsers as possible. Be sure to also test for mobile device usage.
3. Loading Times
When you choose fonts for your website, you’ll also want to take the loading times of various fonts into consideration. For example, if you use multiple typefaces, you can bog down your site’s speed. Users cite loading time as one of the top reasons they abandon a site. A mobile web user gives just 6 to 10 seconds before bouncing away from a page that is slow to load. If you are uploading typefaces, you can choose only the elements you are using and also only the language of your target audience. This can reduce loading times as well.
ThirdLove’s website limits its font to a similar family, allowing the site to load quickly. Your server speed also impacts the speed at which your page loads, as well as other elements on the page. Limit the number of fonts and allow your site to load more quickly, and you shouldn’t run into any problems.
4. Readability Above All Else
First and foremost, your font should be readable on different screen sizes. With more and more people accessing the internet on their mobile devices, it is vital that whatever font you choose translates well to a smaller screen size and that all the text is easy to read in different sizes. Keep in mind that those with vision impairments may need to blow the font up to a larger size. Make sure the font you choose translates well in both small and large sizes. Fun fonts and scripts don’t always translate as well as sans serif fonts on smaller screens.
5. Font Emotions
Different types of fonts create various emotional responses. A flowery script font might make one think of weddings, youth and romance, while a bold font with hard edges will indicate power, masculinity and strength. Then, there are fonts that are rather neutral, and fonts that have a fun edge to them. Sometimes the font will have a description that indicates the emotion it evokes, but if not, you should be able to tell by tapping into the first thing you feel when you look at the font. If you still aren’t sure, ask others what the font makes them think of.
Look at the font used on Wing Tactical on the slider. It is a thick font with hard edges. This evokes a feeling of strength and power. Using the color black with the masculinity of the font creates an overall tone for the site. This goes well with the rest of the design on the page with bold, dark and masculine colors.
6. Font Contrast
When choosing the two or three fonts for your site, make sure that they have contrast so they are distinct from one another. At the same time, the fonts must complement one another. So, you likely wouldn’t use a script font with a bold, masculine font. However, you might use a bold, masculine font with a more neutral font. It is okay to combine serif and sans serif fonts as long as there is a distinction about where they are used — headline versus body, for example.
Sometimes you simply can’t tell if fonts are going to work together or with the overall message of a brand until you try them in the design. The overall effect should be visually pleasing and not take away from the other elements on the page. If anything jars you as a reader, then the fonts need to be adjusted. Fortunately, there are plenty of fonts from which to choose, so the options abound.