Web Typography Sucks Panel Notes (SXSWi 2007)
Mark Boulton, Owner - Mark Boulton Design
Richard Rutter, Production Dir - Clearleft Ltd
Slides located at:
Really, really rough notes:
We got to this panel about 10 minutes late, so I need to reconstruct the beginning from the slides they provided. The beginning of my notes aren't very clear as a result...
Drawing ampersands - span text, goudy old style, palatino book antiqua
Making font size and spacing proportional to each other for good rhythm use standard proportions (2 x 3 for example) and do the math to set the text and line heights. For visual reference - use a grid to check rhythm.
Don't let browser determine space between entities.
text size/rhythm size - 12px , 18px
75% text size - will knock IE down to 12 px from the standard 16px.
p
{ 1em /* 12px */
text 1.5 em /* 18px */
line-height: margin 0 0 1.5 3m]
H1
1.5 em
.sidenote
0.8333em
line-height: 1em
h2
-------------------
Lists
Space before - moving numbering to left margin - line up text.
margin 0 padding 0 on all block level elements to think about all of the spacing.
-------------
Layout - based around font sizing - follow same proportions while building grid as when calculationg font sizes and line heights - same proportions will be visually harmonious.
Grid Systems book -
rational ratio - rule of 3rds.
2 x 3 em block to create grids - 1.5 gutters
-------------------
Type Faces
Arial is not a good backup for Verdana - sizing. Tahoma is better. Make sure stacked fonts match one another in size.
Go ahead and specify fonts that might not be standard on all machines at the beginning of a font stack - like Fruitger, Univer - people who have them will enjoy your site, otherwise, people will set the standard Arial/Helvetica.
Helvetica Neue is specifically rendered for digital, so put it at the beginning of a font stack before regular helvetica.
New Vista Fonts - great typefaces, complete character sets. Introduce new faces into font stacks.
Analogy to periodic chart - be as detailed as possible for better quality typography.
----------------------
Who is responsible for good typography - designers vs. editors? Everyone should be. Typography should be a part of the entire process - automate as much as possible, for special characters - make it part of content management software to make it easier on editors and content providers who may not know the html - implement smartypants if possible.
Questions:
Line length - the 2 x 3 grid should help control this. using ems helps control spacing for this.
March 13, 2007, 1:40 PM | « Previous | Next »
Keywords: sxsw, sxswi, sxswi07

Commonplacebook.com is the personal website of 