Deciphering typography, a crash course on type

Typography is one of the most important aspects of design. Knowing how to use typography is a basic skill for all designers. Did you know that there is a name for every little piece of typography, essentially an anatomy of type? The space between letters has a name, the line where typography sits has a name, and so do all other bits and pieces of every letter.

Deciphering typography will help you when designing with type. Knowing the different aspects that makeup typography is like knowing how a house is built or how a machine is put together. Let’s take a crash course on type.

Typography Basics

Serif / Sans Serif

The two main things a designer needs to know about type and how to choose the one they will use, are the terms “serif” and “san serif”. All typefaces can be classified as one of these two terms.

Serifs are the little bits the extend from the letters in some styles of typography. Usually, typefaces with serifs look more classic and serious. Sans Serif means “without serif”. “Sans” is French for “without”.

Families, styles, width and weight

A typeface can be simple and only have the three main styles or weights; normal, italic and bold. Other typefaces have complete families. A type family can have the three or more styles plus extra weights. The Univers type family is a great example of how many styles and weights one typeface can have.

A style is the general look of a typeface. Normal, italic and bold are the basic styles but there is also thin, oblique, condensed and extra bold. The weight is how dark the typeface is, the width is how thick a typeface is.

x-height, baseline, meanline and cap-height

There are invisible lines  that create a resting place and positioning for letters. Two of them are called baseline and meanline. These two lines measure the x-height of the lowercase letters.  The bottom line is the base line and the top is the meanline. These are the light blue lines in the graphic below.

The dark blue line above the light blue line is called the cap-height and it marks the height of the capital letter of the same typeface.

Ascender and Descender

In the graphic above, the dark green line at the very bottom is called the descender line and is how far the lower parts of the letters go below the baseline. The pink line at the top is the ascender line and measures the parts of the letter that extend upwards past the meanline.

Other measurements

There are lots of measurements in design. Text design has plenty of them. One measures the space between one letter and the other, another measures the space between letters inside a word and another is the one that measures the space between lines.

Leading

The measurement between lines is measured with leading.

Leading measures the space between baselines inside a paragraph. Inside body text, the leading is the same from line to line.  The leading between paragraphs is generally 50% larger than the leading inside the paragraph. The leading between the headings and the paragraphs is generally 25% larger than the leading between paragraphs. These are “general” leading rules but it all depends on the typeface and size you choose. The leading along with the typography choice needs to make the text easy and comfortable to read.

Kerning and Tracking

The measurement between letters from letter to letter is called kerning. The measurement from letter to letter inside a word is called tracking. Kerning and tracking usually get confused because they both measure the space between letters. Nevertheless, they have different purposes!

Kerning is the unit that measures between one letter and another individually. This is helpful when a capital letter in a word sits too far apart and doesn’t look balanced. The kerning will help balance out that space.

Tracking is the measurement between letters inside a word, meaning that it when it is changed, the space between all the letters will change. This is handy when a typeface is either too spaced out or too tight. Some script typefaces have ligatures that look strange if the tracking isn’t perfect. Ligatures are little bits that connect letters to one another.

Anatomy of a typeface

Inside a typeface, there are lots of little bits and pieces that have special terms. The image below has the complete glossary of typographic terms. Ascenders and descenders are only two of the many terms that designers have on hand when dealing with type.

Interestingly enough, a lot of the terms used to describe the parts of type have the same name as body parts. Arms, ears, eyes, legs and feet are all common typographic terms. Along with spurs, stems, tails, tittles and bowls.

There is always more to learn

Today we looked at the basics of typographic measurements and descriptions. It might seem that all these terms are too complicated to know when designing something simple, but knowing them will help you understand why some typefaces work better than others. Even one type of typeface can have variations. One of the most complex examples of this is the different types of Garamond.

Keep learning about type here on the Freepik Blog or through the wealth of information that the internet has for us curious types.