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
- Open Sans
- Oswald
- Droid Sans
- Roboto
- Lato
- PT Sans
- Open Sans Condensed
- Droid Serif
- Ubuntu
- PT Sans Narrow
Typekit favorite fonts
- Museo Sans
- Adelle
- Proxima Nova
- Museo Slab
- Futura PT
- Raleway
- Myriad Pro
- Museo
- Freight Sans Pro
- FF Tisa Pro
Fonts.com top fonts
- Trade Gothic
- Neue Helvetica
- Avenir Next
- Univers
- Avenir
- Proxima Nova
- Gill Sans
- Frutiger
- Futura
- Helvetica
Typewolf top fonts
- Open Sans
- Apercu
- Brandon Grotesque
- Montserrat
- Futura
- Avenir
- Inconsolata
- Roboto
- Gotham
- Proxima Nova
Net Magazine showcase top fonts
- Futura
- Proxima Nova
- Open Sans
- Brandon Grotesque
- Atrament Web
- Roboto
- Museo
- Archer
- FF Tisa Web
- 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
- Futura - 4
- Proxima Nova - 4
- Roboto - 3
- Open Sans - 3
- Brandon Grotesque -2
- 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.
Published by Ryan Parsley