A Simple Reference Guide For Using Type: Typography Playbook

T
T Y P O G R A P H Y P L AY B O O K
A SIMPLE REFERENCE GUIDE FOR USING TYPE
P
1
Type
Playbook
A B O U T T H E AU T H O R
Hey there, I’m Nguyen aka the person who wrote/

designed this book. I’m a Creative Director and
designer from Melbourne, Australia. I’ve been a
designer for 11 years — and love that we get to make
things for a living. I was on the agency circuit for
8 years of my career and did large scale work for
international brands such as Adidas, Nintendo,
Nissan, Target and for some banks in Australia and
the Australian government.
Eventually it got stale, so I packed up shop, decided

to venture out, do my own thing and chase my
curiosity. And so for the last 3 years I have been an
independent designer making things. I currently
write at Verse, run the Process Masterclass, Source
and do freelance on the side. That’s my quick spiel.
It’s great to meet you.
S U P P O R T E D BY T H E P R O C E S S M A S T E R C L A S S 2
INTRODUCTION
This is an informal guide made predominantly for digital and product designers.
It shares a collection of go to typefaces that I use for my projects – a core
collection if you will.
This is not an official type book or anything of that nature. But merely a
collection of typefaces, examples and simple principles that I use in my work. As
a way to field and answer common questions like – “Hey man what’s that font?”
And what are some key principles that one can apply when working with type.
Now I can point people to this very book that you are reading.
Think of this book as a starting point, to get reacquainted with classic typefaces
and some new ones. To revisit classic type principles that you can build on top
of. These are the concepts that I follow and personally use in my work, so you
may disagree with some of it and that’s Ok. I've purposely kept some of the
writing simple – less about theory and more about the application of using type.
I hope you gain a ton of value out of this book. It was a labour of love putting it
together. But I am forever indebted to the people that were kind enough to share
their knowledge with me throughout my career. And so I hope to pay it forward
and pass this on to you. I sincerely hope you enjoy this guide.
Cheers,
Nguyen Le
3
Index
4
1
TYPE LIST
3
THE BASICS
A list of all the typefaces that are covered in this Learn all the key principles I use when working
book. Click to jump to each feature. with type. Simple stuff nothing fancy.
13 44
C O R E CO L L E C T I O N I N D E X S A N S S E R I F CO L L E C T I O N
A quick index of all the typefaces listed and A collection of the key san serifs that I start with
displayed to compare characters. and expand on when necessary.
56
SERIF COLLECTION
75
D I S P L AY CO L L E C T I O N
A collection of the key serifs that I start with and Display type that I use for headlines and type
expand on when necessary. flourishes.
5
Type list
SANS SERIF SERIF
UNIVERS 01 CHRONICLE 01
I N T E R S TAT E 02 TIEMPOS 02
G OT H A M 03 BODONI 03
FUTURA 04 CLARENDON 04
GILL SANS 05 D I D OT 05
H E LV E T I C A N E U E 06 AC TA 06
AV E N I R 07 GARAMOND 07
DIN 08 MINION PRO 08
AVA N T G A R D E 09 OPTIMA 09
FRUTIGER 10 FREIGHT 10
N E U T R A FAC E 11 B O D O N I E GY P T I A N P R O 11
B R A N D O N G R OT E S Q U E 12 R O C KW E L L 12
SF UI 13 MILLER 13
K N OW L E D G E 14 C A S LO N 14
CIRCULAR 15 BASKERVILLE 15
A K K U R AT 16 CO U R I E R 16
6
F R E E F O N T S (external links) D I S P L AY / H E A D L I N E S
KARLA 01 TIMMONS NY 01
L ATO 02 BLAKEY SLAB 02
SOURCE SANS 03 AG A I N T S 03
M O N T S E R R AT 04 SIGNERICA 04
PT SANS 05 T R A JA N 05
PT SERIF 06 B R OT H E R S 06
N OTO S A N S 07
N OTO S E R I F 08
O SWA L D 09
R O B OTO CO N D E N S E D 10
M E R R I W E AT H E R 11
VO L L KO R N 12
L I B R E B A S K E RV I L L E 13
EB GARAMOND 14
P H I LO S O P H E R 15
VA R E L A R O U N D 16
7
The Basics
Before I deep dive into my collection of core typefaces – I’d like to run through
some very basic principles and concepts that I use in my work. They’re not
ground breaking but just tried and tested ideas and principles that have served
me well over the years.
1. Hierarchy
2. Line length / Measure
3. Line height/ Leading
4. Baseline
5. Grids
6. Tracking
7. Small caps
8. Drop caps
9. Ligatures
10. Kerning
11. Glyphs & Alternates
12. Proper Characters
8
1. HIERARCHY
One of the most important things to define when working with type is to
define your hierarchy of information. Have intention for what you want the
information and type to convey to the user. How does it fit into the overall
flow of the experience? What is the most important element? What do you
want the user to accomplish and notice first? Work from there first and
foremost. You can create order and hierarchy through scale, weight, color
and positioning. A simple system you can use is to prioritise items on a page
and define their level of importance. Refer to figure 1.0.
Tip: Design with consistency by creating a type scale that you can imple-
ment across various responsive sizes. Define your H1–H6, body copy and
quote blocks etc. This will give you consistent type system and hierarchy
that you can use through out.
Fig 1.0 - Example of a simple 1-4 ranking system to weigh the importance of elements. Lesson from Process Masterclass.
9
2. LINE LENGTH / MEASURE
The line length or the measure is the character width of a text block. Line
lengths that are way too wide, or too short make it difficult to read.
Tip: For blocks of body copy the ideal line length is between 45-90
characters including spaces for an optimal reading experience. You can check
the line length of your work by selecting the first row of text and pasting it
into http://www.lettercount.com (Crap looking site but does the job)
Fig 2.0 - The average measure is 72 characters - it is in an ideal range
But I must explain to you how all this mistaken idea of denouncing plea-
sure and praising pain was born and I will give you a complete account of
the system, and expound the actual teachings of the great explorer of the
truth, the master-builder of human happiness.
Fig 2.1 - The average measure is 132 characters. A bit too long!
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete
account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness.
No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure
rationally encounter consequences that are extremely painful.
Fig 2.2 - The average measure 57 characters
But I must explain to you how all this mistaken idea of

