Designing With Type



    Kyle Meyer
    astheria.com + twitter.com/kylemeyer



Wednesday, June 23, 2010
— Freelance Designer (meyerkyle.com)
    — Design Blogger (astheria.com)
    — Director of Interactive Design for AIGA MN
...
Introduction




Wednesday, June 23, 2010
Introduction
                           They call this an UN-Conference.




Wednesday, June 23, 2010
Introduction
                           We’re here to have discussions.
                                There are no wrong...
Introduction
                           So this means I might call on you...
                                     Yes, you...
Goals
                1. Why Typography Matters
                2. Typography as a Craft Skill
                3. Guidelin...
1.
                           Why Typography
                              Matters


Wednesday, June 23, 2010
“         There is a theory that exists called
          the ‘Aesthetic Usability Effect’.




                            ...
“         There is a theory that exists called
          the ‘Aesthetic Usability Effect’.
          This theory suggests t...
TheCarPictures, http://www.thecarpictures.info/images/wmwallpapers/2009-Kia-Optima-001-1.jpg
Wednesday, June 23, 2010
TopSpeed, http://pictures.topspeed.com/IMG/crop/200907/2010-audi-a4-a5-q5-p_1600x0w.jpg
Wednesday, June 23, 2010
Which would you choose?

Wednesday, June 23, 2010
Apple Inc, http://www.apple.com
Wednesday, June 23, 2010
“          Web design is 95% typography.



                                                                              ...
“
 Youtube, http://www.youtube.com
Wednesday, June 23, 2010
Agree? Disagree?
                              Thoughts?
                             This is when you volunteer to discus...
2.
                           Typography as a
                              Craft Skill


Wednesday, June 23, 2010
Ira Glass on Craft




 Youtube, http://www.youtube.com/watch?v=-hidvElQ0xE&feature=player_embedded
Wednesday, June 23, 20...
Agree? Disagree?
                              Thoughts?
                             This is when you volunteer to discus...
3.
                  Guidelines for Web
                     Typography


 Information Architects, http://informationarchi...
Let’s be
                           controversial...



Wednesday, June 23, 2010
100% Easy-2-Read
                       Standard



 Information Architects, http://informationarchitects.jp/100E2R/
Wedne...
5 Guidelines
       1. Set body copy to 16 pixels




Wednesday, June 23, 2010
5 Guidelines
       1. Set body copy to 16 pixels
       2. Use adequate leading (22 pixels)




 Information Architects, ...
5 Guidelines
       1. Set body copy to 16 pixels
       2. Use adequate leading (22 pixels)
       3. Use a good measure ...
5 Guidelines
       1. Set body copy to 16 pixels
       2. Use adequate leading (22 pixels)
       3. Use a good measure ...
5 Guidelines
       1. Set body copy to 16 pixels
       2. Use adequate leading (22 pixels)
       3. Use a good measure ...
Information Architects, http://informationarchitects.jp/100E2R/
Wednesday, June 23, 2010
Yes or No? Why?
       1. Set body copy to 16 pixels
       2. Use adequate leading (22 pixels)
       3. Use a good measu...
4.
                           CSS3



Wednesday, June 23, 2010
CSS3
                           The next frontier!




Wednesday, June 23, 2010
CSS3
                           I’m guessing you’ve heard of @font-face...




Wednesday, June 23, 2010
CSS3
                           So let’s talk about other things.




Wednesday, June 23, 2010
CSS3
                   text-shadow




Wednesday, June 23, 2010
p {
                           text-shadow: right-offset top-
                           offset blur color;
           }

...
Fuel Network, http://fuelbrandinc.com/
Wednesday, June 23, 2010
p {
                           text-shadow: 2px 2px 10px
                            rgba(0, 0, 0, 0.5);
           }




...
Tinder, http://madebytinder.com/
Wednesday, June 23, 2010
p {
                           text-shadow: 0px 1px 2px
                            rgba(255, 255, 255, 0.3);
           }...
CSS3
                   text-shadow
                   column-*




