Yay, webfonts! I love them! And I think most web designers agree. But they can also throw a bit of wrench in your design process, especially if you base a lot of your design decisions off of your type choices. If you don’t have a desktop copy of the web fonts you’re looking at, making a call on measure, the baseline grid or even your grid column sizes can be tough to do in Photoshop.
On top of that, we’re judging our type decisions both on how they perform as part of our design system as well as how they perform technically. I see these as reasons to get in the browser as early as possible and vet those web font decisions sooner as opposed to later!
Personally, I’m not happy moving my entire design process into the browser just yet. But I’ve found that moving even just the type portion into the browser early, is a big help. I’ve been creating type tester pages as part of the design process for projects I’ve been working on that use web fonts heavily.
Type tester pages
Sure there are type specimen pages and browser screenshots provided by most web font services and foundries. These are super helpful, but they are missing one important thing for me. Specifically, the context of my design and the content in question. That context can make a huge difference in what works and what doesn’t!
So, before the design is finalized, I create type tester pages to test out my web font decisions. They’ve been incredibly valuable for choosing web fonts that will work for the project.
These pages consist of:
- The main design elements – header, footer and colour pallet that will be used. A very quick and dirty page layout based on my current PSD, generally.
- Text-based content that is real content for the site or at least really close to it.
- Basic HTML elements expected to be used in the site – titles, lists, paragraphs, blockquotes and any special treatments like pull quotes and such.
Comparing and Making Decisions
Once I have the tester page set up, I load up a kit in typekit (my web font service of choice) with a handful of web fonts I’m considering. This usually results in a HUGE kit, but it’s just temporary.
I create maybe two or three of these pages, assigning different combinations I’m considering to each. It only take a few minutes. (Using a CSS starter starter file like type a file comes in handy here too.) Then test them in various browsers and such to see how they perform.
It’s amazingly helpful to know how your typeface decisions will play out early on.
Adapting
I’ve used this technique mostly on projects that rely heavily on web fonts, which isn’t every recent project by any stretch, of course. Generally, it’s not something I’ve been showing to clients. It’s more of an invisible deliverable to make sure I can really stand behind my web font choices and because I worry about these things early on :)
I’d love to hear about other techniques as well. How have you been testing out your web font decisions?
ETA: A Sample Page
As Dan suggested below, these kinds of things are better with a visual. So, here’s a simplified and generic-ified type tester page example. These are much more useful with actual content and all, but you get the idea.
It’s obviously quickly thrown together — notice the awkwardness of the tiling background header image, nice touch, right? But that’s totally okay for these purposes. You can see I was using the headsup grid to help work out my baseline grid, and keeping it fluid helps indicate where things might need adjusting for readability should this end up as a responsive design.
In the end I didn’t end up using this particular typeface pairing. It worked great in my head, but didn’t quite have the vibe I wanted when it was actually in context.
