This document provides practical typography tips for making work look great without being a designer. It discusses choosing fonts, using serif vs sans-serif, line height, letter spacing, grids, and moving the eye with type. Key tips include starting simply, exploring Typekit and Fonts.com, using line height and letter spacing sparingly for effect, mixing thick and thin type, following a 2/3 line length rule for grids, and keeping the eye moving in the right direction. Resources like books on typography and a related iPad app are recommended for further learning.

1. MUTUALLY HUMAN
Practical Typography
Or, “How to make your work look great,
even if you aren't a designer."
Victor Sirotek
@mercilessrobot

2. MUTUALLY HUMAN
Some basic S’s

3. MUTUALLY HUMAN
Serif
S

4. S
MUTUALLY HUMAN
Sans-Serif

5. MUTUALLY HUMAN
Script
S

6. S
MUTUALLY HUMAN
Stupid

7. MUTUALLY HUMAN
‘Fun’ font fact

8. MUTUALLY HUMAN
Marker Felt
is the less offensive cousin of
Comic Sans

9. MUTUALLY HUMAN
Marker Felt
is the less offensive cousin of
Comic Sans
Comic Sans

10. MUTUALLY HUMAN
Why does
typography
matter?

11. MUTUALLY HUMAN
It helps us tell stories

12. MUTUALLY HUMAN
Once upon a time people got bored
quickly when reading on the web.
Then one day, a little old lady learned that the way to
combat this is to tell stories because people like them.
They make the content of the message easier to digest
and greatly increase our comprehension.

13. MUTUALLY HUMAN
How to tell stories

14. MUTUALLY HUMAN
Content

15. MUTUALLY HUMAN
Lorem ipsum
dolor sit amet,
consectetur
adipiscing elit.
This is not content. Suspendisse auctor purus vel mi volutpat
scelerisque. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Mauris turpis nibh,
dapibus non sagittis non, hendrerit sollicitudin
arcu. Nulla vestibulum dolor vitae neque
cursus nec ornare sapien tempus.

16. MUTUALLY HUMAN
Lorem ipsum
dolor sit amet,
consectetur
adipiscing elit.
This is misleading. Suspendisse auctor purus vel mi volutpat
scelerisque. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Mauris turpis nibh,
dapibus non sagittis non, hendrerit sollicitudin
arcu. Nulla vestibulum dolor vitae neque
cursus nec ornare sapien tempus.

17. MUTUALLY HUMAN
Real content has
character and
can be
unpredictable
Switch in content and... This leads to less than stellar positioning of
words. You need the content to know if the
sizes you are choosing for headlines, sub-
heads, call-outs and body copy are actually
looking good. So please, pressure your clients,
co-workers, designers and writers to get it.

18. MUTUALLY HUMAN
Real content has
character and can
be unpredictable
This leads to less than stellar positioning of
Keep content in mind. words. You need the content to know if the
sizes you are choosing for headlines, sub-
heads, call-outs and body copy are actually
looking good. So please, pressure your clients,
co-workers, designers and writers to get it.
Then you can make everything t properly for
maximum readability! Yay. Happiness.

19. MUTUALLY HUMAN
Choosing a font

20. MUTUALLY HUMAN
Start simple

21. MUTUALLY HUMAN
Be playful

22. MUTUALLY HUMAN
Explore good resources
like Typekit and Fonts.com

23. MUTUALLY HUMAN
Line Height

24. MUTUALLY HUMAN
Line height is
the space between lines.

25. MUTUALLY HUMAN
You can alter the appearance, Line height can allow you to
create an interesting visual
context and potency of your effect, drive home a point or
call out information.
message by adjusting line
I wouldn’t recommend going
too crazy with it for body copy
though. Quotes, headlines and
height of your copy. extraneous info only.

26. MUTUALLY HUMAN
Letter Spacing

27. MUTUALLY HUMAN
Letter spacing is,
the space between
L E T T E R S

28. MUTUALLY HUMAN
B c r f l i hl t e s a i g
e a e u wt e t r p cn .
Use it sparingly for
MAXIMUM EFFECT

29. MUTUALLY HUMAN
Vary type

30. MUTUALLY HUMAN
& move eyes with type

31. MUTUALLY HUMAN
Mix thicks
with thins
Change sizes for subheads
Switch to a serif for body Others like the stability and
copy. It is often easier to feeling of a san-serif font.
read. Some people prefer it. Neither are wrong.
True story.

32. MUTUALLY HUMAN
Mix thicks
with thins
Change sizes for subheads
Switch to a serif for body Others like the stability and
copy. It is often easier to feeling of a san-serif font.
read. Some people prefer it. Neither are wrong.
True story.

33. MUTUALLY HUMAN
Learn about grids

34. MUTUALLY HUMAN
Let the grid guide you

35. MUTUALLY HUMAN
1. 2. 3.

36. MUTUALLY HUMAN
1. 2. 3.

37. MUTUALLY HUMAN
1. 2. 3.
Word to the wise
regarding grids

38. MUTUALLY HUMAN
1. 2. 3.
Word to the wise
regarding grids
You really shouldn’t let your line-length run longer
than 2/3 the width of your layout. Here it is easy, this
is a 3 column grid. If you are using 5, the ratio is 3/5.
7, 4/7. Etc.
It isn’t an exact science. The reason for doing this
is readability. If you let your line-length go to long, it
is very hard to read. Then you end up with no one
reading your words. What could be more sad? So use
shorter lines. It will increase readability.