Wednesday, June 23, 2010
Wednesday, June 23, 2010
div {
                           -webkit-column-count: 3;
                           -webkit-column-gap: 10px;
           ...
column-count
                           column-gap
                           column-width
                           colu...
CSS3
                   text-shadow
                   column-*
                   mask-image




Wednesday, June 23, 2010
Apple Inc, http://www.apple.com/html5/showcase/typography/
Wednesday, June 23, 2010
h1 {
                           -webkit-mask-image:
                            url(photo.png);
           }




Wednesday...
CSS3
                   text-shadow
                   column-*
                   mask-image
                   transform...
Apple Inc, http://www.apple.com/html5/showcase/typography/
Wednesday, June 23, 2010
div {
                           -webkit-transform:
                            rotate(-45deg);
           }

           d...
div {
                           filter:progid:DXImageTransform»
                           .Microsoft.BasicImage»
       ...
But what
                           about browsers?
                           Other thoughts?
                           ...
A Quick Diversion



Wednesday, June 23, 2010
Brendan Dawes, http://www.brendandawes.com/
Wednesday, June 23, 2010
Wednesday, June 23, 2010
Wednesday, June 23, 2010
Wednesday, June 23, 2010
5.
                     Discussion Topics



Wednesday, June 23, 2010
Should @font-face be
           used for body copy?
                           This is when you volunteer to discuss.




...
Are CSS typography
              frameworks useful?
                           This is when you volunteer to discuss.




...
How do you decide if a
       typeface is fit for use
          on the screen?
                           This is when you ...
How will high
           resolution displays
          effect how we handle
              typography?
                     ...
Are columns a useful
              way to read on
                 the web?
                           This is when you vo...
Progressive
    enrichment or graceful
         degradation?
                           This is when you volunteer to disc...
Suggested Watching
    Ira Glass on Storytelling — Available on Youtube

    Helvetica — Film, 2007




Wednesday, June 23...
Suggested Reading
    The Elements of Typographic Style — Robert Bringhurst

    Designing with Type — Ellen Lupton

    S...
Referenced
    Analog In, Digital Out — Brandon Dawes

    thebolditalic.com




Wednesday, June 23, 2010
Thank you!



    Kyle Meyer
    astheria.com + twitter.com/kylemeyer



Wednesday, June 23, 2010
Upcoming SlideShare
Loading in …5
×

Designing With Type :: FontConf 2010

2,102 views

Published on

Presentation given at FontConf 2010, on the why and how of designing with good type.

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

No Downloads
Views
Total views
2,102
On SlideShare
0
From Embeds
0
Number of Embeds
722
Actions
Shares
0
Downloads
44
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Designing With Type :: FontConf 2010

  1. 1. Designing With Type Kyle Meyer astheria.com + twitter.com/kylemeyer Wednesday, June 23, 2010
  2. 2. — Freelance Designer (meyerkyle.com) — Design Blogger (astheria.com) — Director of Interactive Design for AIGA MN — Typoholic Wednesday, June 23, 2010
  3. 3. Introduction Wednesday, June 23, 2010
  4. 4. Introduction They call this an UN-Conference. Wednesday, June 23, 2010
  5. 5. Introduction We’re here to have discussions. There are no wrong answers! Wednesday, June 23, 2010
  6. 6. Introduction So this means I might call on you... Yes, you in the back. Wednesday, June 23, 2010
  7. 7. Goals 1. Why Typography Matters 2. Typography as a Craft Skill 3. Guidelines for Web Typography 4. CSS3 5. Discussion Topics Wednesday, June 23, 2010
  8. 8. 1. Why Typography Matters Wednesday, June 23, 2010
  9. 9. “ There is a theory that exists called the ‘Aesthetic Usability Effect’. ” Mark Boulton, http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect Wednesday, June 23, 2010
  10. 10. “ There is a theory that exists called the ‘Aesthetic Usability Effect’. This theory suggests that things which are designed to beautiful are ” inherently more usable as a result. Mark Boulton, http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect Wednesday, June 23, 2010
  11. 11. TheCarPictures, http://www.thecarpictures.info/images/wmwallpapers/2009-Kia-Optima-001-1.jpg Wednesday, June 23, 2010
  12. 12. TopSpeed, http://pictures.topspeed.com/IMG/crop/200907/2010-audi-a4-a5-q5-p_1600x0w.jpg Wednesday, June 23, 2010
  13. 13. Which would you choose? Wednesday, June 23, 2010
  14. 14. Apple Inc, http://www.apple.com Wednesday, June 23, 2010
  15. 15. “ Web design is 95% typography. ” — Oliver Reichenstein Information Architects, http://informationarchitects.jp/the-web-is-all-about-typography-period/ Wednesday, June 23, 2010
  16. 16. “ Youtube, http://www.youtube.com Wednesday, June 23, 2010
  17. 17. Agree? Disagree? Thoughts? This is when you volunteer to discuss. Wednesday, June 23, 2010
  18. 18. 2. Typography as a Craft Skill Wednesday, June 23, 2010
  19. 19. Ira Glass on Craft Youtube, http://www.youtube.com/watch?v=-hidvElQ0xE&feature=player_embedded Wednesday, June 23, 2010
  20. 20. Agree? Disagree? Thoughts? This is when you volunteer to discuss. Wednesday, June 23, 2010
  21. 21. 3. Guidelines for Web Typography Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  22. 22. Let’s be controversial... Wednesday, June 23, 2010
  23. 23. 100% Easy-2-Read Standard Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  24. 24. 5 Guidelines 1. Set body copy to 16 pixels Wednesday, June 23, 2010
  25. 25. 5 Guidelines 1. Set body copy to 16 pixels 2. Use adequate leading (22 pixels) Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  26. 26. 5 Guidelines 1. Set body copy to 16 pixels 2. Use adequate leading (22 pixels) 3. Use a good measure (10 to 15 words per line) Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  27. 27. 5 Guidelines 1. Set body copy to 16 pixels 2. Use adequate leading (22 pixels) 3. Use a good measure (10 to 15 words per line) 4. Good contrast (black on white, white on black) Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  28. 28. 5 Guidelines 1. Set body copy to 16 pixels 2. Use adequate leading (22 pixels) 3. Use a good measure (10 to 15 words per line) 4. Good contrast (black on white, white on black) 5. Use generous whitespace Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  29. 29. Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  30. 30. Yes or No? Why? 1. Set body copy to 16 pixels 2. Use adequate leading (22 pixels) 3. Use a good measure (10 to 15 words per line) 4. High contrast 5. Use generous whitespace Information Architects, http://informationarchitects.jp/100E2R/ Wednesday, June 23, 2010
  31. 31. 4. CSS3 Wednesday, June 23, 2010
  32. 32. CSS3 The next frontier! Wednesday, June 23, 2010
  33. 33. CSS3 I’m guessing you’ve heard of @font-face... Wednesday, June 23, 2010
  34. 34. CSS3 So let’s talk about other things. Wednesday, June 23, 2010
  35. 35. CSS3 text-shadow Wednesday, June 23, 2010
  36. 36. p { text-shadow: right-offset top- offset blur color; } Wednesday, June 23, 2010
  37. 37. Fuel Network, http://fuelbrandinc.com/ Wednesday, June 23, 2010
  38. 38. p { text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5); } Wednesday, June 23, 2010
  39. 39. Tinder, http://madebytinder.com/ Wednesday, June 23, 2010
  40. 40. p { text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.3); } Wednesday, June 23, 2010
  41. 41. CSS3 text-shadow column-* Wednesday, June 23, 2010
  42. 42. Wednesday, June 23, 2010
  43. 43. div { -webkit-column-count: 3; -webkit-column-gap: 10px; } div { -moz-column-count: 3; -moz-column-gap: 10px; } Wednesday, June 23, 2010
  44. 44. column-count column-gap column-width column-rule column-span column-break Wednesday, June 23, 2010
  45. 45. CSS3 text-shadow column-* mask-image Wednesday, June 23, 2010
  46. 46. Apple Inc, http://www.apple.com/html5/showcase/typography/ Wednesday, June 23, 2010
  47. 47. h1 { -webkit-mask-image: url(photo.png); } Wednesday, June 23, 2010
  48. 48. CSS3 text-shadow column-* mask-image transform: rotate() Wednesday, June 23, 2010
  49. 49. Apple Inc, http://www.apple.com/html5/showcase/typography/ Wednesday, June 23, 2010
  50. 50. div { -webkit-transform: rotate(-45deg); } div { -moz-transform: rotate(-45deg); } Wednesday, June 23, 2010
  51. 51. div { filter:progid:DXImageTransform» .Microsoft.BasicImage» (rotation=2); } Jonathan Snook, http://snook.ca/archives/html_and_css/css-text-rotation Wednesday, June 23, 2010
  52. 52. But what about browsers? Other thoughts? This is when you volunteer to discuss. Wednesday, June 23, 2010
  53. 53. A Quick Diversion Wednesday, June 23, 2010
  54. 54. Brendan Dawes, http://www.brendandawes.com/ Wednesday, June 23, 2010
  55. 55. Wednesday, June 23, 2010
  56. 56. Wednesday, June 23, 2010
  57. 57. Wednesday, June 23, 2010
  58. 58. 5. Discussion Topics Wednesday, June 23, 2010
  59. 59. Should @font-face be used for body copy? This is when you volunteer to discuss. Wednesday, June 23, 2010
  60. 60. Are CSS typography frameworks useful? This is when you volunteer to discuss. Wednesday, June 23, 2010
  61. 61. How do you decide if a typeface is fit for use on the screen? This is when you volunteer to discuss. Wednesday, June 23, 2010
  62. 62. How will high resolution displays effect how we handle typography? This is when you volunteer to discuss. Wednesday, June 23, 2010
  63. 63. Are columns a useful way to read on the web? This is when you volunteer to discuss. Wednesday, June 23, 2010
  64. 64. Progressive enrichment or graceful degradation? This is when you volunteer to discuss. Wednesday, June 23, 2010
  65. 65. Suggested Watching Ira Glass on Storytelling — Available on Youtube Helvetica — Film, 2007 Wednesday, June 23, 2010
  66. 66. Suggested Reading The Elements of Typographic Style — Robert Bringhurst Designing with Type — Ellen Lupton Stop Stealing Sheep, and Find Out How Type Works — Erik Spiekermann Typographic Systems of Design — Kimberly Elam Wednesday, June 23, 2010
  67. 67. Referenced Analog In, Digital Out — Brandon Dawes thebolditalic.com Wednesday, June 23, 2010
  68. 68. Thank you! Kyle Meyer astheria.com + twitter.com/kylemeyer Wednesday, June 23, 2010

×