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