Fonts are Awesome but…

Published on: Jan 29, 2021|Categories: Web Design|

Fonts are awesome. Fonts can be evocative. There’s a font you associate with Hollywood and another you associate with Broadway. I love fonts!

There are an endless number of fonts you can use on the web these days. There are over 800 font families on Google Fonts alone. You can use Transfonter to convert a font on your computer to a web font. (I used Transfonter to convert “Capture It,” a TrueType font to use in the title and menu at The 40 & Over League).

You can overlay text over images and backgrounds. Using a bit of CSS (Cascading Style Sheets) code, you can add drop shadows and other effects to make this overlaid text more legible over complex background images. This means that except for your logo, you can, for the most part, use actual text throughout your web site instead of pictures of text.

Then there are those marvelous things called font icons, the most well-known of which is probably Font Awesome (FA). We have used a red-colored FA heart icon in our footer and others on our Bios page. You will even find a couple on this page. The most awesome aspect of these icon sets is that they are fully scalable just like a regular font. Unlike images, no matter how large or small you make them, you won’t get any jagged edges or pixelation. You can use Font Awesome through a CDN (Content Delivery Network) and just as with Google Fonts, you do not have to download and install them on your website.

So what’s not to like about fonts? Well, one of your primary goals when you produce text-based content for your website should be making sure that it is readable, and not just by Google’s spiders. Search engine spiders may not care how small a font size you have chosen for your website but your readers will. I think that 16 to 18px (I tend to use 18px) should be the smallest size you use for normal text that will be viewed on a desktop or laptop screen. If your website is responsive – and it should be! – you can use 14px for mobile devices.

There is a good reason why Helvetica and Open Sans are such popular fonts across the web. In the opinion of many, text blocks that are rendered in sans serif fonts are easier to read on your computer screen. However, not all sans serif fonts are made equal. One of the most disliked and reviled fonts on the web is Comic Sans. I know taste is subjective but…

<iframe width="560" height="315" src="https://www.youtube.com/embed/4X4f83C8ANg?rel=0" frameborder="0" allowfullscreen></iframe>

… let’s just say that I am not the only person who dislikes this font. Sadly, it’s not just in s’ birthday invitations that you get to see Comic Sans being used. You will find the font employed in smaller websites and even used as the default font for emails.

Yes, fonts are plentiful but remember that just because they are available doesn’t mean you have to use them all or even a half dozen different fonts on your website. I feel that generally, you can get away with using two or a maximum of three fonts on a page. Remember that you can apply different weights, colors or even use italics to add variety and emphasis to your text. You can Google to see what font combinations work well together. It’s better to use a serif font for your headers and a sans serif font for the body text than the other way around. I often just stick with sans serif fonts.
You do not ever want your website’s content to look like this:

Your kittens have been catnapped!
…but if you got a kick out of this “ransom” note, you can generate your own at Ransomizer.

I will wrap up with a pet peeve. I am not sure who decided that it was ever okay to justify paragraphs of text on the web. The added white space reduces readability and makes for ugly presentation. Also, I have read that your visitor is less likely to trust what you have to say if your text is justified.

So to recap:

  • Use actual text wherever possible on your website
  • Pick a large enough font size to make sure your content is easily readable
  • Pick fonts for their legibility. The Gutenberg Bible is gorgeous but today you would not want to use that font for large tracts of text
  • Font icons are cool. Use them. Of course, too much of a good thing can be a bad thing
  • Do not use Comic Sans on your website
  • Do not mix and match too many fonts
  • Don’t ever justify text on the web