Episode Five, Type Speaks

In search of the perfect (type)face.

Published in

Pixel Tours

4 min readDec 11, 2015

We’re redesigning the Pixel Tours website. Previously, we looked at how giving the project a more formal structure helped me do things faster and in an orderly fashion.

Episode Four, Process Management

Or “The Time I Used Trello”

medium.com

As I’m sure you’re tired of hearing, getting typography right can do a world of good for your projects. This came up in our own competitor analysis. The companies we loved—Teehan+Lax, Jet Cooper and Ueno to name a few—had really solid type. Not only was their copy easy to read (and enjoy), but their choices matched their values. We wanted to do something similar.

Requirements

For a primary typeface, we needed to make sure we could license any required fonts across platforms—desktop and web at a minimum, with the likelihood of app or embed licenses down the road. We needed it to read well at a range of sizes, especially on mobile devices. We also wanted enough versatility in terms of weights, and linguistic support for French characters (on parle Français ici, n’est ce pas?).

In addition to technical requirements, I drafted a somewhat anthropomorphic description of Pixel Tours. Doing this gives me something against which to vet my choices:

We’re intelligent. We’re optimistic, a little bit edgier than our clients, but not so much as to scare them off. We’re an honest blend of idealism and pragmatism. We’re simultaneously the genius programmer in jeans and a hoodie, and the slightly more composed biz-dev guy in slightly nicer jeans. We’re casual, but a bit corporate, and slightly nerdy too.

Finally, I needed to keep budget in mind. We didn’t have a specific amount allocated to buying font licenses, but I knew I wasn’t likely to sneak TEFF Lexicon by my bosses.

Surfing MyFonts

There are many ways to get typefaces—independent foundries, marketplaces like MyFonts and Typekit, free resources like FontSquirrel Google Web Fonts…the list goes on. I chose MyFonts as a starting point on this particular day because they’ve got the wonderful FontScout iPad app. That afforded me the rare luxury of doing work from the comfy seats at the cafe, looking equal parts casual and sophisticated (at least in my own mind).

After a few rounds of browsing, I had a shortlist of around five sans and five serif faces that had the openness, quirk, flexibility and legibility we wanted. Here are a few picks:

Panton, with its generous x-height and outward facing aperture, feels really open. The slightly squared off forms give off the techie vibe we’re aiming for, while the curves in the lowercase a, n and r feel very optimistic. A solid option.

Flaco, while maintaining most of those qualities, is a bit firmer, a bit more structural. Kevin pointed out that it felt a bit more “user friendly” at a smaller size (meaning we wouldn’t have to do as much tweaking to get the rhythm the way we wanted it), and so this was our primary pick.

Carré Noir has a lot of personality, with an almost handwritten feel at times. Blown up, the serifs start to look a bit slab-like, with the truncated endings. This is our “stretch” pick for a secondary face, if we can afford it.

The alternative, free pick for a secondary serif face was Alegreya, with a slightly more formal, more calligraphic vibe. That said, each weight has its own personality, so there’s lots of potential to play with.

All Together Now

Choosing typefaces is only half the battle, the system itself needs to be designed. We wanted chunks of type that would read cleanly from small to large screens, and that would have that same honesty, informality and intelligence on a micro level as it did on a macro. To play with different configurations of our chosen faces, I fired up Typecast. Using their demo copy and css editor tools, I was able to get a feel for how the different faces would fit together.

Note that this step is just a rough approximation. We’ll really get into designing the system once we start laying out the content and doing some mockups.