{"id":45,"date":"2007-03-13T09:50:57","date_gmt":"2007-03-13T15:50:57","guid":{"rendered":"http:\/\/techory.com\/sxsw\/?p=45"},"modified":"2007-03-13T09:50:57","modified_gmt":"2007-03-13T15:50:57","slug":"web-typography-sucks","status":"publish","type":"post","link":"http:\/\/techory.com\/sxsw\/?p=45","title":{"rendered":"Web Typography Sucks"},"content":{"rendered":"

Tuesday, March 13th @ 10:00 am<\/em><\/p>\n

Mark Boulton<\/a> Owner, Mark Boulton Design<\/em>
Richard Rutter<\/a> Production Dir, Clearleft Ltd <\/em><\/p>\n

http:\/\/webtypography.net\/sxsw2007<\/a><\/p>\n

What is Typography?<\/strong>
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<\/p>\n

Dashes are usually used incorrectly because the keyboard has hyphen (hyphen, en dash, em dash, minus)<\/p>\n

ALA Article<\/a> on using correct typography on the web
Smartypants typography tool<\/a><\/p>\n

“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<\/p>\n

Vertical Rhythm<\/strong>
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<\/p>\n

Lists<\/strong>
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<\/p>\n

Layout<\/strong>
Books: “Elements of typographic style” “Grid systems” “Chicago Manual of Style”
Plan out the grid ahead of time (ems)<\/p>\n

Typefaces<\/strong>
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.<\/p>\n

The new Vista fonts are great! Calibri, Cambria, Candara, Constantia, Corbel<\/p>\n

Why does typography suck?<\/strong>
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?<\/p>\n","protected":false},"excerpt":{"rendered":"

Tuesday, March 13th @ 10:00 am Mark Boulton Owner, Mark Boulton DesignRichard 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 accurate2. the mechanical notation and arrangement of language Dashes are usually used incorrectly […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[6],"tags":[],"_links":{"self":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/45"}],"collection":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=45"}],"version-history":[{"count":0,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=\/wp\/v2\/posts\/45\/revisions"}],"wp:attachment":[{"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=45"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=45"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/techory.com\/sxsw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=45"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}