denouncing pleasure and praising pain was born and I will
give you a complete account of the system, and expound
the actual teachings of the great explorer of the truth, the
master-builder of human happiness.
10
3. LINE HEIGHT / LEADING
The line height or the leading is the vertical distance between lines of text.
Tip 1: As a rule of thumb the ideal line height to use is between 1.2 to 1.4 times
the height of the font. For example – for 16px text you could use 24px leading
which is within this range. But also remember to optically judge, read the
content and put it in front of users for testing and feedback.
Tip 2: Another thing you can play around with is the line height of titles.
Tight line height for titles when done correctly can deliver interesting re-
sults. Refer to figures 3.0 and 3.1.
Fig 3.0 - Tight line height Fig 3.1 - Regular line height
THE NEW YORK THE NEW YORK

TIMES EDITION TIMES EDITION
Fig 3.2 - Freight text 12pt, Line height 28pt. It’s too tall and will be hard to distinguish paragraph blocks.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
born and I will give you a complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness.
Fig 3.3 - Frieght text 12pt, Line height 18pt. A more comfortable line height.
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was
born and I will give you a complete account of the system, and expound the actual teachings of the
great explorer of the truth, the master-builder of human happiness.
11
4. BASELINE
A baseline is a unit of measurement for vertical rhythm and alignment.

Imagine it as invisible horizontal rulers that line a page, screen or layout. It
allows considerations for thoughtful spacing of page elements and type.
Tip: To define a useful baseline I use the line height of the main body copy
ie. 24px. And divide that by 2 to make a baseline of 12px for example. I like to
use multiples of 2 and 3. Such as 12px or 14px or 16px etc. Refer to Figure 4.0
Fig 4.0 - Freight at 16pt and 24pt line height. Baseline set at 12pt (half the line height)
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim ve-
niam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
Fig 4.1 - Example of a 14px baseline used to vertically space and horizontally align elements.
12
5. GRIDS
Grids and type go together like bread and butter or tomato and basil. Grids
create order and consistency in a layout, page, screen or system. It takes the
guess work out and makes sense of negative space. It helps to align elements
both vertically and horizontally. It gives guidelines for multiple designers
working on a project. Refer to figure 5.0 to see how I apply a column grid and a
baseline grid to aid my design.
Tip: Use a grid to create order and consistency that can be systematically
applied across a projects pages. It enables smoother collaboration and
consistency across designs. Remember to use the grid as a guide, but don’t
become a slave to it — break out when you need to.
Fig 5.0 - Example of a 14px baseline and 12 column grid.

