This document provides a beginner's guide to typography. It defines typography as the art and technique of arranging type. It explains the difference between a typeface, which is a family of fonts, and a font, which includes all characters in every size and style of a typeface. It also outlines basic type classifications including serif, sans-serif, slab serif, script, and monospace. Additionally, it defines important typographic terms like tracking, kerning, and leading and illustrates the anatomy of letters.

1. Typography 101
A 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

2. hello there!
I ’ M C H R I S T A R E N S E L
Founder & Designer of Nimble Kettle

3. 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

4. what is typography?

5. Typography is the art &
technique of arranging type.
When typography is well done, text becomes
readable, legible, emotional, and invisible.

6. the difference between
a typeface & a font

7. 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.

8. 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.

9. basic type classifications

10. Serif
Sans-Serif
Slab Serif
Script
Monospace

11. the anatomy of type

13. CAP HEIGHT
X HEIGHT
BASELINE

14. CAP HEIGHT
X HEIGHT
BASELINE
ASCENDER
DESCENDER
ARM
TAIL
STEM
TERMINAL EAR
BOWL
SHOULDER
SERIF
FOOT
LOOP

15. CAP HEIGHT
X HEIGHT
BASELINE
ASCENDER
DESCENDER
ARM
TAIL
STEM
TERMINAL EAR
BOWL
SHOULDER
SERIF
FOOT
LOOP
BRACKET
CROTCH
APERTURE
COUNTER

16. other things you
should know…

17. 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

18. 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

19. 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

20. Typography 101
A 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!