Designing With Type :: FontConf 2010

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
— Typoholic


Introduction


Introduction
They call this an UN-Conference.


Introduction
We’re here to have discussions.
There are no wrong answers!


Introduction
So this means I might call on you...
Yes, you in the back.


Goals
1. Why Typography Matters
2. Typography as a Craft Skill
3. Guidelines for Web Typography
4. CSS3
5. Discussion Topics


1.
Why Typography
Matters


“ There is a theory that exists called
the ‘Aesthetic Usability Eﬀect’.

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

“ There is a theory that exists called
the ‘Aesthetic Usability Eﬀect’.
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-eﬀect

TheCarPictures, http://www.thecarpictures.info/images/wmwallpapers/2009-Kia-Optima-001-1.jpg

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

Which would you choose?


Apple Inc, http://www.apple.com

“ Web design is 95% typography.

”
— Oliver Reichenstein

Information Architects, http://informationarchitects.jp/the-web-is-all-about-typography-period/

“
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_embedded

3.
Guidelines for Web
Typography

Information Architects, http://informationarchitects.jp/100E2R/

Let’s be
controversial...


100% Easy-2-Read
Standard


5 Guidelines
1. Set body copy to 16 pixels


5 Guidelines
2. Use adequate leading (22 pixels)


5 Guidelines
3. Use a good measure (10 to 15 words per line)


5 Guidelines
4. Good contrast (black on white, white on black)


5 Guidelines
4. Good contrast (black on white, white on black)
5. Use generous whitespace


Yes or No? Why?
4. High contrast
5. Use generous whitespace


4.
CSS3


CSS3
The next frontier!


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


CSS3
So let’s talk about other things.


CSS3
text-shadow


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


Fuel Network, http://fuelbrandinc.com/

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


Tinder, http://madebytinder.com/

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


CSS3
text-shadow
column-*


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

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


column-count
column-gap
column-width
column-rule
column-span
column-break


CSS3
text-shadow
column-*
mask-image


Apple Inc, http://www.apple.com/html5/showcase/typography/

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


CSS3
text-shadow
column-*
mask-image
transform: rotate()


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

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


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

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

But what
about browsers?
Other thoughts?


A Quick Diversion


Brendan Dawes, http://www.brendandawes.com/

5.
Discussion Topics


Should @font-face be
used for body copy?


Are CSS typography
frameworks useful?


How do you decide if a
typeface is ﬁt for use
on the screen?


How will high
resolution displays
eﬀect how we handle
typography?


Are columns a useful
way to read on
the web?


Progressive
enrichment or graceful
degradation?


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 Meyer
astheria.com + twitter.com/kylemeyer


Designing With Type :: FontConf 2010

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Designing With Type :: FontConf 2010

Ähnlich wie Designing With Type :: FontConf 2010 (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Designing With Type :: FontConf 2010