13
6 . T R AC K I N G
Tracking or letter-spacing is the space between characters. You can play

around with the theatrics of your titles and subtitles by using wider track-
ing. It works well for geometric sans serifs and some display serifs.
Tip: Play around with tracking on your titles to give off various results. As a
rule of thumb avoid tracking too wide for lowercase characters.
TRACKING T R AC K I N G
TRACKING 0 TRACKING 120
headline headline
TRACKING 0 TRACKING 260
Fig 6.0 - Wide tracking for titles using Trajan Pro — A project pitch that I worked on.
14
7. S M A L L C A P S
Small caps are not just normal capital letters scaled down, they are letters
that are specifically designed as part of a font family. They are designed
to be used harmoniously with lowercase text, with the x-height made to
match the lowercase letters. Which can be used for emphasis in a body of
text. It is important to note that there is real small caps and faux small caps,
avoid using the latter because it doesn’t use a new character set, like real
small caps, but just attempts to rescale existing capital letters.
Tip: Try to incorporate small caps in your work as an alternate to bold or

italic. They are great for lead in paragraphs and emphasis of text.
Refer to figure 7.0.
x-height matches the lowercase characters
lead in paragraph style consectetur adipiscing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad min-
im veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat.
Fig 7.0 - Example of lead in paragraph style using small caps
15
8. DROP CAPS
Drop caps are a stylistic application, that uses the first letter of a paragraph
to accentuate the body of text. You can view figure 8.0 to see it in use. It is
commonly used in editorial designs and has been around for centuries but
transcends nicely to digital as well.
Tip: Try incorporating drop caps when appropriate to add visual

interest to your body copy. Refer to figure 8.0
Fig 8.0 - Dropcap M in action
16
9 . L I G AT U R E S
Ligatures are when two or more letters are joined as a single glyph.
Tip: For your digital projects if available activate ligatures using

font-feature-settings: in CSS.
Sofia Sofia
A beautiful ligature joining f and i Colliding letters with no ligature
Fig 9.0 - Implementation of a ligature for f and i.

17
1 0. K E R N I N G
Kerning is the spacing between 2 specific characters (unlike tracking which

is all letters in a selected text). Most fonts come with hundreds and some
times thousands of kerning pairs inserted by the font designer. However
kerning should be paid attention to when creating custom type treatments.
Tip: Most of the time kerning is set, but pay extra attention when
creating custom type treatments such as logos, or large features when type
is blown up at larger sizes. Take a look at figure 10.1 below.
Fig 10.0 - Bad kerning
Vacation
Shit kerning between ‘Va’
Vacation
Optically kerned
Fig 10.1 - Fixing kerning
120
Notice the excess spacing 1 and
120
Optically kerned even negative
2. vs. 2 and 0. This is with default space between all numbers.
tracking.
18
1 1 . A LT E R N AT E S & G LY P H S
Some typefaces come with alternate characters and special glyphs that can
be used.
Tip: Explore glyphs in your design tool to see what alternates and glyphs are
available for you to use and adapt to your project.
Fig 11.0 - Glyph examples for Avant Garde
½ × ® Ø
1/2 Custom X Registered Mark Glyphs for foreign langauges
Fig 11.1 - Glyph table example – Find glyphs in your design tool of choice.
19
1 2 . P R O P E R C H A R AC T E R S
Use proper typographic characters in your work. There are proper

quotes vs. lazy quotes — and not all dashes are equal.
Tip: For a comprehensive list I recommend typewolfs typography

