Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Typography

595 views

Published on

A talk I gave about the basics of Typography to a group of NYU technology students interested in bettering the design of apps they were creating

Published in: Design
  • Be the first to comment

Typography

  1. 1. Typog Visual Design Basics | typography derrick schultz | derrick.schultz@openairpub.com
  2. 2. What is Typography?
  3. 3. Garamond Didot Helvetica Myriad
  4. 4. Is hating Comic Sans typography?
  5. 5. thinking with type ellen lupton
  6. 6. Typography is information.
  7. 7. Typography has context. There’s really no perfect typography in every situation. Really.
  8. 8. Typography has context. ages / disabilities
  9. 9. Typography has context. devices / environment
  10. 10. Typography is legible. Paragraphs do not occur in nature. Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a liter- ary convention designed to divide masses of content into appetizing portions. Indents have been common since the seventeenth cen- tury. Adding space between paragraphs (paragraph spacing) is another standard device. On the web, a paragraph is a semantic unit (the <p> tag in html) that is typically displayed on screen with space inserted after it. A typical indent is an em space, or a quad, a fixed unit of space roughly the width of the letter's cap height. An em is thus proportional to the size of the type; if you change the point size or col- umn width, the indents will remain appropriately scaled. Alternatively, you can use the tab key to create an indent of any depth. A designer might use this technique in order to align the indents with a vertical grid line or other page element. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways.
  11. 11. Typography is legible. line-height / line spacing Paragraphs do not occur in nature.Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a literary convention designed to divide masses of content into appetizing portions. Indents have been common since the seventeenth century. Adding space between paragraphs (paragraph spacing) is another standard device. On the web, a paragraph is a semantic unit (the <p> tag in html) that is typically displayed on screen with space inserted after it. A typical indent is an em space, or a quad, a fixed unit of space roughly the width of the letter's cap height. An em is thus proportional to the size of the type; if you change the point size or column width, the indents will remain appropriately scaled. Alternatively, you can use the tab key to create an indent of any depth. A designer might use this technique in order to align the indents with a vertical grid line or other page element. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways.
  12. 12. Typography is legible. line length Paragraphs do not occur in nature.Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a literary convention designed to divide masses of content into appetizing portions. Indents have been common since the seventeenth century. Adding space between paragraphs (paragraph spacing) is another standard device. On the web, a paragraph is a semantic unit (the <p> tag in html) that is typically displayed on screen with space inserted after it. A typical indent is an em space, or a quad, a fixed unit of space roughly the width of the letter's cap height. An em is thus proportional to the size of the type; if you change the point size or column width, the indents will remain appropriately scaled. Alternatively, you can use the tab key to create an indent of any depth. A designer might use this technique in order to align the indents with a vertical grid line or other page element. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways.
  13. 13. Typography is legible. paragraph breaks
  14. 14. Typography has hierarchy. Paragraphs do not occur in nature.Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a literary convention designed to divide masses of content into appetizing portions. Indents have been common since the seventeenth century. Adding space between paragraphs (paragraph spacing) is another standard device. On the web, a paragraph is a semantic unit (the <p> tag in html) that is typically displayed on screen with space inserted after it. A typical indent is an em space, or a quad, a fixed unit of space roughly the width of the letter's cap height. An em is thus proportional to the size of the type; if you change the point size or column width, the indents will remain appropriately scaled. Alternatively, you can use the tab key to create an indent of any depth. A designer might use this technique in order to align the indents with a vertical grid line or other page element. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways.
  15. 15. Typography has hierarchy. Paragraphs do not occur in nature. Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a literary convention designed to divide masses of content into appetizing portions. Indents have been common since the seventeenth century. Adding space between paragraphs (paragraph spacing) is another standard device. On the web, a paragraph is a semantic unit (the <p> tag in html) that is typically displayed on screen with space inserted after it. A typical indent is an em space, or a quad, a fixed unit of space roughly the width of the letter's cap height. An em is thus proportional to the size of the type; if you change the point size or column width, the indents will remain appropriately scaled. Alternatively, you can use the tab key to create an indent of any depth. A designer might use this technique in order to align the indents with a vertical grid line or other page element. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways.
  16. 16. Typography has hierarchy. Paragraphs do not occur in nature. Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a literary convention designed to divide masses of content into appetizing portions. Indents have been common since the seventeenth century. Adding space between paragraphs (paragraph spacing) is another standard device. On the web, a paragraph is a semantic unit (the <p> tag in html) that is typically displayed on screen with space inserted after it. A typical indent is an em space, or a quad, a fixed unit of space roughly the width of the letter's cap height. An em is thus proportional to the size of the type; if you change the point size or column width, the indents will remain appropriately scaled. Alternatively, you can use the tab key to create an indent of any depth. A designer might use this technique in order to align the indents with a vertical grid line or other page element. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways.
  17. 17. Typography has hierarchy. Indents have been common since the seventeenth century. Adding space between paragraphs (paragraph spacing) is another standard device. On the web, a paragraph is a semantic unit (the <p> tag in html) that is typically displayed on screen with space inserted after it. A typical indent is an em space, or a quad, a fixed unit of space roughly the width of the letter's cap height. An em is thus proportional to the size of the type; if you change the point size or column width, the indents will remain appropriately scaled. Alternatively, you can use the tab key to create an indent of any depth. A designer might use this technique in order to align the indents with a vertical grid line or other page element. Avoid indenting the very first line of a body of text. An indent signals a break or separation; there is no need to make a break when the text has just begun. Despite the ubiquity of indents and paragraph spacing, designers have developed numerous alternatives that allow them to shape content in distinctive ways. Whereas sentences are grammatical units intrinsic to the spoken language, paragraphs are a literary convention designed to divide masses of content into appetizing portions. Paragraphs do not occur in nature.
  18. 18. okay, Typography isn’t just information.
  19. 19. Typography has emotion. history / feeling / usage
  20. 20. timeto Play Time.
  21. 21. thinking with type ellen lupton
  22. 22. THE RULES 1. Black & white only. 2. One typeface. 3. One font size. 4. One font weight. Game 1
  23. 23. clear
  24. 24. yelp (modified) messages
  25. 25. inkling habitat
  26. 26. THE RULES 1. Black & white only. 2. One typeface. 3. One font size. 4. Two font weights: regular and bold. Game 2
  27. 27. appstore instagram
  28. 28. youtube
  29. 29. The Rules 1. Black & white only. 2. One typeface. 3. Up to three font sizes. 4. Two font weights: regular and bold. GAME 3
  30. 30. medium
  31. 31. windows 7 os
  32. 32. 1. Black & white only. 2. Up to three typefaces. 3. Any font sizes. 4. Two font weights: regular and bold. GAME 4 Rulesthe
  33. 33. forecast.io what to tip?
  34. 34. katachi magazine
  35. 35. doodlebuzz
  36. 36. more resources http://www.thinkingwithtype.com/ http://blog.typekit.com/ http://webtypography.net/ http://ilovetypography.com/
  37. 37. Thanks Visual Design Basics Color, Line, Shape, Grid next week: derrick schultz | derrick.schultz@openairpub.com

×