Web Typography Sucks Panel Notes (SXSWi 2007)

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.