Typography 101

Typography can often be a hard thing to understand, but by learning the basics, you can guide and give direction to a designer, ultimately achieving the exact look and feel you are after. So with that said I decided to put together the basics in what I call Typography 101. No expensive college textbooks required – just the desire to learn a quick bit about typography and a need to really put your marketing efforts to work.

Connotative Qualities
First, there are hundreds, maybe even thousands, of fonts to choose from when designing. Each typeface communicates a different connotative feeling. One word takes on a different tone when in a different font.

Type family
The different options available within a font make a type family. Many fonts have only a few different weights – black, bold, regular, light, italic etc. Some fonts have a much larger type family with condensed, ultralight, and extra bold weights.

Serif and San Serif Fonts
Remember, each different font communicates an entirely different message to your audience. But within the different choices there are Serif and San Serif fonts. Serif fonts have small lines at the ends of each stroke. Serif fonts are easier to read and are used for large amounts of text such as books and magazines. Serif fonts, displayed below, have lines on the ends of strokes. Sans Serif fonts do not.

Sans means “without,” so Sans Serif fonts don’t have any distinguishing lines at the ends of strokes. San Serif fonts are used as headlines, some body copy, and in call outs. And San Serif fonts happen to be easier to read on screen (probably what you’re reading right now).

Point Size
The “point” is used to measure the size of a font. One point = 1/72 of an inch. Back in the day, way before computers were thought of and when movable type was used, characters were measured by the full height of the block and not just the character itself. Because type is still measured this way, two typefaces at the same point size may appear as different sizes, based on the position of the character in the block and how much of the block the character fills.

Tracking
Tracking is the distance between characters. Tracking can be used to give an airy look, make type appear less heavy on a page or very tight to give a confined feeling. All of these techniques can be experimented with to create appropriate effects, improve readability and improve communication. Adjustment of them can create some very interesting effects.

Kerning and Letter Spacing
Kerning is the reduction of space between characters. Letter spacing is adding space between letters. This tactic is used to add legibility and improve aesthetics. It is used to tweak a specific word or adjust a logo or word mark.

Leading
Leading refers to the distance between lines of text. This distance, measured in points, goes from baseline to baseline. A block of text may be referred to as being 12pt with 6 pts of extra leading. In designer-speak, this is 12/18, which means there is 12 pt type on 18 pts of actual height.

Hierarchy
Hierarchy is one of the most important aspects of typography. Good design tells you what you should look at first, and draw you in for a closer look – a header, subhead and body copy. Each element should flow and fit together. A typographic hierarchy is an organizational system for content, emphasizing some data and diminishing others. Think of it in terms of the jeans you have that hide those extra sweets you’ve been sneaking vs. the use of mascara and eye makeup to emphasize your eyes – diminishing and emphasizing the areas you want seen first. A hierarchy helps readers scan text. Each level of the hierarchy should be signaled by one or more techniques, applied consistently across a body of text. A technique can be spatial (indent, line spacing, placement on page) or graphic (size, style, color of typeface). Infinite variations are possible. Here is an Example:

In this example your eye is caught by the flowers, then goes directly to the header, “Spring is almost here,” and then to the copy. Your eye is guided by the designer to go where they want you to go.

This blog post is only the very very tip of the typographic iceberg. They say you can only see 10% of an iceberg floating in the ocean and the other 90% is under water. Well, in this case, I have only defined 1% of the iceberg for you. There is much more under the water. Now that you know the basics, you should be able to better communicate with your designer. No more red pen edits necessary (please).