Typography

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.

 

Font Categories

Serif_1.jpg

Serif

See those nice little lines at the ends of the letters? Those are serifs.

Sans_1.jpg

Sans Serif

Sans serif fonts don't have them.

Slab_1.jpg

Slab Serif

The blocky serifs on slab fonts are enough to get them their own category.

Script.jpg

Script

You learned it in 3rd grade and never used it again.

 
Mono_1.jpg

Monospace

Designed so each letter takes up about the same width. Often seen in coding.

Blackletter_1.jpg

Blackletter

Ye olde once-upon-a-time-y fonts. Developed by monks, often used by goths.

Hand_1.jpg

Hand

Designed to look handwritten. Use carefully – these usually look like crap.

Decorative_1.jpg

Decorative

Any fun and funky font that won't conform to society's font standards.

 

Tools and Adjustments

 
Tracking.jpg

Tracking

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.

Kerning.jpg

Kerning

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.

leading.jpg

Leading

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

 
alignment.jpg

Alignment

You probably know this one already. If not, the picture makes it clear.

weight.jpg

Font Weight

You know bold and regular, but many fonts these days come in upwards of 6-9 weights.

hierarchy.jpg

Hierarchy

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.jpg

X-Height

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.jpg

Golden-Ratio Typography

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.jpg

Open Type

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.