Practical Typography - Type for non-designers
-
Upload
victor-sirotek -
Category
Technology
-
view
108 -
download
2
description
Transcript of Practical Typography - Type for non-designers
Victor Sirotek
Practical TypographyOr, “How to make your work look great, even if you aren't a designer."
MUTUALLY HUMAN
@mercilessrobot
Some basic S’s
MUTUALLY HUMAN
Serif
MUTUALLY HUMAN
S
Sans-Serif
MUTUALLY HUMAN
S
Script
MUTUALLY HUMAN
S
Stupid
MUTUALLY HUMAN
S
‘Fun’ font fact
MUTUALLY HUMAN
Marker Felt
MUTUALLY HUMAN
is the less offensive cousin of
Comic Sans
Marker Felt
MUTUALLY HUMAN
is the less offensive cousin of
Comic SansComic Sans
Why does typographymatter?
MUTUALLY HUMAN
It helps us tell stories
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.
MUTUALLY HUMAN
How to tell stories
MUTUALLY HUMAN
Content
MUTUALLY HUMAN
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.
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.
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.
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.
Choosing a font
MUTUALLY HUMAN
Start simple
MUTUALLY HUMAN
Be playful
MUTUALLY HUMAN
Explore good resources like Typekit and Fonts.com
MUTUALLY HUMAN
Line Height
MUTUALLY HUMAN
Line height is
the space between lines.
MUTUALLY HUMAN
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.
Letter Spacing
MUTUALLY HUMAN
Letter spacing is,the space between L E T T E R S
MUTUALLY HUMAN
MUTUALLY HUMAN
Be careful with letter spacing.Use it sparingly for
M A X I M U M E F F E C T
Vary type
MUTUALLY HUMAN
& move eyes with type
MUTUALLY HUMAN
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.
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.
Learn about grids
MUTUALLY HUMAN
Let the grid guide you
MUTUALLY HUMAN
MUTUALLY HUMAN
1. 2. 3.
MUTUALLY HUMAN
1. 2. 3.
MUTUALLY HUMAN
1. 2. 3.
Word to the wiseregarding grids
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.
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”
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
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
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
MUTUALLY HUMAN
1. 2. 3. 4. 5.
MUTUALLY HUMAN
1. 2. 3. 4. 5.
Here, I’m laying the type into a 5-column grid.
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.
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.
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.
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.
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.
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.
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.
Reading list
MUTUALLY HUMAN
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
Thank you so much!
MUTUALLY HUMAN