Maia McCormick

Programmer, writer, nerd

Design Principles From Liz

design recurse center

The other week, I chatted with the fabulous Liz Starin and picked her aesthetically-enabled brain about fonts and layouts for websites. Below is some stuff I learned from our design adventures, both wisdom straight from her and stuff I picked up from my experience overhauling fonts and layout:

  • x-height is a unit referring to how tall the letter ‘x’ is in a given font. The larger the x-height, the easier to read on-screen. (Some fonts with small x-heights include Garamond and Futura.)

A shiny graphic about x-height Graphic found in PAPress’s Thinking with Type project.

  • serifs are generally the best choice for body text—they tend to be more readable on-screen.
  • in CSS, you can set line-height, which controls the space between lines of text. Increasing line spacing just a bit can improve readability a lot.
  • when picking a font, it’s helpful to have some adjectives in mind, rather than blindly scanning around for a font that you like. At the very least, it will give you a place to start.
  • Google Fonts is an incredible thing.
  • a surprisingly good way to gauge whether a font has the intended effect: imagine you got a wedding invitation written in that font, and think of what that invitation would say about the people getting married. Is that the image you want your website/blog/pony-rental business to convey?
  • rounded fonts tend to be more playful. Or is it that playful fonts tend to be more rounded? In any case, if you’re looking for something with a “playful” vibe (like I was), rounded-ness is a good feature to start looking for.
  • you can achieve a lot of variety with the same font. (In fact, you WANT to achieve a lot of variety with the same font—if no variety, your site looks boring, and if variety achieved by different fonts, your site looks like it got sloppy-drunk and made a bunch of poor decisions at the font bar.) Some ways to achieve variety within the same font: varying font weight (CSS: font-weight), case (upper/lower/title—CSS: text-transform), and letter spacing (CSS: letter-spacing), to name a few.
  • I had (and still have) massive struggles with making favicons that look like anything besides a blob. A feature I hadn’t consciously thought to look at was light/dark contrast. As a quick way of checking, Liz suggests putting the image in grayscale and seeing if it looks decent like that.
  • some fonting resources: A List Apart and Smashing Magazine