Logo and Header for – Case Study

Just because you use an out-of-the-box theme doesn’t mean you can’t make it something special.

wtd-orange.jpgI recently got the opportunity and honor to work with Leo Babauta, the creator of the ultra-successful ZenHabits blog.

Recently Leo released a new blog that is already well on its way to becoming ultra-successful in its own right. His new blog,, is a great place to pick up what Leo has to teach about the art and craft of writing.

Thanks to a great pal and erstwhile client of mine, Stephen Smith, Leo and I were introduced to each other. At the time, WritetoDone hadn’t been unveiled yet, and Leo wanted to give it some more oomph and branding before letting the public know about it. I showed him some samples of my work, Leo gave me the thumbs-up and minutes later I was working on his new header and logo.

Being a fairly simple and Zen fellow himself, Leo’s request was for something simple and not too over the top. As a matter of fact, at the time he wasn’t even sure he wanted an iconic logo or just some slick text.

Text style exploration

In true David Airey style (and a big thanks to David for putting so much effort and education into his posts), I’m going to walk you through the process of designing the logo and header for Leo.

I started with the fonts, just to give Leo some things to check out while I worked on the logo. I figured a blog about writing would utilize one of the following font styles:

  1. Hand-writing
  2. Typewriter-ish (but not too typewriter-ish, like the courier of Copyblogger)

These are some of the fonts I played with for the hand-written style:


And here are some I found for the more “type-ish” style:


Such hand-writing and type-style fonts are a little too busy visually, and doing all of “WritetoDone” in such a font would be pretty goofy.

Sidenote: One rule I like to follow in design is that too much eye-candy or too much “busy-ness” gives the eye nothing to focus on. It’s like a guitar player who always plays a million notes a second. After a while it just becomes a monotonous stream with no dynamics. Similarly with graphic design, things just become a mess when there’s too much going on.

A better route, or at least the one I like to take, is to be subtle and minimal for most of the design. Then you break out of the box in one spot with some color or crazy font. That spot then becomes visually interesting and gives the piece a certain dynamic, but the design as a whole still remains lightweight and easy to digest.

I’m all about such subtlety, and luckily so is Leo, so we wanted just a splash of these specialized fonts in the logo. The rest could be in a more commonplace font. Gill Sans is a very stable and sturdy font, so I went with that. In bold, which is even more sturdy. Plus I love Gill Sans. If Gill Sans was a woman, she would certainly be my wife.

One of the great things about the title “WritetoDone,” and any other time you get to work with little auxiliary words like “to” and “the,” is that you can use them for the dynamics we’ve been talking about. In this case, the dynamic spiciness came from a font called James Fajardo.

Here are some samples of how the combo of Gill Sans Bold and James Fajardo looked:


Leo and I both liked the subtle use of color and out of the ordinary font, so that was it for the title exploration.

Logo exploration

Again, this being a writing blog, I produced logos with the following subject matter:

  1. Sheets of paper
  2. A feather writing quill
  3. A book/notebook

Each logo sample appears next to fonts, which helps the client visualize them in context instead of just floating alone in space. I always try to send as much context as possible. Actually, though you don’t see them here, I was sending Leo these logo samples placed atop screenshots of his site.

At this point, we were still exploring font styles, so here are the logos I produced alongside some font choices:

Sheets of paper logos


I really liked that top one but it was a little amorphous and nondescript. (I don’t know what those words mean but it makes my parents proud when I say stuff like that.)

Feather Quill logos


I am still completely and totally in love with the top and bottom samples above. Especially the orange paper with the feather. I’m determined to use it somewhere so…keep your eyes open and maybe it’ll show up on the web someday.

Book/notebook logos


Leo liked the final, more photo-realistic notebook on the bottom.

Final Logo and Header

The combo of the Gill Sans Bold/James Fajardo fonts, and the notebook/pen icon worked pretty well.

Except for one thing. Having all the text and the icon in one horizontal line stretched it out too much, pushing it into the tagline (which isn’t shown here, but can be seen on the site). We stacked the words to give it some punch and break it apart from the tagline. It worked perfectly and what you see below is the final version of the WritetoDone header (minus the tagline, which was a slam dunk as we just font-matched the Gill Sans Bold).


To see the full logo/header in place, and to read Leo’s brilliant work, head over to WritetoDone and check it out.

I’d also like to give a public thanks to Stephen Smith of HDBizBlog for getting Leo and I in touch with each other.

He earned a 10% commission for his referral, which I should mention is standard policy here at Charfish Design. Anyone, and I mean any man, woman, child or amoeba who refers work my way earns 10% of the final project cost. It’s free money for you, so send your friends and family here and let me know.

On the other hand, if you’ve got no friends or family and would just like to keep coming back here to read posts, be sure to Subscribe Now!


Subscribe to the Charfish Design Newsletter and get more design-related goodness than you can shake a stick at!


Charlie Pabst is a guitar-wielding designer, a sharp-shooting writer, and a tell-it-like-it-is ever-kid. He is also not afraid of hyphens.

He is the founder of Charfish Design and Ignite Living.

You can read more about him here. And you should definitely follow him on Twitter.

12 Responses to “Logo and Header for – Case Study”

  1. Honestly I really like your quill and orange parchment the best. I’m not sure why Leo decided on the other one.

    Anyways I am looking for a refresh of my own hand written logo, and would like to discuss your fees with you.

    I think your process with this hand written logo, is ideal for my needs.

    Please let me know?

  2. Thanks, DT.

    I appreciate it! I just checked out your site and really like that theme. Lots of yummy white space.

    I’m with you on the orange logo. It’s my favorite too so I’m dying to use it somewhere.

    About your own logo, I’ll contact you about it.

    Thanks for stopping by!

  3. (To all the readers who pass by: We’re told the world was created in 6 days. If James Chartrand had done it, it would have taken about 7 hours.)

    Thanks for the pithy and right-on-the-money comment, James. The days of blogging about what I had for breakfast are truly over, aren’t they?

    Thanks, buddy!

  4. @ James, Heh-heh that is the power of blogging. I will be in touch for sure and Charlie will definetly be posting his progress here. If he does not I will surly bug him to do so.

    Now is that issue of fees….

  5. Harrison –

    Well? Is that a problem? Don’t go acting like you can’t meet that deadline, Harrison; I’ve heard stories about you. You guys are quite a magic pair. You both make me sick 🙂

  6. @Charlie: Stories? What stories? James, what have you been telling people?

    Hmph. Of course I can meet that deadline – and then some. Hell, I’d have time left over, just as long as James doesn’t decide to move the cosmic couch around too much. 🙂

  7. See, Charlie? That, my friend, is how to get someone to do something in half the time – and I didn’t even have to lift a finger.

    As for moving sofas, I have impeccable placement taste and when it’s just right, it’s just perfect. 🙂


Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>


Subscribe to the Charfish Design Newsletter and get more design-related goodness than you can shake a stick at!

POWERED BY: WordPressBluehost