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

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’.

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

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

Designing With Type :: FontConf 2010

Transcript of Designing With Type :: FontConf 2010

Designing With Type :: FontConf 2010

Design

Transcript of Designing With Type :: FontConf 2010

BuildBoston 2010 Designing and Engineering Profits Seminar

A methodology for designing tonpilz-type transducers - Middle East

DESIGNING A NEW CONCEPT OF LC-DCP BROAD TYPE BONE ...

2010 Designing Mobile Learning

Cctp Type 2010

DeSIGNING The LARSSeN TYPe SheeT PILe ShAPe WITh The ...

Designing with Web Fonts: Type, Responsively

Designing Website for Mobile Safari (OSDC 2010)

2010: DESIGNING A HYDROGEN COMMUNITY LIBERTY … of Waterloo.pdf · 2010: designing a hydrogen community liberty fuels hydrogen center university of waterloo march 24, 2010 faculty

Designing With Type part 2

Designing Agency (19/02/2010)

J187 Designing with Type

WordCamp Columbus 2010 - Designing a killer WordPress theme

PD702x1 PD701x1 Design PD - Microchip Technologyww1.microchip.com/downloads/en/Appnotes/AN3471-Designing... · 2020. 7. 1. · AN3471 Designing a Type 1/2 802.3 or HDBaseT Type 3

Designing Devanagari type - SkemmanBefore designing type in any script, whether it is native to the designer or not, researching the script, the tools used to write it and printing

Advanced Tutorial Designing Type V LED Roadway Lenses

Designing with Web Fonts: Type, Responsively (PVD)

2010 Designing a community of practice (co p)

Designing Type for User Interface

Designing office 2010 deployment