Designing With Type
Kyle Meyerastheria.com + twitter.com/kylemeyer
Wednesday, June 23, 2010
— Freelance Designer (meyerkyle.com)— Design Blogger (astheria.com)— Director of Interactive Design for AIGA MN— Typoholic
Wednesday, June 23, 2010
Introduction
Wednesday, June 23, 2010
IntroductionThey call this an UN-Conference.
Wednesday, June 23, 2010
IntroductionThere are no wrong answers!
We’re here to have discussions.
Wednesday, June 23, 2010
IntroductionSo this means I might call on you...
Yes, you in the back.
Wednesday, June 23, 2010
Goals1. Why Typography Matters2. Typography as a Craft Skill3. Guidelines for Web Typography4. CSS35. Discussion Topics
Wednesday, June 23, 2010
1.Why Typography
Matters
Wednesday, June 23, 2010
“
”Mark Boulton, http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect
There is a theory that exists called the ‘Aesthetic Usability Effect’.
Wednesday, June 23, 2010
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-effectWednesday, June 23, 2010
TheCarPictures, http://www.thecarpictures.info/images/wmwallpapers/2009-Kia-Optima-001-1.jpgWednesday, June 23, 2010
TopSpeed, http://pictures.topspeed.com/IMG/crop/200907/2010-audi-a4-a5-q5-p_1600x0w.jpgWednesday, June 23, 2010
Which would you choose?
Wednesday, June 23, 2010
Apple Inc, http://www.apple.comWednesday, June 23, 2010
Web design is 95% typography.“”— Oliver Reichenstein
Information Architects, http://informationarchitects.jp/the-web-is-all-about-typography-period/Wednesday, June 23, 2010
“Youtube, http://www.youtube.com
Wednesday, June 23, 2010
Agree? Disagree?Thoughts?
This is when you volunteer to discuss.
Wednesday, June 23, 2010
2.Typography as a
Craft Skill
Wednesday, June 23, 2010
Ira Glass on Craft
Youtube, http://www.youtube.com/watch?v=-hidvElQ0xE&feature=player_embeddedWednesday, June 23, 2010
Agree? Disagree?Thoughts?
This is when you volunteer to discuss.
Wednesday, June 23, 2010
3.Guidelines for Web
Typography
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
Let’s be controversial...
Wednesday, June 23, 2010
100% Easy-2-Read Standard
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
1. Set body copy to 16 pixels
5 Guidelines
Wednesday, June 23, 2010
1. Set body copy to 16 pixels2. Use adequate leading (22 pixels)
5 Guidelines
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
1. Set body copy to 16 pixels2. Use adequate leading (22 pixels)3. Use a good measure (10 to 15 words per line)
5 Guidelines
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
1. Set body copy to 16 pixels2. 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 Guidelines
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
1. Set body copy to 16 pixels2. 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
5 Guidelines
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
1. Set body copy to 16 pixels2. Use adequate leading (22 pixels)3. Use a good measure (10 to 15 words per line)4. High contrast5. Use generous whitespace
Yes or No? Why?
Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010
4.CSS3
Wednesday, June 23, 2010
CSS3The next frontier!
Wednesday, June 23, 2010
CSS3I’m guessing you’ve heard of @font-face...
Wednesday, June 23, 2010
CSS3So let’s talk about other things.
Wednesday, June 23, 2010
text-shadow
CSS3
Wednesday, June 23, 2010
p {text-shadow: right-offset top-offset blur color;
}
Wednesday, June 23, 2010
Fuel Network, http://fuelbrandinc.com/Wednesday, June 23, 2010
p {text-shadow: 2px 2px 10pxrgba(0, 0, 0, 0.5);
}
Wednesday, June 23, 2010
Tinder, http://madebytinder.com/Wednesday, June 23, 2010
p {text-shadow: 0px 1px 2pxrgba(255, 255, 255, 0.3);
}
Wednesday, June 23, 2010
CSS3text-shadowcolumn-*
Wednesday, June 23, 2010
Wednesday, June 23, 2010
div {-webkit-column-count: 3;-webkit-column-gap: 10px;
}
div {-moz-column-count: 3;-moz-column-gap: 10px;
}
Wednesday, June 23, 2010
column-countcolumn-gapcolumn-widthcolumn-rulecolumn-spancolumn-break
Wednesday, June 23, 2010
CSS3text-shadowcolumn-*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, June 23, 2010
CSS3text-shadowcolumn-*mask-imagetransform: rotate()
Wednesday, June 23, 2010
Apple Inc, http://www.apple.com/html5/showcase/typography/Wednesday, June 23, 2010
div {-webkit-transform:rotate(-45deg);
}
div {-moz-transform:rotate(-45deg);
}
Wednesday, June 23, 2010
Jonathan Snook, http://snook.ca/archives/html_and_css/css-text-rotation
div {filter:progid:DXImageTransform».Microsoft.BasicImage»(rotation=2);
}
Wednesday, June 23, 2010
But whatabout browsers?Other thoughts?
This is when you volunteer to discuss.
Wednesday, June 23, 2010
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.
Wednesday, June 23, 2010
Are CSS typography frameworks useful?
This is when you volunteer to discuss.
Wednesday, June 23, 2010
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
How will high resolution displays
effect how we handle typography?
This is when you volunteer to discuss.
Wednesday, June 23, 2010
Are columns a useful way to read on
the web?This is when you volunteer to discuss.
Wednesday, June 23, 2010
Progressive enrichment or graceful
degradation?This is when you volunteer to discuss.
Wednesday, June 23, 2010
Suggested Watching
Ira Glass on Storytelling — Available on Youtube
Helvetica — Film, 2007
Wednesday, June 23, 2010
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
Referenced
Analog In, Digital Out — Brandon Dawes
thebolditalic.com
Wednesday, June 23, 2010
Thank you!
Kyle Meyerastheria.com + twitter.com/kylemeyer
Wednesday, June 23, 2010