Become a typography nerd in under 10 minutes

author=Andrew Coyle% authorlink=https://twitter.com/CoyleAndrew% fonts=neue-montreal,telegraf,monument-extended,editorial-new%

Everything a beginner needs to know about typography. When it comes to typography, a little bit of knowledge goes a long way. People who understand good typography make our world a little more legible and beautiful. Let’s learn how…
Let’s learn how…

Typeface vs. Font

Before you go any further, let’s address an area of confusion—the difference between a typeface and a font.

  • A typeface describes the design of the letterform — a font is its vehicle.
  • For example, Merriweather is a typeface; its different styles (like italic or bold) are fonts.

Type anatomy

Cap Height, X-Height, and Baseline

The cap height defines the height of the flat capital letters of a typeface. However, round letters like an “O” and pointed letters like an “A” overshoot the cap height to balance text visually.

The baseline is the horizontal plane where the text sits. Lowercase letters with descenders like the letter “y” extend below the baseline.

The X-height is the height of the lowercase x of a typeface. The copy of typefaces with larger x-heights appears bigger than typefaces with smaller x-height. In the example above, Montserrat appears larger than PT Sans because of its higher x-height even though they are both rendered at 18px.

Montserrat appears larger than PT Sans because of its higher x-height even though they are both rendered at 18px.

Serif

A serif is an ending stroke of the larger stroke of a letter.

Uppercase

Uppercase letters are the larger form of letters. The beginning of sentences and proper nouns use an uppercase letter.

Lowercase

Lowercase letters are the smaller version of letters that comprise the majority of the text in paragraphs.

Stem

A bowl is the curved, rounded, closed area of a letter like in a lowercase a.

Descender

A descender is the part of some lowercase letters that go below the baseline of a typeface like a lowercase y.

Ascender

An ascender is the part of some lowercase letters that go above the x-height of a typeface like a lowercase k.

Ligature

A ligature joins letters together to form one character.


Share this post