Practical Typography - Type for non-designers

MUTUALLY HUMANPractical TypographyOr, “How to make your work look great,even if you arent a designer." Victor Sirotek @mercilessrobot

MUTUALLY HUMANSome basic S’s

MUTUALLY HUMANSerif S

S MUTUALLY HUMANSans-Serif

MUTUALLY HUMANScript S

S MUTUALLY HUMANStupid

MUTUALLY HUMAN‘Fun’ font fact

MUTUALLY HUMANMarker Feltis the less offensive cousin ofComic Sans

MUTUALLY HUMANMarker Feltis the less offensive cousin ofComic SansComic Sans

MUTUALLY HUMANWhy doestypographymatter?

MUTUALLY HUMANIt helps us tell stories

MUTUALLY HUMANOnce upon a time people got boredquickly when reading on the web.Then one day, a little old lady learned that the way tocombat this is to tell stories because people like them.They make the content of the message easier to digestand greatly increase our comprehension.

MUTUALLY HUMANHow to tell stories

MUTUALLY HUMANContent

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.

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.

MUTUALLY HUMAN Real content has character and can be unpredictableSwitch 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.

MUTUALLY HUMAN Real content has character and can be unpredictable This leads to less than stellar positioning ofKeep 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.

MUTUALLY HUMANChoosing a font

MUTUALLY HUMANStart simple

MUTUALLY HUMANBe playful

MUTUALLY HUMANExplore good resourceslike Typekit and Fonts.com

MUTUALLY HUMANLine Height

MUTUALLY HUMANLine height isthe space between lines.

MUTUALLY HUMANYou can alter the appearance, Line height can allow you to create an interesting visualcontext 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 andheight of your copy. extraneous info only.

MUTUALLY HUMANLetter Spacing

MUTUALLY HUMANLetter spacing is,the space betweenL E T T E R S

MUTUALLY HUMANB 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 forMAXIMUM EFFECT

MUTUALLY HUMANVary type

MUTUALLY HUMAN& move eyes with type

MUTUALLY HUMANMix thickswith thinsChange sizes for subheadsSwitch to a serif for body Others like the stability andcopy. It is often easier to feeling of a san-serif font.read. Some people prefer it. Neither are wrong. True story.

MUTUALLY HUMANLearn about grids

MUTUALLY HUMANLet the grid guide you

MUTUALLY HUMAN1. 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 longerthan 2/3 the width of your layout. Here it is easy, thisis 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 thisis readability. If you let your line-length go to long, itis very hard to read. Then you end up with no onereading your words. What could be more sad? So useshorter lines. It will increase readability.

MUTUALLY HUMAN 1. 2. 3. “Then you have another column for pull-quotes” The EditorWord to the wiseregarding gridsYou really shouldn’t let your line-length run longerthan 2/3 the width of your layout. Here it is easy, thisis 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 thisis readability. If you let your line-length go to long, itis very hard to read. Then you end up with no onereading your words. What could be more sad? So useshorter lines. It will increase readability.

MUTUALLY HUMAN 1. 2. 3. “Then you have another column for pull-quotes” The EditorWord to the wiseregarding grids Or recommended article linksYou really shouldn’t let your line-length run longerthan 2/3 the width of your layout. Here it is easy, this Basic font stuffis a 3 column grid. If you are using 5, the ratio is 3/5.7, 4/7. Etc. Don’t use comic sansIt isn’t an exact science. The reason for doing this Lorem ipsum sucksis readability. If you let your line-length go to long, itis very hard to read. Then you end up with no one Vary typereading your words. What could be more sad? So useshorter lines. It will increase readability.

MUTUALLY HUMAN “Then you have another column for pull-quotes” The EditorWord to the wiseregarding grids Or recommended article linksYou really shouldn’t let your line-length run longerthan 2/3 the width of your layout. Here it is easy, this Basic font stuffis a 3 column grid. If you are using 5, the ratio is 3/5.7, 4/7. Etc. Don’t use comic sansIt isn’t an exact science. The reason for doing this Lorem ipsum sucksis readability. If you let your line-length go to long, itis very hard to read. Then you end up with no one Vary typereading your words. What could be more sad? So useshorter lines. It will increase readability.

MUTUALLY HUMAN1. 2. 3. 4. 5.

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

MUTUALLY HUMAN 1. 2. 3. 4. 5.Here, I’m laying the typeinto 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 typeinto 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.

MUTUALLY HUMAN 1. 2. 3. 4. 5.Here, I’m laying the typeinto 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.

MUTUALLY HUMAN 1. 2. 3. 4. 5.Here, I’m laying the typeinto 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.

MUTUALLY HUMAN 1. 2. 3. 4. 5.Here, I’m laying the typeinto 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?

MUTUALLY HUMANHere, I’m laying the typeinto 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?

MUTUALLY HUMANReading list

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

MUTUALLY HUMANThank you so much!

https://napavalley.blackboard.com	92
http://www.mutuallyhuman.com	20
http://mutuallyhuman.com	11
http://localhost:3000	2
http://localhost	2
http://mhs.github.com	1

Practical Typography - Type for non-designers

by Victor Sirotek

Accessibility

Categories

Upload Details

Usage Rights

6 Embeds 128

Statistics

Practical Typography - Type for non-designers Presentation Transcript