Typography 101

Typography, besides being one of my all-time favourite subjects, is a huge part of design. I don’t think it’s unreasonable to say that if you know how to use type correctly, you know how to design. That is why I put together this short guide covering some of the most important principles in typography – these are only the basics though, so if you want to learn more, I have included some useful links at the end of this post.

1. Typeface or Font?

You’ve heard both but which one is correct? Well, these days it is acceptable to use them interchangeably but in the old days when people still used metal blocks for printing, a typeface referred to the design of the letterform, e.g. Caslon, while a font referred to a typeface in a particular size and weight, e.g. Caslon 12 pt bold. In other words, Caslon 11 pt and Caslon 12 pt bold would be considered the same typeface but two different fonts. (Source.)

2. The 4 Classifications of Type

Most people know about serifs and sans serifs but there are actually 4 basic groups of typefaces: Serif, sans serif, script and decorative. Serifs and sans serifs are the most widely used because of their legibility.

Serifs

Serif fonts are characterised by their serifs (a serif is the little line at the end of a stroke, if you don’t know that already). You get different kinds of serif fonts, depending on which time period it came from and other characteristics, such as stroke contrast and bracketing. For example, old style serif fonts, which date all the way back to the 15th century, are relatively low-contrast compared to modern serif fonts, which combine hairline strokes with much thicker strokes for a much more striking appearance. Old style and transitional serif typefaces also have bracketed serifs (where the serif curves out of the stroke), as opposed to modern serif typefaces, whose serifs end at a 90° angle to the stroke.

Slab serifs are just serif typefaces with thicker serifs and were used a lot in the 19th century for advertising. Glyphic serif typefaces are characterised by their sharp serifs and have a more classic appearance.

Sans Serifs

These have no serifs (hence the name sans serif) and they are categorised into grotesque, square, humanist and geometric subgroups. Sans serifs usually don’t have much contrast between strokes, except for the humanist ones, which usually have a little bit more contrast and are considered the most legible of all the sans serifs. (Source.) Geometric sans serifs, like Futura, are made up of simple geometric forms (the ‘o’, for example, is usually a perfect circle) and therefore have a very minimalist appearance.

Scripts

Unlike the previous two groups, script fonts are not for everyday use. Common uses for them include wedding invitations (formal), logos (casual) and certificates (blackletter). Brush scripts, another example of a casual script, are very popular these days and you can find plenty of them on the web.

Decorative

The decorative typefaces are a group of miscellaneous fonts that are often used in signage, posters, album covers, tattoos and more. A good example of a decorative type is the psychedelic type you see on a lot of albums from the 60’s. Decorative typefaces are great for making a statement but use with caution – they can look dated very easily. Better avoid them if you don’t know what you’re doing!

3. Basic Character Anatomy

There are a lot more names for the different structures but these are the basics:

This might seem like pointless information but if you know it, it might help you distinguish between similar fonts. For example, Arial and Helvetica Neue:

4. Tracking vs. Kerning

Tracking and kerning both have to do with the spacing between characters. Tracking is also known as letter spacing and if you set the tracking to anything above 0, the characters will be more spread out in a uniform way.

Kerning is the spacing between different pairs of characters and there are principles that you need to follow when kerning type. For example, two round characters (e.g. o and o) should have less spacing between them than a straight and a round character (l and o), which should have less spacing between them than two straight characters (l and l). The idea behind kerning is to get a more uniform look, not to space everything evenly.

Tip: To adjust the kerning manually in Illustrator, hold down the Option key (Alt on a PC) and use the left and right arrow keys to adjust the spacing between the letters. Illustrator also has an option to set the kerning to Auto, Optical or Metrics. The Auto setting is the default setting, while Optical lets Illustrator determine what looks best visually. I usually use the Optical setting, since it’s the easier and more consistent than doing it manually. The Metrics setting uses the built in kerning of the font – this gives you perfect kerning for script fonts.

5. Some Dos & Don’ts

• Do keep it simple. If you’re not sure which font to use, a serif or sans serif is usually a better choice than a script or decorative font.
• Do choose an appropriate font.
• Don’t ever stretch a font. Seriously, just don’t.
• Don’t use more than three fonts in a design. Two is plenty, use three if you absolutely have to.
• Do kern your display fonts. No kerning is necessary for paragraph text.
• Do invest in good quality classic fonts such as Helvetica, Futura, Bodoni and Univers.
• Don’t clutter your computer with low-quality, free fonts from the internet. Collect fonts, don’t hoard them.

Useful Links

• Fonts.com has a rather in-depth course on typography called Fontology. It covers everything and is totally free!
• This slideshow will give you a quick overview of the basics.
• A blog about all things typography.
• A game to help you practice your kerning skills. (Unrelated: Here is another game by the same site to help you master the pen tool in Illustrator.)
• Here is a helpful article about the principles of kerning.

If you loved this post, keep an eye out for next week’s post and the week after – I’ve decided to make March Typography Month on my blog. Hooray!