Web Typography Sucks Panel Notes (SXSWi 2007)

Web Typography Sucks
Mark Boulton, Owner – Mark Boulton Design
Richard Rutter, Production Dir – Clearleft Ltd
Slides located at:
http://webtypography.net/sxsw2007/


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.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.