39. MUTUALLY HUMAN
1. 2. 3.
“Then you
have another
column for
pull-quotes”
The Editor
Word to the wise
regarding grids
You really shouldn’t let your line-length run longer
than 2/3 the width of your layout. Here it is easy, this
is a 3 column grid. If you are using 5, the ratio is 3/5.
7, 4/7. Etc.
It isn’t an exact science. The reason for doing this
is readability. If you let your line-length go to long, it
is very hard to read. Then you end up with no one
reading your words. What could be more sad? So use
shorter lines. It will increase readability.

40. MUTUALLY HUMAN
1. 2. 3.
“Then you
have another
column for
pull-quotes”
The Editor
Word to the wise
regarding grids Or recommended
article links
You really shouldn’t let your line-length run longer
than 2/3 the width of your layout. Here it is easy, this Basic font stuff
is a 3 column grid. If you are using 5, the ratio is 3/5.
7, 4/7. Etc. Don’t use comic sans
It isn’t an exact science. The reason for doing this Lorem ipsum sucks
is readability. If you let your line-length go to long, it
is very hard to read. Then you end up with no one Vary type
reading your words. What could be more sad? So use
shorter lines. It will increase readability.

41. MUTUALLY HUMAN
“Then you
have another
column for
pull-quotes”
The Editor
Word to the wise
regarding grids Or recommended
article links
You really shouldn’t let your line-length run longer
than 2/3 the width of your layout. Here it is easy, this Basic font stuff
is a 3 column grid. If you are using 5, the ratio is 3/5.
7, 4/7. Etc. Don’t use comic sans
It isn’t an exact science. The reason for doing this Lorem ipsum sucks
is readability. If you let your line-length go to long, it
is very hard to read. Then you end up with no one Vary type
reading your words. What could be more sad? So use
shorter lines. It will increase readability.

42. MUTUALLY HUMAN
“Then you
have another
column for
pull-quotes”
The Editor
Word to the wise
regarding grids Or recommended
article links
You really shouldn’t let your line-length run longer
than 2/3 the width of your layout. Here it is easy, this Basic font stuff
is a 3 column grid. If you are using 5, the ratio is 3/5.
7, 4/7. Etc. Don’t use comic sans
It isn’t an exact science. The reason for doing this Lorem ipsum sucks
is readability. If you let your line-length go to long, it
is very hard to read. Then you end up with no one Vary type
reading your words. What could be more sad? So use
shorter lines. It will increase readability.

43. MUTUALLY HUMAN
1. 2. 3. 4. 5.

44. MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type
into a 5-column grid.

45. MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type
into a 5-column grid.
You don’t have to
keep copy in strict
column blocks when
you use a grid.

46. MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type
into a 5-column grid.
You don’t have to
In fact, it is quite
liberating to move
the copy blocks
keep copy in strict around to see what
affect it may have
column blocks when on the nature of the
content. As long as
you use a grid. you pay attention to
flow, it can work.

47. MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type
into a 5-column grid.
You don’t have to
In fact, it is quite
liberating to move
the copy blocks
keep copy in strict around to see what
affect it may have
column blocks when on the nature of the
content. As long as
you use a grid. you pay attention to
flow, it can work.
You can achieve a print-like feel to your copy
if you experiment with inserting large blocks
of copy where they aren’t expected. It also
helps lead the users eye and create something
they haven’t seen before.

48. MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type
into a 5-column grid.
You don’t have to
In fact, it is quite
liberating to move
the copy blocks
keep copy in strict around to see what
affect it may have
column blocks when on the nature of the
content. As long as
The most
you use a grid. you pay attention to
flow, it can work. important
You can achieve a print-like feel to your copy thing is to
if you experiment with inserting large blocks
of copy where they aren’t expected. It also
keep those
helps lead the users eye and create something eyes moving
they haven’t seen before.
in the right
direction.

49. MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type
into a 5-column grid.
You don’t have to
In fact, it is quite
liberating to move
the copy blocks
keep copy in strict around to see what
affect it may have
column blocks when on the nature of the
content. As long as
The most
you use a grid. you pay attention to
flow, it can work. important
You can achieve a print-like feel to your copy thing is to
if you experiment with inserting large blocks
of copy where they aren’t expected. It also
keep those
helps lead the users eye and create something eyes moving
they haven’t seen before.
in the right
direction.
Ya dig?

50. MUTUALLY HUMAN
Here, I’m laying the type
into a 5-column grid.
You don’t have to
In fact, it is quite
liberating to move
the copy blocks
keep copy in strict around to see what
affect it may have
column blocks when on the nature of the
content. As long as
The most
you use a grid. you pay attention to
flow, it can work. important
You can achieve a print-like feel to your copy thing is to
if you experiment with inserting large blocks
of copy where they aren’t expected. It also
keep those
helps lead the users eye and create something eyes moving
they haven’t seen before.
in the right
direction.
Ya dig?

51. MUTUALLY HUMAN
Here, I’m laying the type
into a 5-column grid.
You don’t have to
In fact, it is quite
liberating to move
the copy blocks
keep copy in strict around to see what
affect it may have
column blocks when on the nature of the
content. As long as
The most
you use a grid. you pay attention to
flow, it can work. important
You can achieve a print-like feel to your copy thing is to
if you experiment with inserting large blocks
of copy where they aren’t expected. It also
keep those
helps lead the users eye and create something eyes moving
they haven’t seen before.
in the right
direction.
Ya dig?

52. MUTUALLY HUMAN
Reading list

53. MUTUALLY HUMAN
Thinking with Type Grid Systems Designing with the Ordering Disorder
by Ellen Lupton by Kimberly Elam Mind in Mind by Khoi Vinh
by Jeff Johnson
Typography Insight
(iPad app)
by Dong Yoon Park

54. MUTUALLY HUMAN
Thank you so much!