An Event Apart: On Web Typography

by Luke Wroblewski March 28, 2011

In his talk at An Event Apart in Seattle, WA 2011 Jason Santa Maria outlined the current state of Web fonts and how to approach typography online. Here's my notes from his talk:

  • A lot of visual communication work hinges on typography. Making a connection with someone that makes them want to read what you have designed requires good typography. Make someone see something beyond the words on the page.
  • Originally, on the Web we couldn’t specify fonts. In 2008, we had 18 fonts to use. Today fonts have exploded we have a lot of choice again. People don’t know what to do! They are warily getting into fonts because they don’t want to make bad stuff.
  • But Web fonts create opportunity for designers. For example, we haven’t had condensed fonts in the default set of Web fonts. But they can add a lot of character to designs.
  • Typography is hard. There are tons of fonts out there and people go to school to study it. But really typography is being able to see what a typeface can be, what it can do. You don’t need to know everything about typography –just enough to open your eyes.
  • No typeface is inherently evil. There has to be a good use of it somewhere. Much of it relies on context.
  • How do we look at type? We can’t just see individual letters. It is about words, sentences, paragraphs, and the whole.
  • Different type has different roles. Display faces are more elegant and detailed, and full of contrast. Text faces are designed with regular forms, higher x-height, and less contrast in stroke widths. When you see a lot of text set in a typeface, you don’t want to call attention to the individual letters.
  • Typefaces with a large font family give you more assets to work with. You can achieve lots of hierarchy without having to introduce more typefaces. These are workhorse typefaces
  • There’s more of what makes letter a letter at the top of a letter. So you can read text cut off at the bottom but not at top. So much of typography is discern-ability. Is this something I can read, is this something pleasing to me?
  • Good typography is invisible: don’t make me think about how to read, just let me read.
  • Just because a font is dis-fluent doesn’t mean it’s ugly. It’s about contrast of quality. A dis-fluent font has characteristics that are a bit off –it can be used to improve comprehension. Typography is an art of contrast. Things that are a bit off can stir interest.
  • If anyone tells you there are rules in typography -they are wrong. There are guidelines, best practices, etc. It is an art of imperfect precision. You can set things up as best you can but not everyone will interpret it the same way.

Best Practices

  • Bigger is better. Always err on side of making things bigger than smaller.
  • Contrast is the most important tenant of design. Giving things weight helps bring appropriate amounts of attention to them.
  • How do we choose type? Need to know how it will be used, where will it be used, and more. Do you need any special features, will it be used for prolonged reading, internationalization? These are the technical features of type design you need to consider.
  • Verdana has a large degree of discern-ability.
  • Avoid one-off splash fonts. They are pretty limiting.
  • Developing a personal palette. Use a few typefaces and get used to their ins and outs. Know them really well.
  • Jot down a few words, terms, ideas on how you want your Web site to feel –don't focus on typefaces yet.
  • If you know a typeface real well, why not try something that’s just a little different as a way to expand?
  • Try it out: so much of typography has to do with context. You won’t know how it works until you get in and use it. Get your hands dirty and see how things read when they are set in a font.
  • We should strive to make things we are proud of. We can use great typefaces and CSS on the Web now.