Designing With Type :: FontConf 2010

Designing With Type

Kyle Meyerastheria.com + twitter.com/kylemeyer

Wednesday, June 23, 2010

http://astheria.com/


http://twitter.com/kylemeyer/


— Freelance Designer (meyerkyle.com)— Design Blogger (astheria.com)— Director of Interactive Design for AIGA MN— Typoholic


http://meyerkyle.com/

http://meyerkyle.com/



Introduction


IntroductionThey call this an UN-Conference.


IntroductionThere are no wrong answers!

We’re here to have discussions.


IntroductionSo this means I might call on you...

Yes, you in the back.


Goals1. Why Typography Matters2. Typography as a Craft Skill3. Guidelines for Web Typography4. CSS35. Discussion Topics


1.Why Typography

Matters


“

”Mark Boulton, http://www.markboulton.co.uk/journal/comments/aesthetic-usability-effect

There is a theory that exists called the ‘Aesthetic Usability Effect’.


http://trentwalton.com/2010/03/22/css3-in-transition/


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?


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




Agree? Disagree?Thoughts?

This is when you volunteer to discuss.


2.Typography as a

Craft Skill


Ira Glass on Craft

Youtube, http://www.youtube.com/watch?v=-hidvElQ0xE&feature=player_embeddedWednesday, June 23, 2010



Agree? Disagree?Thoughts?



3.Guidelines for Web

Typography

Information Architects, http://informationarchitects.jp/100E2R/Wednesday, June 23, 2010



Let’s be controversial...


100% Easy-2-Read Standard




1. Set body copy to 16 pixels

5 Guidelines


1. Set body copy to 16 pixels2. Use adequate leading (22 pixels)

5 Guidelines




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




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




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







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?




4.CSS3


CSS3The next frontier!


CSS3I’m guessing you’ve heard of @font-face...


CSS3So let’s talk about other things.


text-shadow

CSS3


p {text-shadow: right-offset top-offset blur color;

}


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



p {text-shadow: 2px 2px 10pxrgba(0, 0, 0, 0.5);

}


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



p {text-shadow: 0px 1px 2pxrgba(255, 255, 255, 0.3);

}


CSS3text-shadowcolumn-*



div {-webkit-column-count: 3;-webkit-column-gap: 10px;

}

div {-moz-column-count: 3;-moz-column-gap: 10px;

}


column-countcolumn-gapcolumn-widthcolumn-rulecolumn-spancolumn-break


CSS3text-shadowcolumn-*mask-image


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



h1 {-webkit-mask-image:url(photo.png);

}


CSS3text-shadowcolumn-*mask-imagetransform: rotate()


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



div {-webkit-transform:rotate(-45deg);

}

div {-moz-transform:rotate(-45deg);

}


Jonathan Snook, http://snook.ca/archives/html_and_css/css-text-rotation

div {filter:progid:DXImageTransform».Microsoft.BasicImage»(rotation=2);

}




But whatabout browsers?Other thoughts?



A Quick Diversion


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






5.Discussion Topics


Should @font-face be used for body copy?



Are CSS typography frameworks useful?



How do you decide if a typeface is fit for use

on the screen?This is when you volunteer to discuss.


How will high resolution displays

effect how we handle typography?



Are columns a useful way to read on

the web?This is when you volunteer to discuss.


Progressive enrichment or graceful

degradation?This is when you volunteer to discuss.


Suggested Watching

Ira Glass on Storytelling — Available on Youtube

Helvetica — Film, 2007


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


Referenced

Analog In, Digital Out — Brandon Dawes

thebolditalic.com


Thank you!

Kyle Meyerastheria.com + twitter.com/kylemeyer




