practical typography - type for non-designers
DESCRIPTION
A presentation about how to use type effectively if you aren't a designer.TRANSCRIPT
![Page 1: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/1.jpg)
Victor Sirotek
Practical TypographyOr, “How to make your work look great, even if you aren't a designer."
MUTUALLY HUMAN
@mercilessrobot
![Page 2: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/2.jpg)
Some basic S’s
MUTUALLY HUMAN
![Page 3: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/3.jpg)
Serif
MUTUALLY HUMAN
S
![Page 4: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/4.jpg)
Sans-Serif
MUTUALLY HUMAN
S
![Page 5: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/5.jpg)
Script
MUTUALLY HUMAN
S
![Page 6: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/6.jpg)
Stupid
MUTUALLY HUMAN
S
![Page 7: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/7.jpg)
‘Fun’ font fact
MUTUALLY HUMAN
![Page 8: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/8.jpg)
Marker Felt
MUTUALLY HUMAN
is the less offensive cousin of
Comic Sans
![Page 9: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/9.jpg)
Marker Felt
MUTUALLY HUMAN
is the less offensive cousin of
Comic SansComic Sans
![Page 10: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/10.jpg)
Why does typographymatter?
MUTUALLY HUMAN
![Page 11: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/11.jpg)
It helps us tell stories
MUTUALLY HUMAN
![Page 12: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/12.jpg)
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.
MUTUALLY HUMAN
![Page 13: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/13.jpg)
How to tell stories
MUTUALLY HUMAN
![Page 14: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/14.jpg)
Content
MUTUALLY HUMAN
![Page 15: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/15.jpg)
MUTUALLY HUMAN
This is not content.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
![Page 16: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/16.jpg)
MUTUALLY HUMAN
This is misleading.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
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.
![Page 17: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/17.jpg)
MUTUALLY HUMAN
Switch in content and...
Real content has character and can be unpredictable
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.
![Page 18: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/18.jpg)
MUTUALLY HUMAN
Keep content in mind.
Real content has character and can be unpredictable
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.
Then you can make everything !t properly for
maximum readability! Yay. Happiness.
![Page 19: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/19.jpg)
Choosing a font
MUTUALLY HUMAN
![Page 20: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/20.jpg)
Start simple
MUTUALLY HUMAN
![Page 21: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/21.jpg)
Be playful
MUTUALLY HUMAN
![Page 22: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/22.jpg)
Explore good resources like Typekit and Fonts.com
MUTUALLY HUMAN
![Page 23: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/23.jpg)
Line Height
MUTUALLY HUMAN
![Page 24: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/24.jpg)
Line height is
the space between lines.
MUTUALLY HUMAN
![Page 25: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/25.jpg)
MUTUALLY HUMAN
You can alter the appearance,
context and potency of your
message by adjusting line
height of your copy.
Line height can allow you to
create an interesting visual
effect, drive home a point or
call out information.
I wouldn’t recommend going too crazy with it for body copy though. Quotes, headlines and extraneous info only.
![Page 26: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/26.jpg)
Letter Spacing
MUTUALLY HUMAN
![Page 27: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/27.jpg)
Letter spacing is,the space between L E T T E R S
MUTUALLY HUMAN
![Page 28: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/28.jpg)
MUTUALLY HUMAN
Be careful with letter spacing.Use it sparingly for
M A X I M U M E F F E C T
![Page 29: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/29.jpg)
Vary type
MUTUALLY HUMAN
![Page 30: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/30.jpg)
& move eyes with type
MUTUALLY HUMAN
![Page 31: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/31.jpg)
Mix thicksMUTUALLY HUMAN
with thinsChange sizes for subheads
Switch to a serif for body copy. It is often easier to read. Some people prefer it.
Others like the stability and feeling of a san-serif font. Neither are wrong.
True story.
![Page 32: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/32.jpg)
Mix thicksMUTUALLY HUMAN
with thinsChange sizes for subheads
Switch to a serif for body copy. It is often easier to read. Some people prefer it.
Others like the stability and feeling of a san-serif font. Neither are wrong.
True story.
![Page 33: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/33.jpg)
Learn about grids
MUTUALLY HUMAN
![Page 34: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/34.jpg)
Let the grid guide you
MUTUALLY HUMAN
![Page 35: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/35.jpg)
MUTUALLY HUMAN
1. 2. 3.
![Page 36: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/36.jpg)
MUTUALLY HUMAN
1. 2. 3.
![Page 37: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/37.jpg)
MUTUALLY HUMAN
1. 2. 3.
Word to the wiseregarding grids
![Page 38: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/38.jpg)
MUTUALLY HUMAN
1. 2. 3.
Word to the wiseregarding gridsYou 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.
![Page 39: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/39.jpg)
MUTUALLY HUMAN
1. 2. 3.
Word to the wiseregarding gridsYou 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.
The Editor
“Then you have another column for pull-quotes”
![Page 40: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/40.jpg)
MUTUALLY HUMAN
1. 2. 3.
Word to the wiseregarding gridsYou 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.
The Editor
“Then you have another column for pull-quotes”
Or recommended article links
Don’t use comic sans
Basic font stuff
Lorem ipsum sucks
Vary type
![Page 41: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/41.jpg)
MUTUALLY HUMAN
Word to the wiseregarding gridsYou 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.
The Editor
“Then you have another column for pull-quotes”
Or recommended article links
Don’t use comic sans
Basic font stuff
Lorem ipsum sucks
Vary type
![Page 42: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/42.jpg)
MUTUALLY HUMAN
Word to the wiseregarding gridsYou 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.
The Editor
“Then you have another column for pull-quotes”
Or recommended article links
Don’t use comic sans
Basic font stuff
Lorem ipsum sucks
Vary type
![Page 43: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/43.jpg)
MUTUALLY HUMAN
1. 2. 3. 4. 5.
![Page 44: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/44.jpg)
MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type into a 5-column grid.
![Page 45: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/45.jpg)
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.
![Page 46: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/46.jpg)
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.
In fact, it is quite liberating to move the copy blocks around to see what affect it may have on the nature of the content. As long as you pay attention to flow, it can work.
![Page 47: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/47.jpg)
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.
In fact, it is quite liberating to move the copy blocks around to see what affect it may have on the nature of the content. As long as 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.
![Page 48: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/48.jpg)
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.
In fact, it is quite liberating to move the copy blocks around to see what affect it may have on the nature of the content. As long as 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.
The most important thing is to keep those eyes moving in the right direction.
![Page 49: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/49.jpg)
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.
In fact, it is quite liberating to move the copy blocks around to see what affect it may have on the nature of the content. As long as 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.
Ya dig?
The most important thing is to keep those eyes moving in the right direction.
![Page 50: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/50.jpg)
MUTUALLY HUMAN
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.
In fact, it is quite liberating to move the copy blocks around to see what affect it may have on the nature of the content. As long as 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.
Ya dig?
The most important thing is to keep those eyes moving in the right direction.
![Page 51: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/51.jpg)
MUTUALLY HUMAN
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.
In fact, it is quite liberating to move the copy blocks around to see what affect it may have on the nature of the content. As long as 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.
Ya dig?
The most important thing is to keep those eyes moving in the right direction.
![Page 52: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/52.jpg)
Reading list
MUTUALLY HUMAN
![Page 53: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/53.jpg)
MUTUALLY HUMAN
Thinking with Typeby Ellen Lupton
Grid Systemsby Kimberly Elam
Designing with the Mind in Mindby Jeff Johnson
Ordering Disorderby Khoi Vinh
Typography Insight(iPad app)
by Dong Yoon Park
![Page 54: Practical Typography - Type for non-designers](https://reader033.vdocuments.us/reader033/viewer/2022051819/54c8131d4a795963728b45ce/html5/thumbnails/54.jpg)
Thank you so much!
MUTUALLY HUMAN