An Event Apart: On Web Typography

by July 9, 2012

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

  • 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.
  • Consistency of type helps maintain a brand. Type matters.
  • If your type is bad, your design fails. It is an equal player in the design along with colors, images, and more. Type is not something that you layer on at the end, it's not decoration.
  • It comes down to is something readable (want to be read) not just legible. Type can make a better connection with people visually.
  • 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.

The Role of Type

  • 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.
  • Typography can create or change context as well. It can elevate a message.
  • 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. They don't have a lot of flexibility. Text faces are designed with regular forms, higher x-height, and less contrast in stroke widths. This gives them a better rhythm for reading. 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. These are workhorse typefaces.

Readability

  • Type has a dual life: it can be de-coded visually and read at the same time.
  • 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 text 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.
  • We can't rob people of their time. We can't stand in the way of people wanting to read.
  • 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.
  • Every typeface comes with a history attached. This might help you make better, more meaningful choices. Fonts can have context to where we are.
  • Make mental associations. Jot down a few words, terms, ideas on how you want your Web site to feel –don't focus on typefaces yet.
  • Look for typefaces that are designed together. It's a bit of cheat but these fonts are designed to be used together.
  • 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.