SlideShare a Scribd company logo
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
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
Typography 101 – A Beginner's Guide to All Things Type
CAP HEIGHT
X HEIGHT
BASELINE
CAP HEIGHT
X HEIGHT
BASELINE
ASCENDER
DESCENDER
ARM
TAIL
STEM
TERMINAL EAR
BOWL
SHOULDER
SERIF
FOOT
LOOP
CAP HEIGHT
X HEIGHT
BASELINE
ASCENDER
DESCENDER
ARM
TAIL
STEM
TERMINAL EAR
BOWL
SHOULDER
SERIF
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 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!

More Related Content

PDF
Typesetting for the Web
PPTX
Two column text
PDF
8 Tips for Creating Stellar CTAs
PDF
Practical Typography - Type for non-designers
PPTX
Typography: The Classifications of Type
PPTX
Basics of typography hierarchy
PDF
Practical Typography
PDF
Modern typeface
Typesetting for the Web
Two column text
8 Tips for Creating Stellar CTAs
Practical Typography - Type for non-designers
Typography: The Classifications of Type
Basics of typography hierarchy
Practical Typography
Modern typeface

Viewers also liked (8)

PPTX
Typography
PDF
Borracha natural
PDF
Type 3.0: The future of typography today - ebookcraft 2015 - Steve Matteson
PPT
A Type Of Text Narrative
PPT
Type 2.0 - The (R)Evolution of Typography
PPT
Types and classification of fractures
PDF
typography_fundamentals
PDF
Typecurious: A Typography Crash Course
Typography
Borracha natural
Type 3.0: The future of typography today - ebookcraft 2015 - Steve Matteson
A Type Of Text Narrative
Type 2.0 - The (R)Evolution of Typography
Types and classification of fractures
typography_fundamentals
Typecurious: A Typography Crash Course
Ad

Similar to Typography 101 – A Beginner's Guide to All Things Type (20)

PPTX
Basic to Mastering Typography
PDF
Typography 101: The Basics
PDF
Defining Typography. An introduction to exploring graphic design using typogr...
PPTX
Typography in UI Design
PDF
Typography Basics Lecture-Design 101.pdf
PPTX
Typography
PDF
N-Share: Typography
PDF
11. Typography data visualization .pdf
PDF
CHAPTER – 3 Text
PPTX
Typography
PPTX
Typography
PDF
A crash course in typography
PDF
The Power of Typography
PDF
Things I Know About Type [Field Guide]
PDF
Typography Basics- Vocab- Examples-1 (1).pdf
PDF
typography 101.pdf
PPT
Text-Elements of multimedia
PPTX
Chap7
PPT
PDF
Put On Your Typeface by Chris Tyre
Basic to Mastering Typography
Typography 101: The Basics
Defining Typography. An introduction to exploring graphic design using typogr...
Typography in UI Design
Typography Basics Lecture-Design 101.pdf
Typography
N-Share: Typography
11. Typography data visualization .pdf
CHAPTER – 3 Text
Typography
Typography
A crash course in typography
The Power of Typography
Things I Know About Type [Field Guide]
Typography Basics- Vocab- Examples-1 (1).pdf
typography 101.pdf
Text-Elements of multimedia
Chap7
Put On Your Typeface by Chris Tyre
Ad

Recently uploaded (20)

PPTX
a group casestudy on architectural aesthetic and beauty
PPT
Unit I Preparatory process of dyeing in textiles
PDF
The Complete Guide to Buying Verified Stripe Accounts 2025.pdf
PPTX
SOBALAJE WORK.pptxe4544556y8878998yy6555y5
PPTX
Presentation1.pptxnmnmnmnjhjhkjkjkkjkjjk
PPTX
lecture-8-entropy-and-the-second-law-of-thermodynamics.pptx
PDF
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
PPT
robotS AND ROBOTICSOF HUMANS AND MACHINES
PPTX
Drawing as Communication for interior design
PPTX
timber basics in structure mechanics (dos)
PDF
GSH-Vicky1-Complete-Plans on Housing.pdf
PPTX
Bitcoin predictor project presentation
PPTX
22CDH01-V3-UNIT III-UX-UI for Immersive Design
PPTX
Project_Presentation Bitcoin Price Prediction
PDF
321 LIBRARY DESIGN.pdf43354445t6556t5656
PDF
analisis snsistem etnga ahrfahfffffffffffffffffffff
PDF
Designing Through Complexity - Four Perspectives.pdf
PDF
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
PPTX
Evolution_of_Computing_Presentation (1).pptx
PDF
Architecture Design Portfolio- VICTOR OKUTU
a group casestudy on architectural aesthetic and beauty
Unit I Preparatory process of dyeing in textiles
The Complete Guide to Buying Verified Stripe Accounts 2025.pdf
SOBALAJE WORK.pptxe4544556y8878998yy6555y5
Presentation1.pptxnmnmnmnjhjhkjkjkkjkjjk
lecture-8-entropy-and-the-second-law-of-thermodynamics.pptx
2025_AIFG_Akane_Kikuchi_Empathy_Design.PDF
robotS AND ROBOTICSOF HUMANS AND MACHINES
Drawing as Communication for interior design
timber basics in structure mechanics (dos)
GSH-Vicky1-Complete-Plans on Housing.pdf
Bitcoin predictor project presentation
22CDH01-V3-UNIT III-UX-UI for Immersive Design
Project_Presentation Bitcoin Price Prediction
321 LIBRARY DESIGN.pdf43354445t6556t5656
analisis snsistem etnga ahrfahfffffffffffffffffffff
Designing Through Complexity - Four Perspectives.pdf
SOUND-NOTE-ARCHITECT-MOHIUDDIN AKHAND SMUCT
Evolution_of_Computing_Presentation (1).pptx
Architecture Design Portfolio- VICTOR OKUTU

Typography 101 – A Beginner's Guide to All Things Type

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