SXSW Panel: Web Typography Sucks

On this last day of SXSW Interactive, I decided to attend a panel, Why Typography Sucks. I thought this was one of the best panels of the festival. I am not sure if it is a brit thing, but all of them BROUGHT THEIR A-GAME. The panel was made up of Mark Boulton and Richard Rutter.

Type is something that I don't think we spend enough time with. While I don't agree with everything they said, they did offer up some good information on how to make type better online. I enjoyed the part about how to put the font substitutions inside the CSS and when to use what. Have a look at my notes and photos below. If something is not clear, just post a comment and I will check the audio for clarification.

My notes:

Starts with the difference btw typography and art using words.

Shows the difference btw primes and quotes

And the difference btw the hyphen and the en/em dash and even the minus sign

Talks about HTML entities including the multiplication sign and the ellisis

Shows SmartyPants plugin for help in automating typesetting

Talks about the importance of using a nice ampersand & and shows SimpleBits and how they use some simple CSS to make the ampersands great

Discusses vertical rhythm – the way you read down the page – the intervals need to be regular and the ways you set the margins

Must setup a couple of numbers – a base text size and a size for your rythym – he used 12px text and 18px rhythm basically to get the line height you take the pixels divided by the margin to get the height or rythym

Shows the importance of the right type and vertical rythym for any lists – they show hanging the numbers for the ordered list to the left of the copy – interesting technique – "hanging off into the gutter"

They discuss the linking of typography and layouts – there are relationships for everything

Think about your font substitutions before showing verdana and then arial. Specifying other fonts would be great like Frutiger or Univers – they like Helvetica Neue for it was designed for the digital medium

Meta and Trebuschet are pretty close to help argue the point with print designers

Great typefaces now come with Vista — all named with the letter C — calibri, cambria, candara, constantia, corbel

They show how adding little details help to build towards typographic gold