Just My Type: Be the Typographer You Were Born to Be

1,432 views
1,325 views

Published on

Published in: Design
0 Comments
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,432
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
19
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Just My Type: Be the Typographer You Were Born to Be

  1. 1. Server tuning with terminal
  2. 2. Just my Type holy crap you guys you’re gonna learn so much about typography today
  3. 3. Introductions9:00–9:15
  4. 4. Introductions9:00–9:15 What is typography for?9:15–10:00
  5. 5. Introductions9:00–9:15 What is typography for?9:15–10:00 Typographic personality: choosing and pairing typefaces 10:00-11:00
  6. 6. Introductions9:00–9:15 What is typography for?9:15–10:00 Typographic personality: choosing and pairing typefaces 10:00-11:00 11:00–11:15 Break
  7. 7. Introductions9:00–9:15 What is typography for?9:15–10:00 Typographic personality: choosing and pairing typefaces 10:00-11:00 11:00–11:15 Break 11:15–11:45 Open critique
  8. 8. Introductions9:00–9:15 What is typography for?9:15–10:00 Typographic personality: choosing and pairing typefaces 10:00-11:00 11:00–11:15 Break 11:15–11:45 Open critique 11:45–12:30 Understanding web typography
  9. 9. Introductions9:00–9:15 What is typography for?9:15–10:00 Typographic personality: choosing and pairing typefaces 10:00-11:00 11:00–11:15 Break 11:15–11:45 Open critique 11:45–12:30 Understanding web typography 12:30–13:30 Lunch
  10. 10. 13:30-13:45 A rundown of webfont services
  11. 11. 13:30-13:45 A rundown of webfont services 13:45:–15:00 Implementing webfonts (MyFonts, Google Web Fonts, Typekit)
  12. 12. 13:30-13:45 A rundown of webfont services 13:45:–15:00 Implementing webfonts (MyFonts, Google Web Fonts, Typekit) 15:00–15:15 Coffee Break
  13. 13. 13:30-13:45 A rundown of webfont services 13:45:–15:00 Implementing webfonts (MyFonts, Google Web Fonts, Typekit) 15:00–15:15 Coffee Break 15:15–16:00 An exercise: webfonts in action
  14. 14. 13:30-13:45 A rundown of webfont services 13:45:–15:00 Implementing webfonts (MyFonts, Google Web Fonts, Typekit) 15:00–15:15 Coffee Break 15:15–16:00 An exercise: webfonts in action 16:00–16:50 Typecast, lettering.js, other tools, and open time
  15. 15. 13:30-13:45 A rundown of webfont services 13:45:–15:00 Implementing webfonts (MyFonts, Google Web Fonts, Typekit) 15:00–15:15 Coffee Break 15:15–16:00 An exercise: webfonts in action 16:00–16:50 Typecast, lettering.js, other tools, and open time 16:50–17:00 Wrap-up, hugs, and fistbumps
  16. 16. Introductions Who you are, where you work, what you do, where you’re from, what you want to get out of today
  17. 17. mamp.info
  18. 18. What is typography for?
  19. 19. Typography exists to honor content.
  20. 20. Typography must often draw attention to itself before it will be read. Yet in order to be read, it must relinquish the attention it has drawn.
  21. 21. What do you know about typography on the web?
  22. 22. Understanding letters
  23. 23. Logos
  24. 24. Guidelines for letters
  25. 25. The tops of letters are easier to read than the bottoms.
  26. 26. Mixed case is easier to read than all caps.
  27. 27. looking at letterforms differently An exercise
  28. 28. dmall.me/ZnQgQMdmall.me/1aUUf9j
  29. 29. Letter
  30. 30. Letter Raleway Heavy, 300pt
  31. 31. Letter Raleway Heavy, 300pt Lora Italic, 24pt
  32. 32. Drawing type An exercise
  33. 33. typographic personality
  34. 34. Stereotypes
  35. 35. Stereotype-ography
  36. 36. dmall.me/NFXpmz
  37. 37. Partner up An exercise
  38. 38. Character character
  39. 39. Historical Context
  40. 40. dmall.me/182p67W
  41. 41. Foundry Stereotype-ography
  42. 42. Type-inspired interfaces
  43. 43. dmall.me/15C57Zw
  44. 44. Critiquing Type
  45. 45. theverge.com
  46. 46. tapmates.com
  47. 47. Open critique
  48. 48. breaktime
  49. 49. webfonts
  50. 50. The difference between desktop fonts and webfonts
  51. 51. dmall.me/18VPP5V
  52. 52. Choosing webfonts
  53. 53. Hinting
  54. 54. dmall.me/1alFjCR
  55. 55. dmall.me/1aRJj1v
  56. 56. Comparing webfonts services by on-screen rendering
  57. 57. dmall.me/18VQmVk
  58. 58. Comparing rendering across browsers
  59. 59. implementing webfonts
  60. 60. Web-safe fonts vs. webfonts
  61. 61. SERIF Georgia, Times New Roman, Book Antiqua, Palatino SANS-SERIF Arial, Comic Sans, Geneva, Helvetica, Impact, Lucida Sans, Tahoma, Trebuchet MS, Verdana Web-safe
  62. 62. h1 { font-family: Georgia, ‘Times New Roman’, serif; }
  63. 63. h1 { font-family: Sentinel, Georgia, ‘Times New Roman’, serif; }
  64. 64. @font-face { font-family: 'Sentinel'; src: url('sentinel.ttf'); } h1 { font-family: Sentinel, Georgia, ‘Times New Roman’, serif; }
  65. 65. dmall.me/13lvthx
  66. 66. @font-face { font-family: 'Sentinel'; src: url('sentinel.eot?#iefix') format('embedded- opentype'), url('sentinel.woff') format('woff'), url('sentinel.ttf') format('truetype'), url('sentinel.svg#svgFontName') format('svg'); } h1 { font-family: Sentinel, Georgia, ‘Times New Roman’, serif; }
  67. 67. dmall.me/182z4Gg
  68. 68. myfonts.com
  69. 69. html5boilerplate.com
  70. 70. google.com/fonts
  71. 71. typekit.com
  72. 72. Movie titles An exercise
  73. 73. annyas.com/screenshots
  74. 74. typecast.com
  75. 75. Thanks! B u @danielmall dan@danielmall.com

×