cheatsheet which has a much more extensive list.
https://www.typewolf.com/cheatsheet
C H A R AC T E R S M AC S H O R TC U T
“ Opening Quote option + [
” Closing Quote option + shift + [
‘ Single Opening Quote option + ]
’ Single Closing Quote or option + shift + ]
Apostrophe
- Hyphen or Minus none required
– En Dash option + -
— Em Dash option + shift + -
20
H OW T H I S B O O K I S S E T U P
From here on out you will get examples and samples of various typefaces
that are part of my core collection. Use these to get acquainted with some
old classics and some new recommendations that you can use in your work.
Use this book as a starting point when working on new projects.
Character set examples & the Typefaces being used and Example of typefaces being
different fonts in a font-family pairing examples applied to actual work.
Link to view full font family. Link to the work + source

Along with web licenses.
21
Core
Collection
22
C O R E CO L L E C T I O N – S A N S S E R I F
The quick brown fox jumped

Aa over the lazy brown dog
Univers
1234567890 –&$!#
Aa The quick brown fox jumped

Interstate over the lazy brown dog
1234567890 –&$!#

Gotham
1234567890 –&$!#

Futura
1234567890 –&$!#
23

Gill Sans over the lazy brown dog
1234567890 –&$!#

Helvetica Neue over the lazy brown dog
1234567890 –&$!#

Avenir over the lazy brown dog
1234567890 –&$!#

Din over the lazy brown dog
1234567890 –&$!#
24

Avant Garde over the lazy brown dog
1234567890 –&$!#
Aa The quick brown fox jumped over

Frutiger the lazy brown dog
1234567890 –&$!#

Neutraface the lazy brown dog
1234567890 –&$!#

Brandon Grotesque the lazy brown dog
1234567890 –&$!#
25

SF UI over the lazy brown dog
1234567890 –&$!#

Knowledge over the lazy brown dog
1234567890 –&$!#

Circular over the lazy brown dog
1234567890 –&$!#

Akkurat over the lazy brown dog
1234567890 –&$!#
26
C O R E CO L L E C T I O N – S E R I F

Tiempos Headline over the lazy brown dog
1234567890 –&$!#

Chronicle over the lazy brown dog
1234567890 –&$!#

Bodoni the lazy brown dog
1234567890 –&$!#

Didot over the lazy brown dog
1234567890 –&$!#
27

Clarendon over the lazy brown dog
1234567890 –&$!#

Acta over the lazy brown dog
1234567890 –&$!#
Droid Serif the lazy brown dog

1234567890 –&$!#

Minion Pro over the lazy brown dog
1234567890 –&$!#
28

Bodoni Egyptian over the lazy brown dog
1234567890 –&$!#

Optima over the lazy brown dog
1234567890 –&$!#

Freight the lazy brown dog
1234567890 –&$!#

Rockwell over the lazy brown dog
1234567890 –&$!#
29

Miller over the lazy brown dog
1234567890 –&$!#
The quick brown fox jumped over

Aa the lazy brown dog
Caslon
1234567890 –&$!#

Baskerville the lazy brown dog
1234567890 –&$!#
Aa
over the lazy brown dog
Courier
1234567890 –&$!#
30
FREE FONTS

Karla over the lazy brown dog
1234567890 –&$!#

Lato
1234567890 –&$!#

Source Sans
1234567890 –&$!#

Montserrat over the lazy brown dog
1234567890 –&$!#
31
FREE FONTS

PT Sans the lazy brown dog
1234567890 –&$!#

PT Serif over the lazy brown dog
1234567890 –&$!#

Noto Sans
1234567890 –&$!#

Noto Serif over the lazy brown dog
1234567890 –&$!#
32
FREE FONTS
Aa The quick brown fox jumped over the

Oswald lazy brown dog
1234567890 –&$!#
Aa The quick brown fox jumped over the

lazy brown dog
Roboto Condensed
1234567890 –&$!#

Merriweather
1234567890 –&$!#

Vollkorn the lazy brown dog
1234567890 –&$!#
33
FREE FONTS

Libre Baskerville over the lazy brown dog
1234567890 –&$!#

EB Garamond over the lazy brown dog
1234567890 –&$!#

the lazy brown dog
Philosopher
1234567890 –&$!#

