Kyle Meyer gave a presentation titled "Designing With Type" where he discussed the importance of typography and guidelines for web typography. The presentation included 5 topics: 1) Why Typography Matters, discussing how aesthetics impact usability, 2) Typography as a Craft Skill, 3) Guidelines for Web Typography including a proposed 100% Easy-to-Read standard, 4) Using CSS3 capabilities like text-shadow, columns and transforms, and 5) Open discussion topics about font usage, frameworks and high resolution displays. Meyer emphasized the critical role of typography in design and usability.

1. Designing With Type
Kyle Meyer
astheria.com + twitter.com/kylemeyer
Wednesday, June 23, 2010

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

3. Introduction
Wednesday, June 23, 2010

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

5. Introduction
We’re here to have discussions.
There are no wrong answers!
Wednesday, June 23, 2010

6. Introduction
So this means I might call on you...
Yes, you in the back.
Wednesday, June 23, 2010

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. 1.
Why Typography
Matters
Wednesday, June 23, 2010

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. “ 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. TheCarPictures, http://www.thecarpictures.info/images/wmwallpapers/2009-Kia-Optima-001-1.jpg
Wednesday, June 23, 2010

12. TopSpeed, http://pictures.topspeed.com/IMG/crop/200907/2010-audi-a4-a5-q5-p_1600x0w.jpg
Wednesday, June 23, 2010

13. Which would you choose?
Wednesday, June 23, 2010

14. Apple Inc, http://www.apple.com
Wednesday, June 23, 2010

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. “
Youtube, http://www.youtube.com
Wednesday, June 23, 2010

17. Agree? Disagree?
Thoughts?
This is when you volunteer to discuss.
Wednesday, June 23, 2010

18. 2.
Typography as a
Craft Skill
Wednesday, June 23, 2010

19. Ira Glass on Craft
Youtube, http://www.youtube.com/watch?v=-hidvElQ0xE&feature=player_embedded
Wednesday, June 23, 2010

20. Agree? Disagree?
Thoughts?
This is when you volunteer to discuss.
Wednesday, June 23, 2010

21. 3.
Guidelines for Web
Typography
Information Architects, http://informationarchitects.jp/100E2R/
Wednesday, June 23, 2010

22. Let’s be
controversial...
Wednesday, June 23, 2010

23. 100% Easy-2-Read
Standard
Information Architects, http://informationarchitects.jp/100E2R/
Wednesday, June 23, 2010

24. 5 Guidelines
1. Set body copy to 16 pixels
Wednesday, June 23, 2010

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. 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. 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. 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. Information Architects, http://informationarchitects.jp/100E2R/
Wednesday, June 23, 2010

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. 4.
CSS3
Wednesday, June 23, 2010

32. CSS3
The next frontier!
Wednesday, June 23, 2010

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

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

35. CSS3
text-shadow
Wednesday, June 23, 2010

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

37. Fuel Network, http://fuelbrandinc.com/
Wednesday, June 23, 2010

38. p {
text-shadow: 2px 2px 10px
rgba(0, 0, 0, 0.5);
}
Wednesday, June 23, 2010

39. Tinder, http://madebytinder.com/
Wednesday, June 23, 2010

40. p {
text-shadow: 0px 1px 2px
rgba(255, 255, 255, 0.3);
}
Wednesday, June 23, 2010

41. CSS3
text-shadow
column-*
Wednesday, June 23, 2010

42. Wednesday, June 23, 2010

43. div {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
}
div {
-moz-column-count: 3;
-moz-column-gap: 10px;
}
Wednesday, June 23, 2010

44. column-count
column-gap
column-width
column-rule
column-span
column-break
Wednesday, June 23, 2010

45. CSS3
text-shadow
column-*
mask-image
Wednesday, June 23, 2010

46. Apple Inc, http://www.apple.com/html5/showcase/typography/
Wednesday, June 23, 2010

47. h1 {
-webkit-mask-image:
url(photo.png);
}
Wednesday, June 23, 2010

48. CSS3
text-shadow
column-*
mask-image
transform: rotate()
Wednesday, June 23, 2010

49. Apple Inc, http://www.apple.com/html5/showcase/typography/
Wednesday, June 23, 2010

50. div {
-webkit-transform:
rotate(-45deg);
}
div {
-moz-transform:
rotate(-45deg);
}
Wednesday, June 23, 2010

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. But what
about browsers?
Other thoughts?
This is when you volunteer to discuss.
Wednesday, June 23, 2010

53. A Quick Diversion
Wednesday, June 23, 2010

54. Brendan Dawes, http://www.brendandawes.com/
Wednesday, June 23, 2010

55. Wednesday, June 23, 2010

56. Wednesday, June 23, 2010

57. Wednesday, June 23, 2010

58. 5.
Discussion Topics
Wednesday, June 23, 2010

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

60. Are CSS typography
frameworks useful?
This is when you volunteer to discuss.
Wednesday, June 23, 2010

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. How will high
resolution displays
effect how we handle
typography?
This is when you volunteer to discuss.
Wednesday, June 23, 2010

63. Are columns a useful
way to read on
the web?
This is when you volunteer to discuss.
Wednesday, June 23, 2010

64. Progressive
enrichment or graceful
degradation?
This is when you volunteer to discuss.
Wednesday, June 23, 2010

65. Suggested Watching
Ira Glass on Storytelling — Available on Youtube
Helvetica — Film, 2007
Wednesday, June 23, 2010

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. Referenced
Analog In, Digital Out — Brandon Dawes
thebolditalic.com
Wednesday, June 23, 2010

68. Thank you!
Kyle Meyer
astheria.com + twitter.com/kylemeyer
Wednesday, June 23, 2010