An Event Apart: On Web Typography

by Luke Wroblewski June 13, 2011

In his talk at An Event Apart in Atlanta, GA 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.
  • Once you start seeing typography, you can't go back to looking at content the same way.
  • Originally, on the Web we couldn’t specify fonts. In 2008, we had 18 fonts to use. But now things are very exciting. 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.
  • If your type is bad, your design fails. It is an equal player in the design along with colors, images, and more.
  • 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. It's how designer's use it. There has to be a good use of it somewhere. Much of it relies on context. Context determines if fonts are used properly.
  • How do we look at type? Type is a beautiful group of letters not a group of beautiful letters. We can’t just see individual letters. It is about words, sentences, paragraphs, and the whole. How do they work in context?
  • 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. There are fonts that can also look good at big sizes and small readable sizes. Both of 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? Our eyes parse letter shapes really quickly (using saccades).
  • Good typography is invisible actually means don’t make me think about how to read, just let me read. Don't put up barriers that prevent me from reading.
  • Readability is an important way to evaluate the effectiveness of a font. Understand the reading experience.
  • 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. You need to create balance by managing 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. Contrast effects everything we design. Everything is defined by its opposite.
  • Line length: have enough space so the eye does not get lost. So it can find the next line. The shorter the line, the tighter the text can be.
  • Different fonts have different "gray values", how you set space depends on how much contrast it has relative to the page.
  • How do we choose type? There's no way to answer this without more information. 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. That may be important to your design.
  • Avoid one-off splash fonts or ready mades. They are pretty limiting. They don't open a conversation -they tell you exactly what to think. Instead use the classics but change them up.
  • 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. Take a little bit of text and set some text with it. Get a sense of what it will look like int he real World.
  • We should strive to make things we are proud of. We can use great typefaces and CSS on the Web now. We do not have to be relegated to the ghettos of design just because we work on the Web.