Varela Round over the lazy brown dog
1234567890 –&$!#
34
HEADLINES
TimmONS NY
timmons_ny
BLAKEY SLAB
blakey slab
AGAINT S
againts
signerica
Sigenerica
35
HEADLINES
TRAJAN
trajan
BROTHERS
brothers
36
S
SANS SERIF COLLECTION
37
01 UNIVERS CO R E CO L L E C T I O N
Univers
ULTRA
CONDENSED
headline univers ultra condensed
body minion pro
01 – Lorem ipsum dolor sit amet, con- 02 – Sed ut perspiciatis unde omnis
sectetur adipiscing elit, sed do eiusmod iste natus error sit voluptatem accu-
tempor incididunt ut labore et dolore santium doloremque laudantium,
magna aliqua. Ut enim ad minim ve- totam rem aperiam, eaque ipsa quae
niam, quis nostrud exercitation ulla- ab illo inventore veritatis et quasi ar-
mco laboris nisi ut aliquip ex ea com- chitecto beatae vitae dicta sunt expli-
modo consequat. Duis aute irure dolor cabo. Nemo enim ipsam voluptatem
in reprehenderit in voluptate velit esse quia voluptas sit aspernatur aut odit
cillum dolore eu fugiat nulla paria- aut fugit, sed quia consequuntur mag-
tur. Excepteur sint occaecat cupidatat ni dolores eos qui ratione voluptatem
non proident, sunt in culpa qui officia sequi nesciunt. Neque porro quis-
deserunt mollit anim id est laborum. quam est, qui dolorem ipsum quia
38
Univers – sample
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890–&$!#
regular 28pt
1234567890–&$!#
BOLD 28PT
1234567890–&$!#
ULTRA CONDENSED 28pt
view fontfamily on myfonts
39
title univers ultra condensed

body chronicle text
Project: Influencers — View on Behance 40

02 I N T E R S TAT E CO R E CO L L E C T I O N
TYPE PLAYBOOK PRESENTS
INTERSTATE
BOLD
A reflective photographic journey of the moments
that shape the person I am today.
Headline set in Interstate Bold

Body set in Courier 41
Interstate – sample
1234567890–&$!#
LIGHT 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
BOLD 28pt
view fontfamily on typekit
42
title univers ultra condensed

body chronicle text
Download this source file at: www.verse-co.com/design-resources

43
03 G OT H A M CO R E CO L L E C T I O N
GOTHAM
Black
headline gotham black

body chronicle text
Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor in-
cididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
44
Gotham – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
BOOK 28PT
1234567890–&$!#
bold 28pt
view fontfamily on typography.com
45
title chronicle display

body gotham
Project: Food app card — View on Dribbble 46

04 FUTURA CO R E CO L L E C T I O N
FUTURA HEAVY
headline futura heavy body minion pro
01 – Sed ut perspiciatis unde om- 02 – Sed ut perspiciatis unde om- 03 – Sed ut perspiciatis unde om-
nis iste natus error sit voluptatem nis iste natus error sit voluptatem nis iste natus error sit voluptatem
accusantium doloremque laudan- accusantium doloremque laudan- accusantium doloremque laudan-
tium, totam rem aperiam, eaque tium, totam rem aperiam, eaque tium, totam rem aperiam, eaque
ipsa quae ab illo inventore verita- ipsa quae ab illo inventore verita- ipsa quae ab illo inventore verita-
tis et quasi architecto beatae vitae tis et quasi architecto beatae vitae tis et quasi architecto beatae vitae
dicta sunt explicabo. Nemo enim dicta sunt explicabo. Nemo enim dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit ipsam voluptatem quia voluptas sit ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed aspernatur aut odit aut fugit, sed aspernatur aut odit aut fugit, sed
quia consequuntur magni dolores quia consequuntur magni dolores quia consequuntur magni dolores
eos qui ratione voluptatem sequi eos qui ratione voluptatem sequi eos qui ratione voluptatem sequi
nesciunt. Neque porro quisquam nesciunt. Neque porro quisquam nesciunt. Neque porro quisquam
47
Futura – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
MEDIUM 28PT
1234567890–&$!#
HEAVY 28pt
48
titles acta, futura

body acta
Project: Luxy Hair — View on Dribbble 49

05 GILL SANS CO R E CO L L E C T I O N
Gill Sans
Bold headline gill sans bold body minion pro
01 – Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
officia deserunt mollit anim id est laborum.
50
Gill Sans – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
MEDIUM 28PT
1234567890–&$!#
bold 28pt
51
title miller display

