AEA Debrief: The Developer's Ampersandwich

At An Event Apart in Atlanta, Jenn Lukas, presented a developer’s perspective on design for the web. Here’s a collection of take aways that resonated with me.

Lukas makes a point that often gets overlooked. Good design is part of good craftsmanship. Good design isn’t necessarily all that tightly coupled with subjectivity, fashion, taste or any other magical factors that tend to be associated with design. The fact that there are design fundamentals, means you can achieve good design logically.

Bootstrap your typographical knowledge

Like any deep subject, typography can be rather intimidating to get started with. Just because you didn’t enjoy the Helvetica documentary doesn’t mean you’re doomed to create tacky web sites if unaided by a “proper designer”.

“Blah blah blah… Verdana for headlines, Georgia for body copy… type type type blah blah blah.” — Jason Santa Maria (as paraphrased by Jenn Lucas)

You can do a lot worse than simply stick to a limited pallet of trusted typefaces. Not sure what a “trusted” typeface is? Lukas has a hack for that. In her presentation, she presented 5 lists of the top 10 fonts on various font services. These are what the pros are using. These fonts are used for a reason. You don’t need to understand that reason. You can always learn it later if you care. Don’t be afraid to follow a trend if you don’t know any better. Emulation is often an early phase of learning.

Google Fonts most popular fonts

  1. Open Sans
  2. Oswald
  3. Droid Sans
  4. Roboto
  5. Lato
  6. PT Sans
  7. Open Sans Condensed
  8. Droid Serif
  9. Ubuntu
  10. PT Sans Narrow

Typekit favorite fonts

  1. Museo Sans
  2. Adelle
  3. Proxima Nova
  4. Museo Slab
  5. Futura PT
  6. Raleway
  7. Myriad Pro
  8. Museo
  9. Freight Sans Pro
  10. FF Tisa Pro

Fonts.com top fonts

  1. Trade Gothic
  2. Neue Helvetica
  3. Avenir Next
  4. Univers
  5. Avenir
  6. Proxima Nova
  7. Gill Sans
  8. Frutiger
  9. Futura
  10. Helvetica

Typewolf top fonts

  1. Open Sans
  2. Apercu
  3. Brandon Grotesque
  4. Montserrat
  5. Futura
  6. Avenir
  7. Inconsolata
  8. Roboto
  9. Gotham
  10. Proxima Nova

Net Magazine showcase top fonts

  1. Futura
  2. Proxima Nova
  3. Open Sans
  4. Brandon Grotesque
  5. Atrament Web
  6. Roboto
  7. Museo
  8. Archer
  9. FF Tisa Web
  10. Arvo

Looking at her list, I found it interesting that there was a bit of overlap between the different services. I made this list of fonts that show up on more than one of the above list:

Cross service top 5 (plus one) fonts

  1. Futura - 4
  2. Proxima Nova - 4
  3. Roboto - 3
  4. Open Sans - 3
  5. Brandon Grotesque -2
  6. Avenir - 2

Familiarize yourself with web font limitations

This is important for designers and developers alike. Test and share font-families via the browser early in the process to make sure selected fonts will work for your audience before design approval. Don’t for get that “Fixing” a problem in one browser can make things worse in another. Leave plenty of room for QA.

“… sometimes they look just ridiculous on windows machines. It’s a bit better with IE10 but geez oh man. It’s enough to make a well designed website look like crap.” — Jason Head

CSS Preprocessors/Variables Are Your Friend

Variables in Sass (or whatever preprocessor you prefer) have a very friendly syntax for setting variables:

$red: #ff0000;
$headline-font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

Use a text file containing these variables to communicate colors and typographical information between designers and developers. Attributes shared via a list of like this are far less likely to get lost than by using the type tool and eyedropper in a Photoshop document. Also, if this list gets cumbersome, it’s a good smell that maybe some simplification is in order.

There’s a lot of talk about the importance of designers learning to development. There is an equally strong case to be made for the inverse.