Your SlideShare is downloading. ×
0
Server tuning
with terminal
Just my
Type
holy crap you guys you’re gonna
learn so much about typography today
Introductions9:00–9:15
Introductions9:00–9:15
What is typography for?9:15–10:00
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:...
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:...
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:...
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:...
Introductions9:00–9:15
What is typography for?9:15–10:00
Typographic personality: choosing
and pairing typefaces
10:00-11:...
13:30-13:45 A rundown of webfont services
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15...
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15...
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15...
13:30-13:45 A rundown of webfont services
13:45:–15:00 Implementing webfonts (MyFonts,
Google Web Fonts, Typekit)
15:00–15...
Introductions
Who you are, where you work, what you do,
where you’re from, what you want to get out of today
mamp.info
What is typography for?
Typography exists to honor content.
Typography must often draw attention
to itself before it will be read. Yet in
order to be read, it must relinquish the
att...
What do you know about
typography on the web?
Understanding letters
Logos
Guidelines for letters
The tops of letters are easier to read
than the bottoms.
Mixed case is easier to read
than all caps.
looking at letterforms
differently
An exercise
dmall.me/ZnQgQMdmall.me/1aUUf9j
Letter
Letter
Raleway Heavy, 300pt
Letter
Raleway Heavy, 300pt
Lora Italic, 24pt
Drawing type
An exercise
typographic
personality
Stereotypes
Stereotype-ography
dmall.me/NFXpmz
Partner up
An exercise
Character character
Historical Context
dmall.me/182p67W
Foundry Stereotype-ography
Type-inspired interfaces
dmall.me/15C57Zw
Critiquing Type
theverge.com
tapmates.com
Open critique
breaktime
webfonts
The difference between
desktop fonts and webfonts
dmall.me/18VPP5V
Choosing webfonts
Hinting
dmall.me/1alFjCR
dmall.me/1aRJj1v
Comparing webfonts services by
on-screen rendering
dmall.me/18VQmVk
Comparing rendering across browsers
implementing webfonts
Web-safe fonts vs. webfonts
SERIF
Georgia, Times New Roman,
Book Antiqua, Palatino
SANS-SERIF
Arial, Comic Sans, Geneva, Helvetica,
Impact, Lucida San...
h1 {
font-family: Georgia, ‘Times New Roman’, serif;
}
h1 {
font-family: Sentinel, Georgia, ‘Times New Roman’, serif;
}
@font-face {
font-family: 'Sentinel';
src: url('sentinel.ttf');
}
h1 {
font-family: Sentinel, Georgia, ‘Times New Roman’, ...
dmall.me/13lvthx
@font-face {
font-family: 'Sentinel';
src: url('sentinel.eot?#iefix') format('embedded-
opentype'),
url('sentinel.woff') f...
dmall.me/182z4Gg
myfonts.com
html5boilerplate.com
google.com/fonts
typekit.com
Movie titles
An exercise
annyas.com/screenshots
typecast.com
Thanks!
B u
@danielmall dan@danielmall.com
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Just My Type: Be the Typographer You Were Born to Be
Upcoming SlideShare
Loading in...5
×

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

1,026

Published on

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

No Downloads
Views
Total Views
1,026
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
18
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×