Taking the Guesswork out of Typography on the Web

Too many designers guess their way through typography.

Books and articles from all over are guilty of presenting typography in an overly arty “you have to just know” style.

In actual fact there is a lot of logic behind typography. There are many guidelines that, if followed, will make your typography infinitely better—even if you’re not a designer.

In this article we’re going to go through some practical tips that you can use to take the guesswork out of typography.

Choosing & Pairing Fonts

The sheer amount of typefaces to choose from is overwhelming to say the least.

Take the classic Garamond: A search on MyFonts brings up just under 60 different variations of this one font family alone! 


Sifting through all these typefaces is a laborious task for the non type enthusiast but crucial to the success of your typographic endeavours.

How To Find Your Perfect Typeface

The trick is to find a few typefaces you like and stick with them. If you pick families with a wide range of styles (Light, Regular, Bold, Italics etc.) you will find you can use them over and over again. You'll get a feel for how they work best.

I almost never use font foundry websites to choose my fonts. They're just too overwhelming.

The best way to find some great fonts for your projects is to take from what already exists around you.

The easiest way I've found to do this is right in your browser with a Chrome extension called WhatFont. Simply highlight and click on any live text and it will show you the name, size, line-height and color.

Of course the browser isn’t the only way you can identify fonts you like. If you have a static image (even phone pics) you can upload it to What The Font which will analyse it for you or you can use Identifont which will ask you simple questions based on the characters you have in front of you.

What Makes a Good Font Choice?

When choosing a font it’s best to start with your body text. This will be used the most throughout your website and is the most crucial to get right.

There are 3 main points that you should bear in mind when choosing a body text font:

1. Check the contrast


In the left image you can see there is a lot of variation between the widths of the letter. When this runs over a large amount of text it can be difficult to read.



In the same token, a font with no variation at all (the right image) can be just as bad because it gets harder to differentiate one letter from the rest.



For longer stretches of text it is best to choose a typeface with medium to low contrast because it won’t interrupt the flow of reading.



Leave the extremes for your titles.


Continue reading %Taking the Guesswork out of Typography on the Web%

by Laura Elizabeth via SitePoint