Typography is the study of fonts and how they’re used. In all honesty, to be a successful designer, you do have to be a little obsessed with fonts. Each font, and font type, has a different history and connotation. While over time you will learn to trust your instincts, it’s important to have a basic understanding of each type of font and the various ways it can be adjusted. Below is an overview of the various types of fonts and techniques and tools that are used to make typographic magic.
See those nice little lines at the ends of the letters? Those are serifs.
Sans serif fonts don't have them.
The blocky serifs on slab fonts are enough to get them their own category.
You learned it in 3rd grade and never used it again.
Designed so each letter takes up about the same width. Often seen in coding.
Ye olde once-upon-a-time-y fonts. Developed by monks, often used by goths.
Designed to look handwritten. Use carefully – these usually look like crap.
Any fun and funky font that won't conform to society's font standards.
Tracking refers to the space between letters. Tracking is applied to the entire text selection, rather than kerning, which customizes the space between 2 adjacent letters.
See how that V and A are getting nice and cozy? That's thanks to kerning. In theory, letters are placed about the same width apart, but sometimes that looks stupid. Kerning adjusts the space between two letters to ensure optimal legibility (and, let's be real, good looks). Most programs will make a good attempt automatically, but you can, and should, adjust by hand when necessary.
Also known as line-height, this is just a fancy (but oft used) word for the space between the lines. It's pronounced like lead, the toxic element, not lead, like you would a herd of sheep. That's because typographers used to use bits of lead to separate their text lines. #themoreyouknow
You probably know this one already. If not, the picture makes it clear.
You know bold and regular, but many fonts these days come in upwards of 6-9 weights.
Design should always be hierarchical – in that you should always know where to look first. Here we've created hierarchy with both font size and weight. This is an easy one to forget, so write it down.
X-height describes the height of a font's lower-case "x." That line determines where many other lower-case letters hit as well, as well as certain features on upper-case letters (like the crossbar on "A"). Subtle differences in x-height can have a significant effect on a font's character and elegance.
Golden Ratio Typography is actually a specific web project that optimizes leading – particularly in web design – for legibility, based in the golden ratio. You can check it out here:
Open Type is a feature on many fonts that allows characters to look different in different contexts. Sometimes this is a subtle adjustment to make two letters look better next to each other. Sometimes a font, like "Al Fresco" (above) will have upwards of 5 different options for a given letter to make words look more customized.