Practical Typography - Type for non-designers

  • 1,373 views
Uploaded on

A presentation about how to use type effectively if you aren't a designer.

A presentation about how to use type effectively if you aren't a designer.

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,373
On Slideshare
0
From Embeds
0
Number of Embeds
5

Actions

Shares
Downloads
30
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. MUTUALLY HUMANPractical TypographyOr, “How to make your work look great,even if you arent a designer." Victor Sirotek @mercilessrobot
  • 2. MUTUALLY HUMANSome basic S’s
  • 3. MUTUALLY HUMANSerif S
  • 4. S MUTUALLY HUMANSans-Serif
  • 5. MUTUALLY HUMANScript S
  • 6. S MUTUALLY HUMANStupid
  • 7. MUTUALLY HUMAN‘Fun’ font fact
  • 8. MUTUALLY HUMANMarker Feltis the less offensive cousin ofComic Sans
  • 9. MUTUALLY HUMANMarker Feltis the less offensive cousin ofComic SansComic Sans
  • 10. MUTUALLY HUMANWhy doestypographymatter?
  • 11. MUTUALLY HUMANIt helps us tell stories
  • 12. 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.
  • 13. MUTUALLY HUMANHow to tell stories
  • 14. MUTUALLY HUMANContent
  • 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 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.
  • 18. 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.
  • 19. MUTUALLY HUMANChoosing a font
  • 20. MUTUALLY HUMANStart simple
  • 21. MUTUALLY HUMANBe playful
  • 22. MUTUALLY HUMANExplore good resourceslike Typekit and Fonts.com
  • 23. MUTUALLY HUMANLine Height
  • 24. MUTUALLY HUMANLine height isthe space between lines.
  • 25. 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.
  • 26. MUTUALLY HUMANLetter Spacing
  • 27. MUTUALLY HUMANLetter spacing is,the space betweenL E T T E R S
  • 28. 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
  • 29. MUTUALLY HUMANVary type
  • 30. MUTUALLY HUMAN& move eyes with type
  • 31. 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.
  • 32. 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.
  • 33. MUTUALLY HUMANLearn about grids
  • 34. MUTUALLY HUMANLet the grid guide you
  • 35. MUTUALLY HUMAN1. 2. 3.
  • 36. MUTUALLY HUMAN1. 2. 3.
  • 37. MUTUALLY HUMAN 1. 2. 3.Word to the wiseregarding grids
  • 38. 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.
  • 39. 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.
  • 40. 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.
  • 41. 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.
  • 42. 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.
  • 43. MUTUALLY HUMAN1. 2. 3. 4. 5.
  • 44. MUTUALLY HUMAN 1. 2. 3. 4. 5.Here, I’m laying the typeinto a 5-column grid.
  • 45. 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.
  • 46. 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.
  • 47. 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.
  • 48. 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.
  • 49. 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?
  • 50. 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?
  • 51. 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?
  • 52. MUTUALLY HUMANReading list
  • 53. 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
  • 54. MUTUALLY HUMANThank you so much!