Tuesday, March 13th @ 10:00 am
Mark Boulton Owner, Mark Boulton Design
Richard Rutter Production Dir, Clearleft Ltd
http://webtypography.net/sxsw2007
What is Typography?
1. art of process of setting and arranging types and printing from them
-this definition is over 100 yrs old and not very accurate
2. the mechanical notation and arrangement of language
Dashes are usually used incorrectly because the keyboard has hyphen (hyphen, en dash, em dash, minus)
ALA Article on using correct typography on the web
Smartypants typography tool
“Always use the best ampersand available for heads and titles”
use css to change the font for and ampersand – worth paying attention to in headers/titles
Vertical Rhythm
The reader can follow the page better when there is a regular rhythm.
Margins and txt/line spacing is an issue. Don’t let the browser define your spacing, you should care enough to control them.
Need to come up with:
txt size (12px)
rhythm (18px) – line height 18px / 12px = 1.5em
heading (18px)
line height 18px / 18px = 1em
Lists
Getting vertical rhythm to a list
use different typeface or weight or position (hang it into the left margin)
easier to read it w/out the indent
Layout
Books: “Elements of typographic style” “Grid systems” “Chicago Manual of Style”
Plan out the grid ahead of time (ems)
Typefaces
You’re not just limited to Arial!
These are good faces, well designed for this media.
i.e. font-family: verdana, arial, helvetica, sans-serif
Verdana are not similar typefaces – arial is smaller than verdana
Think about what fonts are going into the list.
Remove Arial from the list since it doesn’t really fit with the others
font-family: “frutiger”, Univers, Helvetica Neue, arial, helvetica, sans-serif
Helvetica Neue is specifically been redesigned for digital rendering.
The new Vista fonts are great! Calibri, Cambria, Candara, Constantia, Corbel
Why does typography suck?
It’s our fault. We need to pay attention to this because it is important, the details do matter.
Why does a newspaper have great attention to typography in the print version and then crap typography on the web?