body gill sans
Project: NDA client early concepts — View on Dribbble 52

06 H E LV E T I C A N E U E CO R E CO L L E C T I O N
001
Helvetica
Neue
Bold
headline helvetica neue bold
body helvetica neue regular
53
Helvetica Neue – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
54
headline helvetica neue

body helvetica neue
Vignelli Tribute — View on Dribbble 55

07 AV E N I R CO R E CO L L E C T I O N
Avenir Light
Hello.
I am your personal
chat bot assistant
Siri.
headline avenir light 56

Avenir – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
THE LOBSTER
1234567890–&$!#
BLACK 28pt
57
headline avenir
body avenir
Picturehouse Entertainment. License: All Rights Reserved. 58

08 DIN CO R E CO L L E C T I O N
DIN CONDENSED
01 – Lorem ipsum dolor sit amet, consectetur 02 – Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor incididunt adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, Excepteur sint occaecat cupidatat non proident,
sunt in culpa qui officia deserunt mollit anim id sunt in culpa qui officia deserunt mollit anim id
est laborum. est laborum.
headline din body freight text 59

Din – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
60
headline din
body din
Source: https://www.behance.net/gallery/9236715/Sonicisual License: All Rights Reserved. 61

09 AVA N T G A R D E CO R E CO L L E C T I O N
AVANT GARDE DEMI
62
Avant Garde – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
63
headline canela
body avant garde
Source: https://mrleight.com/ License: All Rights Reserved. 64

10 FRUTIGER CO R E CO L L E C T I O N
Frutiger Lorem ipsum dolor sit amet, consectetur

adipiscing elit, sed do eiusmod tempor inci-
didunt ut labore et dolore magna aliqua. Ut
enim ad minim veniam, quis nostrud exer-
citation ullamco laboris nisi ut aliquip ex ea
Bold
commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est
laborum. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia dese-
runt mollit anim id est laborum. Excepteur
sint occaecat cupidatat non proident, sunt in
culpa st laborum.
headline frutiger bold body minion pro
65
Frutiger – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
66
Source: http://heuryandheury.eu/tribute-to-adrian-frutiger License: All Rights Reserved. 67

11 N E U T R A FAC E CO R E CO L L E C T I O N
NEUTRA
DISPLAY
EST. MMXVIII
68
Neutra Display – Sample
1234567890–&$!#
light 28pt
1234567890–&$!#
MEDIUM 28PT
1234567890–&$!#
bold 28pt
View fontfamily on houseind
69
headline neutraface
Source: https://houseind.com/hi/neutraface License: All Rights Reserved. 70

12 B R A N D O N G R OT E S Q U E CO R E CO L L E C T I O N
NO.1
Brandon
Grotesque
BLACK
NO.2
DO WHAT
YOU LOVE
& DESIGN
71
Brandon Grotesque – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
72
titles brandon grotesque
https://www.behance.net/gallery/52079941/Map-of-Spain License: All Rights Reserved. 73

13 SF UI CO R E CO L L E C T I O N
SF UI
EST. MMXVIII
74
SF UI
1234567890–&$!#
light 28pt
1234567890–&$!#
MEDIUM 28PT
1234567890–&$!#
bold 28pt
view fontfamily on apple
75
76
14 K N OW L E D G E CO R E CO L L E C T I O N
Knowledge
77
Knowledge
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
78
title univers condensed body avenir next

subtitles/links knowledge
Project: Modern Traveller — View on Dribbble 79

15 CIRCULAR CO R E CO L L E C T I O N
Circular
EST. MMXVIII
80
Circular
1234567890–&$!#
book 28pt
1234567890–&$!#
MEDIUM 28PT
1234567890–&$!#
bold 28pt
view fontfamily on circular
81
headline circular
links circular
Source: http://www.airbnb.com License: All Rights Reserved. 82

16 A K K U R AT CO R E CO L L E C T I O N
Akkurat
83
Akkurat
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
84
title akkurat
body akkurat
Project: DECODE Slide Deck — View on Dribbble 85

S
SERIF COLLECTION
86
01 CHRONICLE CO R E CO L L E C T I O N
Chronicle
Display
87
Chronicle Display – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
view fontfamily on typography.com
88
masthead chronicle display subheading univers ultra condensed

