Become a typography nerd in under 10 minutes

Article written by Andrew Coyle

 

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…

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

Image for post

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.

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

Serif

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

Uppercase

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

Lowercase

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

Stem

Image for post
A stem is the stroke length of vertical letters like capital T.

Bowl

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

Descender

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

Ascender

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

Ligature

Image for post
A ligature joins letters together to form one character.

Finial

Image for post
A finial is a tapered end of a letter like in a lowercase e.

Terminal

Image for post
A terminal is the curved end of a stroke like in a lowercase f.

Spine

Image for post
A spine is the body of a lowercase s.

Cross Bar

Image for post
A cross bar is the horizontal connector of a letter like an uppercase A or B.

Counter

Image for post
A counter is the enclosed area of a letter.

Type classification

Serif and Sans-serif are the two main typeface categories. Serif typefaces have extending features at the end of their strokes. Sans-serif typefaces are defined by what they are not; they don’t have serifs at the end of their strokes.

Image for post
Merriweather is an example of a serif typeface and Roboto a sans-serif.

Serif typefaces work well for traditional uses and in printed materials, whereas sans-serif typefaces are best suited for modern settings and on the web. However, it’s less about the category and more about the use of the typeface.


Serif and sans-serif typefaces further break down into these main classifications:

Humanist Sans-serif

Image for post
Raleway is a Humanist sans-serif typeface.

Humanist typefaces incorporate aspects of calligraphy and have more stylistic flair than other sans-serif typefaces. Humanist typefaces often include modulating stroke widths, whereas others are closer to their Geometric brothers and sisters.

Geometric

Image for post
Roboto is an example of a geometric typeface.

Geometric typefaces were born out of the influential Bauhaus school in German. Geometric typefaces incorporate near-perfect universal shapes and embody minimalism.

Old-Style

Image for post
Vollkorn is an example of an old-style typeface.

Old-style typefaces, like humanist sans-serifs, have strong calligraphic influence. They feel classical and embody tradition.

Transitional

Image for post
Libre Baskerville is an example of a transitional typeface.

Transitional typefaces have the classical traits of old-style typefaces as well as modern tendencies. They are a great choice if you want a sophisticated look for a modern application.

Modern

Image for post
Abril Fatface is an example of a modern typeface.

Modern typefaces, also known as Didone, are characterized by thin, consistent serifs and thick strokes. This variation of the letterform creates a contrast that defines the classification.

Slab-serif

Image for post
Arvo is an example of a slab-serif typeface.

Slab-serif typefaces have thick block-like serifs. They became popular in the 19th-century when American advertising was being born.

Don’t forget about display typefaces

Image for post
Special Elite is an example of a display typeface.

Display typefaces are fun, eccentric specimens. Things like posters or invitations often employ display typefaces. Display fonts look unique, but when they are overused, they start looking silly.

Typefaces to resist

Image for post

Typefaces like Papyrus, Comic Sans, and Brush Script are notorious for being overused and dated. They have become a cliche of what not to use in the type world. Proceed with caution.

Font styles

Image for post

A superfamily comprises related fonts styles like regular, italic, light, bold, semi-bold, heavy, etc.

Combining typefaces

For an amateur, it’s far easier to mess up a good thing than improve it with more elements. Before incorporating an additional typeface, consider differentiating your existing typeface with varying sizes and styles.

Image for post
Merriweather goes well with Open Sans.

However, if you decide to combine typefaces, look for contrast rather than similarity. And for the love of type, limit yourself to one or at most two additional typefaces.

Kerning

Kerning, also known as letter spacing, is the individual area between each letter of a word. Bad kerning is everywhere and very few realize it. Kerning is usually adjusted in headings and logos.

Image for post

An amateur designer may make countless revisions to a logo that looks a little off, all the while being oblivious to the inconsistency between each letter. Kerning issues become more obvious the larger you increase text.

Tracking

Image for post

Tracking, also known as character spacing, is the space between letters. Increasing character spacing gives secondary text elements, like captions, a stylistic flair. Avoid character spacing in body copy.

Line spacing

Image for post

Line spacing, also known as leading, is the space between each line of text. Too little leading makes text uncomfortable to read, but too much makes each line look like its own element. Leading between 1.3x and 1.6x the font size is ideal.

Alignment

Image for post

Text alignment can make or break a page. Usually, paragraphs are aligned left. Beware of justified text as it can cause spaces that run down the paragraph called “rivers.”

Hierarchy

Image for post

Creating a typographic hierarchy is the most important way to guide the viewer through a text. Establish hierarchy by distinguishing text in various ways. You can differentiate a header from its body copy in multiple ways, like increasing its size or merely making it bold. There is no limitation to the various ways a designer can add hierarchy; the important thing is that they do.

I hope this article has given you enough knowledge to improve your typography. Together we can make the world a more legible and beautiful place.

Thank you for reading!

By Andrew Coyle

 

What next?
Want more on this topic?  Make sure you go read process for choosing type before starting your next design!

New to our fonts?
Make sure to get our Font Starter Pack loaded with all our fonts and a lot more!

Go download our free to try fonts to create new beautiful pairings and tag them on instagram to get featured!


Share this post