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

  • 850 views
Uploaded on

 

More in: 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
850
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
17
Comments
0
Likes
10

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. Server tuning with terminal
  • 2. Just my Type holy crap you guys you’re gonna learn so much about typography today
  • 3. Introductions9:00–9:15
  • 4. Introductions9:00–9:15 What is typography for?9:15–10:00
  • 5. Introductions9:00–9:15 What is typography for?9:15–10:00 Typographic personality: choosing and pairing typefaces 10:00-11:00
  • 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. 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. 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. 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. 13:30-13:45 A rundown of webfont services
  • 11. 13:30-13:45 A rundown of webfont services 13:45:–15:00 Implementing webfonts (MyFonts, Google Web Fonts, Typekit)
  • 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: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. 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. 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. Introductions Who you are, where you work, what you do, where you’re from, what you want to get out of today
  • 17. mamp.info
  • 18. What is typography for?
  • 19. Typography exists to honor content.
  • 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. What do you know about typography on the web?
  • 22. Understanding letters
  • 23. Logos
  • 24. Guidelines for letters
  • 25. The tops of letters are easier to read than the bottoms.
  • 26. Mixed case is easier to read than all caps.
  • 27. looking at letterforms differently An exercise
  • 28. dmall.me/ZnQgQMdmall.me/1aUUf9j
  • 29. Letter
  • 30. Letter Raleway Heavy, 300pt
  • 31. Letter Raleway Heavy, 300pt Lora Italic, 24pt
  • 32. Drawing type An exercise
  • 33. typographic personality
  • 34. Stereotypes
  • 35. Stereotype-ography
  • 36. dmall.me/NFXpmz
  • 37. Partner up An exercise
  • 38. Character character
  • 39. Historical Context
  • 40. dmall.me/182p67W
  • 41. Foundry Stereotype-ography
  • 42. Type-inspired interfaces
  • 43. dmall.me/15C57Zw
  • 44. Critiquing Type
  • 45. theverge.com
  • 46. tapmates.com
  • 47. Open critique
  • 48. breaktime
  • 49. webfonts
  • 50. The difference between desktop fonts and webfonts
  • 51. dmall.me/18VPP5V
  • 52. Choosing webfonts
  • 53. Hinting
  • 54. dmall.me/1alFjCR
  • 55. dmall.me/1aRJj1v
  • 56. Comparing webfonts services by on-screen rendering
  • 57. dmall.me/18VQmVk
  • 58. Comparing rendering across browsers
  • 59. implementing webfonts
  • 60. Web-safe fonts vs. webfonts
  • 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. h1 { font-family: Georgia, ‘Times New Roman’, serif; }
  • 63. h1 { font-family: Sentinel, Georgia, ‘Times New Roman’, serif; }
  • 64. @font-face { font-family: 'Sentinel'; src: url('sentinel.ttf'); } h1 { font-family: Sentinel, Georgia, ‘Times New Roman’, serif; }
  • 65. dmall.me/13lvthx
  • 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. dmall.me/182z4Gg
  • 68. myfonts.com
  • 69. html5boilerplate.com
  • 70. google.com/fonts
  • 71. typekit.com
  • 72. Movie titles An exercise
  • 73. annyas.com/screenshots
  • 74. typecast.com
  • 75. Thanks! B u @danielmall dan@danielmall.com