title gotham body chronicle text
Project: Influencers — View on Behance 89

02 TIEMPOS CO R E CO L L E C T I O N
Tiempos
Headline
90
Tiempos Headline – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28pt
1234567890–&$!#
BOLD 28pt
view fontfamily on klim type foundry
91
title tiempos headline

subtitles gill sans, miller
Project: NDA client early concepts — View on Dribbble 92

03 BODONI CO R E CO L L E C T I O N
BODONI
93
Bodoni — Sample
1234567890–&$!#
BOOK 28pt
1234567890–&$!#
BOOK ITALIC 28PT
1234567890–&$!#
BOLD 28PT
94
title bodoni
body bodoni
Two Point: https://www.behance.net/gallery/1277123/I-Love-Bodoni License: All Rights Reserved. 95

04 CLARENDON CO R E CO L L E C T I O N
Clarendon
96
Clarendon – sample
1234567890–&$!#
roman 28pt
ABCDEFGHIJKLMNOPQRSTU-
VWXYZ
BOLD 28PT
97
title clarendon
body theinhardt
Source: http://www.hellomonday.com License: All Rights Reserved. 98

05 D I D OT CO R E CO L L E C T I O N
Didot
99
Didot – sample
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
ITALIC 28PT
1234567890–&$!#
bold 28pt
100
title didot
body didot
101
06 AC TA CO R E CO L L E C T I O N
Acta
102
Acta – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
BOOK 28PT
1234567890–&$!#
bold 28pt
103
title acta
subtitles oswald
Project: The Weekday App 104

07 GARAMOND CO R E CO L L E C T I O N
Garamond
105
Garamond – sample
1234567890–&$!#
regular 28pt
1234567890–&$!#
REGULAR ITALIC 28PT
1234567890–&$!#
BOLD 28PT
106
title garamond
subtitles knowledge
Project: Modern Traveller 107

08 MINION PRO CO R E CO L L E C T I O N
Minion Pro
108
Minion Pro – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
109
title minion pro

body minion pro
Process Masterclass – Type breakdown lesson 110

09 OPTIMA CO R E CO L L E C T I O N
Optima
111
Optima – sample
1234567890–&$!#
REGULAR 28pt
1234567890–&$!#
BOLD 28PT
1234567890–&$!#
EXTRA BLACK 28pt
112
titles optima
subtitles gt america
Source: http://www.romance-journal.com/issues/issue-01-emotions/ License: All Righsts Reserved. 113

10 FREIGHT CO R E CO L L E C T I O N
Freight
Display
114
Freight – sample
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
ITALIC 28PT
1234567890–&$!#
115
titles freight
subtitles univers condensded
Project: Bakers Guild 116

11 B O D O N I E GY P T I A N P R O CO R E CO L L E C T I O N
BODONI
EGYPTION
PRO
117
Bodoni Egyptian – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
BOLD 28PT
1234567890–&$!#
BLACK 28pt
118
Source: https://www.myfonts.com/fonts/shinn/bodoni-egyptian-pro/ License: All Rights Reserved 119

12 R O C KW E L L CO R E CO L L E C T I O N
ROCKWELL
120
Rockwell – sample
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
bold 28pt
121
titles rockwell
subtitles univers
122
13 MILLER CO R E CO L L E C T I O N
Miller
Display
123
Miller
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
124
titles miller
subtitles gill sans
Project: NDA client early concepts — View on Dribbble

125
14 C A S LO N CO R E CO L L E C T I O N
Caslon
126
Caslon
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
REGULAR 28PT
127
titles helvetica
body caslon
Source: https://www.behance.net/gallery/33018571/War-of-the-Words-Publication License: All Rights Reserved 128

15 B A S K E RV I L L E CO R E CO L L E C T I O N
Baskerville
129
129
Baskerville
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
1234567890–&$!#
BOLD 28PT
130
titles brown
body baskerville
Source: https://www.seedlipdrinks.com/ License: All Rights Reserved. 131

16 COURIER CO R E CO L L E C T I O N
Courier
132
Courier
1234567890–&$!#
light 28pt
1234567890–&$!#
REGULAR 28PT
133
titles interstate
body courier
Download this source file at: www.verse-co.com/design-resources 134

