SXSWi: Web Typography Sucks
Panelists:
- Mark Boulton, Mark Boulton Design
- Richard Rutter, Clearleft Ltd
Why web typography sucks:
- ‘ ” (should be straight quotes, WordPress actually fixes them)
- These are not quotes or apostrophes
- Should be ’ ”
- Hyphen, en dash, em dash, minus
- Minus = thicker than en dash and equal in length to equals sign
- en, em dashes… wild differences of space before and after
- But they are NOT hyphens
- If The Sun can do it, why can’t we on the web?
- ALA article addresses this
- Smarty Pants by John Gruber
- detects quotes, dashes, etc.
- Always used best available ampersand for headings and titles
- Simplebits: Changes & to Goudy/Palatino/Book Antiqua
- Italic is very important there
- Simplebits: Changes & to Goudy/Palatino/Book Antiqua
Vertical Rhythm
- Established rhythm with 18 pixel line height
- Using simple math, you can establish percentages for font sizes and line heights that will follow the rhythm
Making lists stand out
- Historically, setting lists have been done in the margin.
- Only with Word did we see list indentation
- Hanging punctuation is the same
- Lists block level elements and assigns no margin and padding as a starting point
Layout
- Grids should not be done arbitrarily
Typefaces
- Think about degrading font stacks in a relevant fashion
- Arial and Verdana are completely different
- Specify some Frutiger or Univers, reward the users that have it
- Align corporate typefaces
- New Vista typefaces
- Calibri
- Cambria
- Candara
- Constantia
- Corbel
- Instead of Georgia, use Cambria
What has happened to the attention to detail? Why is it not cared about among everyone on the chain?
Why does web typography suck? It’s all our fault.
- We’re all responsible.
- Typography should be in the process for everyone.
- You often see companies have the typographic attention in print, but he same content does not on the web.
- New York Times — got it right
- If they don’t care about it, get on their backs
Notes from Q&A
- (Re)read Bringhurst, read Chicago Manual of Style
- Spaces before and after em dashes in US, not in UK
- paraphrasing: “How you describe text size should be in pixels, because that is what the screen uses. How to achieve it is with ems, the measurement of typography.”
- Jeff Croft: You can use whatever measurements you want (em or px). The problem is IE6, not CSS. (Thanks, Jeff. That’s exactly what I’ve been saying.)
Slides & Resources: webtypography.net/sxsw2007/
They presented this topic in a surprisingly inspiring fashion. I tend to lose the artistic sense of web development from time to time. While I don’t generally consider myself an artist, I had a unique obsession with typography in college, so far as to dabble in typeface design. I need to get back in touch with that old flame. Great presentation.