Typography 101A B E G I N N E R ’ S G U I D E T O A L L T H I N G S T Y P E

hello there!

I ’ M C H R I S T A R E N S E L Founder & Designer of Nimble Kettle

what we’re chatting about:

What is Typography?

The Difference Between a Typeface & Font

Basic Type Classifications

The Anatomy of Type

Other Important Things You Should Know

what is typography?

Typography is the art & technique of arranging type.

When typography is well done, text becomes

readable, legible, emotional, and invisible.  

the difference between a typeface & a font

The terms typeface and font are not synonymous, though they are often used interchangeably. But if

you use the correct terms, you’ll score major points

with your designer.

The two terms come to us from the good ole days,

when printers would have to handset type for use

on printing presses.

A font refers to the entire set of letters, numbers,

punctuation, and characters in every size, weight, style available for that typeface.

Typeface (a.k.a. font family) refers to the style and

overall aesthetic of the characters within a font. In other words, a typeface is a family of fonts.

basic type classifications

Serif

Sans-Serif

Slab Serif

Script Monospace

the anatomy of type

CAP HEIGHT

X HEIGHTBASELINE

CAP HEIGHT

X HEIGHTBASELINE

ASCENDER

DESCENDER

ARM

TAIL

STEM

TERMINAL EAR

BOWL

SHOULDERSERIF

FOOT

LOOP

CAP HEIGHT

X HEIGHTBASELINE

ASCENDER

DESCENDER

ARM

TAIL

STEM

TERMINAL EAR

BOWL

SHOULDERSERIF

FOOT

LOOP

BRACKET

CROTCH

APERTURE

COUNTER

other things you should know…

Tracking

ORIGINAL Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis id justo et sollicitudin. Mauris vitae gravida ipsum. Donec hendrerit elit id turpis porta,

et imperdiet velit porttitor. Donec id neque a urna finibus eleifend.

LOOSER TRACKING Lorem ipsum dolor sit amet, consectetur adipiscing elit . Morbi venenatis id justo et sollicitudin. Mauris vitae gravida ipsum.

Donec hendrerit elit id turpis porta, et imperdiet velit porttitor. Donec id neque a urna finibus eleifend.

R E F E R S T O T H E S P A C I N G O F A W O R D O R S E R I E S O F T E X T

Kerning

Lorem ipsum

S O M E T I M E S C O N F U S E D W I T H T R A C K I N G – K E R N I N G I S T H E S P A C E B E T W E E N I N D I V I D U A L

L E T T E R S O R C H A R A C T E R S

Lorem ipsum*Original

*Adjusted Kerning

Leading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi venenatis id justo et

sollicitudin. Mauris vitae gravida ipsum. Donec hendrerit elit id turpis porta, et

imperdiet velit porttitor. Donec id neque a urna finibus eleifend. Nunc at leo ut erat

auctor scelerisque. Fusce volutpat magna at eleifend placerat. Vivamus dapibus

tincidunt tempus. Donec fringilla risus arcu, tempus semper dui lobortis ut. Etiam

consequat, ante ut tempor consequat, lorem neque malesuada metus, ut maximus

eros risus cursus quam.

R E F E R S T O T H E S P A C E B E T W E E N L I N E S O F T E X T

Typography 101A B E G I N N E R ’ S G U I D E T O A L L T H I N G S T Y P E

Did you find this helpful? Share the love with a friend!