DISPLAY
D I S P L AY + H E A D L I N E S C O L L E CT I O N
135
01 TIMMONS NY CO R E CO L L E C T I O N
TIMMONS NY
view fontfamily on typespec
136
01 TIMMONS NY CO R E CO L L E C T I O N
titles timmons ny
body freight
137
02 BLAKEY SLAB CO R E CO L L E C T I O N
Blakey
Slab
view fontfamily on mattwiley.com
138
02 BLAKEY SLAB CO R E CO L L E C T I O N
Source: http://www.mattwilley.co.uk/Blakey-Slab-for-ACLU License: All Rights Reserved 139

03 AG A I N T S CO R E CO L L E C T I O N
Againts
view fontfamily on urbanfonts
140
03 AG A I N T S CO R E CO L L E C T I O N
141
04 SIGNERICA CO R E CO L L E C T I O N
Signeria
view fontfamily on fontm
142
04 SIGNERICA CO R E CO L L E C T I O N
143
05 T R A JA N CO R E CO L L E C T I O N
Trajan
144
05 T R A JA N CO R E CO L L E C T I O N
145
06 B R OT H E R S CO R E CO L L E C T I O N
BROTHERS
146
06 B R OT H E R S CO R E CO L L E C T I O N
Source: http://lg2boutique.com — F. Ménard branding by lg2boutique. License: All Rights Reserved 147
Extended
Resources
The Elements of Typographic Style
by Robert Bringhurst
Grid systems
by Joesef Muller – Brockmann
Thinking with type

by Ellen Lupton
Typewolf
http://www.typewolf.com
Butterick’s Practical Typography

https://practicaltypography.com/
Frere Jones blog

https://frerejones.com/blog
Discover.typography
https://discover.typography.com/
148
Thank you
W H E R E E L S E YO U C A N F I N D M E
Journal
https://www.verse-co.com
Teach at Process Masterclass

https://www.process-masterclass.com
Dribbble
https://www.dribbble.com/newincreative
Twitter
https://www.twitter.com/newincreative
Instagram
https://www.instagram.com/newincreative
149

A Simple Reference Guide For Using Type: Typography Playbook

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

A Simple Reference Guide For Using Type: Typography Playbook

Uploaded by

Copyright:

Available Formats

T

A SIMPLE REFERENCE GUIDE FOR USING TYPE

Hey there, I’m Nguyen aka the person who wrote/

Eventually it got stale, so I packed up shop, decided

DIN 08 MINION PRO 08

Fig 2.0 - The average measure is 72 characters - it is in an ideal range

Fig 2.2 - The average measure 57 characters

But I must explain to you how all this mistaken idea of

THE NEW YORK THE NEW YORK

great explorer of the truth, the master-builder of human happiness.

A baseline is a unit of measurement for vertical rhythm and alignment.

Fig 5.0 - Example of a 14px baseline and 12 column grid.

Tracking or letter-spacing is the space between characters. You can play

Tip: Try to incorporate small caps in your work as an alternate to bold or

x-height matches the lowercase characters

lead in paragraph style consectetur adipiscing elit, sed do eiusmod

Tip: Try incorporating drop caps when appropriate to add visual

Fig 8.0 - Dropcap M in action

Tip: For your digital projects if available activate ligatures using

Fig 9.0 - Implementation of a ligature for f and i.

Kerning is the spacing between 2 specific characters (unlike tracking which

Fig 10.0 - Bad kerning

Fig 10.1 - Fixing kerning

Fig 11.0 - Glyph examples for Avant Garde

Use proper typographic characters in your work. There are proper

Tip: For a comprehensive list I recommend typewolfs typography

“ Opening Quote option + [

” Closing Quote option + shift + [

‘ Single Opening Quote option + ]

’ Single Closing Quote or option + shift + ]

- Hyphen or Minus none required

­ — Em Dash option + shift + -

Link to view full font family. Link to the work + source

The quick brown fox jumped

Aa The quick brown fox jumped

The quick brown fox jumped

The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped over

Aa The quick brown fox jumped over

Aa The quick brown fox jumped over

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped over

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped over

Droid Serif the lazy brown dog

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped

Aa The quick brown fox jumped over

Aa The quick brown fox jumped

Aa The quick brown fox jumped

— Em Dash option + shift + -