Use Typecast to design for the reader by putting type first. Try it now

« Back to Blog

Show & Tell: A Practical Look at Choosing Type

on Friday 17th of May 2013

Robbie Manson opens his portfolio and shows us how he settled on one project’s lovably chubby typeface.

Robbie's thought process
In my last post I laid out my process for choosing type. Today, let’s look at how that approach plays out using a little logotype project I did at FreeAgent last year called Earnest.

Getting a handle on feel, personality and function

Earnest is a free record-keeping iPhone app for freelancers and small businesses. You enter your individual income and expenses to get an idea of how much tax you’re due.

Earnest app details on the iphone

Earnest running on the iPhone

Early on in planning, we decided that the personality of our then-unnamed app had to counteract the mass of utilitarian finance apps already available. We thought it should feel like a trusted companion, not a soulless pocket calculator.

But while an affable personality could help shape the overall feel of the app, we didn’t want it to hijack important workflows. There had to be an appropriate balance.

My moodboard at the start of the process

My early moodboards

I was already cobbling together moodboards to help guide the creative direction, but we needed a name to begin working on the logotype. Names like MyRecordKeeper or iRecordKeeper were to be avoided – too formulaic, too vapid. The double entendre of the name Earnest injected a little life into this functional spec and hinted at the idea of a diligent, bookish worker. It also just sounded nice, and is short. (It’s not all science, you know.)

Earnest, the person

As I explained in my previous post, personifying type is something I do to help focus my choices. Selecting a small set of adjectives gives meaning to choices and keeps me from getting derailed by the latest trendy typeface.

Russell from Pixar's Up
We applied this same technique when thinking about the whole character of Earnest – wrapping our chosen adjectives in a sentence:

“He’s personable, plucky and a little mischievous, but at heart a loyal companion with integrity”.

If Earnest were a person, he’d probably be Russell from Pixar’s Up.

Narrowing my classifications

I started scouring my scrapbook for suitable typefaces and ruled out a serif face early on. Most people consider accounting stuffy and dull, and an authoritative serif was likely to emphasize that. Conversely, any sans serif worth considering had to be ballsy enough to do Earnest’s personality justice. If it lacked personality—or worse, felt like it was trying to make things ‘cool’—it wouldn’t work. Accounting isn’t cool, so let’s not pretend it is.

Earnest isn’t from the 13th century, either, so I knew I could forget about blackletter.

A script or calligraphic face was a possibility, depending on the style. It might end up feeling regal, which didn’t feel like a good fit for Earnest. But if it felt authentically handwritten it could help bring out those personable, loyal or even mischievous traits.

Finally, a slab serif would be able to stand confidently on its own, and depending on its particular features, could help bring out that plucky aspect of Earnest’s character without things descending into a kid’s birthday party invitation.

Getting my hands dirty

Each time I found what felt like a promising typeface, I set the word Earnest in the type preview tool on its foundry website to find the best weight. I then took a screenshot of each preview image and pasted a copy into A4 artboards in Illustrator.

Type samples on paper

My initial selection of typefaces

After collecting all of my options, I printed the artboards and stuck them on the wall to reassess and narrow the batch to two or three good contenders. (If I’d been using the Typecast design tool at the time and the fonts were available, I could’ve just set my choices up side-by-side in the browser to compare them, which would’ve would have been quicker.)

Type in the DOM inspector

Hacking the CSS and inline values in the DOM Inspector

I then set Earnest again for each of my shortlisted choices, except this time I opened up the DOM inspector in my browser and hacked the dimensions of various site elements until the preview image was as wide as my monitor would allow.

I grabbed a new screenshot and repeated the process before pasting them onto a fresh Illustrator artboard and tracing them. With each option now a vector group, the characters could be kerned by hand to do each typeface justice before coming to a final decision. (Again, in Typecast, you could just resize them to full screen width in the browser all at once, and then output your type as a PNG.)

Type set in Farao Bold and Maple Black

My final two contenders: Maple Black from Process Type Foundry and Farao Text Bold from MyFonts

Farao Text Bold has tons of character: its exaggerated terminals, huge x-height, contrasting tiny ascenders, severe shoulders, varied counters and practically non-existent aperture give it a real mid-sixties Hanna-Barbera vibe. But the eccentricity of its details and slouching letterforms make it feel just a bit too disheveled. It’s like a version of Earnest who’s taken early retirement in Miami and had one too many tequilas.

Earnest, for all his plucky and mischievous qualities, is still a record-keeping app. He helps with your money. It would have been easy to go that little bit too far and have the logotype come off as cartoony. Maple Black contrasts a similarly large x-height and short ascenders just like Farao, and its eyes and counters are almost comically small. But despite its exaggerated features, it isn’t as confrontational as Farao. It felt more like Russell: lovably chubby.

Animated gif of Earnest logotype design stages

Having settled on Maple Black, I developed what I had into the finished logotype that you see at the end of this gif.

By forming a plan of attack before I began browsing for type and setting fonts, I was able to quickly work my way past the sea of typefaces that weren’t suitable for Earnest and more easily identify the best fit, rather than blindly fumbling around. Hopefully this example (and my tips for narrowing your type options) will help you feel a little less lost when it comes to choosing type and become more confident in your choices.

A big thank you to our guest author Robbie Manson for writing today’s post. For more from him, check out his work & articles, his top-notch talk from the New Adventures conference titled ‘The Mindful Designer’, and his tweets.

Guest authors are paid for their contribution, and all opinions are their own. If you’d like to write for the Typecast blog, get in touch with shelly dot wilson at typecast dot com

Type on Screen

Get more web type tips, interviews and design gems by email

Hook me up!

Comments

blog comments powered by Disqus