Making the type look better

I set out to write a quick post about the problems and solutions I’ve encountered while redesigning this site. Instead, this turned into a 1,000 word account of my attempt to make the type look better. For those who can’t be bothered (and I couldn’t blame you) here are the highlights: I like FF Tisa, check out MIN, and be true to yourself when designing your logo.

As some of you may notice, I’m gradually redesigning this site. Here are some of the goals for this undertaking:

  • Use a fluid layout
  • Design a better logo
  • Improve the typography
  • Incorporate CSS3 hotness
  • Re-think the content

While these sound like good, important objectives, I think the primary drive behind the redesign is that I simply need something different. I can’t look at the same design for more than a year before I start to loathe it.

The erratic type in version one.

After months of adjusting I’d managed to execute the first two goals with some level of satisfaction (though I continue to tweak the layout, and have scrapped dozens of logos). So, I recently decided to start giving the typography for the site some serious thought.

This aim to make the type look better began only with the vague knowledge that what I’d used in the past was rubbish. The original version of Owltastic featured lots of arbitrary all-caps and italics, and the occasional cluster of Zebrawood. As I embarked on improving the type for version two, all I could think to do was to experiment with that old standby of Helvetica and Georgia, juggling the two around, and always feeling they came up short.

One of the many variations on the seal logo.

I started to wonder if part of the problem was that Helvetica didn’t sit well with my pretty new logo, which contained a mix of handcrafted, old-fashioned typefaces. Trade Gothic, Avenir, Georgia, and… Helvetica? One of these things is not like the other.

I decided I needed something that jived well with my love of sturdy but slightly quirky fonts, and almost immediately I fell in love with FF Tisa. I’ve seen FF Tisa around the web for awhile now, and it must’ve been lurking in the massive Design Idea Dump in the back of my mind, because as soon as I set it up it felt right. From the Typedia blog:

“FF Tisa has become a web designer’s darling… Its rugged build, short serifs, lack of decoration, and gently leaning italics are all well suited for the pixel grid.”

Typekit, the service I’m using to display FF Tisa, describes the font as “a softer, more dynamic version of a nineteenth-century slab serif wood type.” This really resonates with me, since along with my endless pining after vintage, decorative typefaces, I am forever hungering for the perfect web-ready slab serif. So, I dumped the dreaded Swiss sans-serif, and settled into FF Tisa.

However, something was still off. The balance didn’t feel right; the headlines weren’t discernible enough, and the body and secondary text weren’t clearly differentiated. Frustrated, I gave up designing, and decided to browse through my forever backed-up collection of RSS feeds.

Owltastic, using FF Tisa, viewed through MIN

This turned out to be the right move, since there I stumbled across Brian Hoff’s link to MIN. Oh man, is this tool useful. I could’ve saved myself from some embarrassing line-height incidents in the past if I’d had MIN in my tool belt. MIN is a simple bookmarklet that, when clicked, hides a site’s imagery, colors, borders, and other ornamentation, displaying a stark, black-and-white version of the design. This helps to narrow the focus to the typography, and ensure everything is balanced and readable. After some experimenting, and frequent references to the godsend that is type-a-file, I struck what seems to be a better balance.

The overall feel for the type on the page was starting to strike the right chords, except for one distracting element: my brand new pretty logo. Now it felt like all the Avenir and Trade Gothic and Archer were competing with the lovely FF Tisa, not to mention how hokey the idea of an “Owltastic seal” suddenly seemed. Seals are trendy and hip and often look amazing, but it just wasn’t me. Of course, if trendy and hip isn’t me, then what is? I am silly. I love to doodle, I like cuteness, and cuteness was something I had in the old design, with its humongous, ridiculous owl.

A snippet of the illustration I created for Interlink

Unrelated to the redesign work, all week I’d been playing with this owl illustration I created for the upcoming Interlink Conference. I’m not sure why I kept returning to this illustration, since I suck at using Illustrator, and the “design” was already finalized.

I use sarcastic quotes around “design” because this little doodle looks like something someone scribbled on a scrap paper, which is exactly what it is.

When Shawn, the conference organizer, told me to make an illustration that is “classic Meagan,” all I could think of was the silly little owl characters I scrawl when I’m bored. So I scanned one in, traced it, and handed it off as a “design.”

The new sketchy Owltastic logo.

This got me thinking that if a hastily sketched owl is “classic Meagan”, then perhaps that’s what should greet visitors to my site. So, I tweaked my Interlink owl a bit and slipped him into the #logo div on the site. The “font” below him is something I drew in 30 seconds in illustrator, and pretty closely matches the crooked, lanky letters I sometimes draw.

Thanks to the new logo and FF Tisa, instead of 5-6 fonts on the site, I have two (if you can even count my hastily drawn “Owltastic.”) Things are simpler now. Simpler feels like progress.

I’m still not happy with the colors, or the layout, or all of the code, and I haven’t even finished the content (is there anything worse than writing your own about page?). And even after all this, I’ll probably still obsessively adjust the type.

I set out to write this blog post about doing a redesign, and almost 1000 words later I’ve barely touched on the ridiculous process I put myself through when selecting a typeface.

When designers do a redesign or personal project, it’s usually the only time we get to work unencumbered by petty demands. The sky is the limit: we can support any browsers we want, use any colors we want, and curse as much as we want. Sounds liberating, right? But if all my projects were this open-ended, then this level of obsessive, tortured adjusting is what my work life would always be like. Suddenly I’m incredibly grateful for the constraints of client demands, art director visions, time, and budget.

There’s a good chance I’ll have another design up tomorrow, but I probably still won’t have an about page.

Leave a Reply

Your email address will not be published. Required fields are marked *

22 thoughts on “Making the type look better

  • Comment by Liz
    April 25, 2011

    It’s funny, because I landed here the other day an noticed your owl seal logo and then just now as your page loaded my mouth fell open at how cute your newER logo is. Get it, girl.

    Ps; Thanks for sharing about MIN. How epic.

  • Comment by Leslie
    April 25, 2011

    Thanks for sharing your thoughts on how difficult it is to design, or in your case, redesign, a personal website. I’m struggling to design my own portfolio site (I’m a web design/development student) and I find myself agonizing over every little design decision. Luckily, I love every minute of the process but it can still be a form of torture at the same time.

    Keep up the great work on your redesign, love what you’ve done with the place so far.

  • If you want to destroy a designer, give him all the time in the world. Give me constraints or give me an endless potential to never finish anything. Clients really are a blessing! =)

    It’s been really exciting to watch you grow the past couple years. Keep on cranking. I love the sketchy owl, and the hand-drawn container bottoms (wide layout only) are a nice touch.

  • I always find it quite fascinating reading how other designers are approaching their site re-design process (so document away, no more how trivial!).

    Your last theme was a joy to look at, however, I have to say I’m enjoying the clean look of the work you’ve put into this newer variation. Fluidity looks just about right and the logo looks a lot more ‘memorable’ πŸ™‚

  • Love the type and the overall experience. The fluid layout is just perfect. It works like it should! πŸ™‚

  • I love your site’s design. The fluid layout is simply magnificent. Great use of CSS3 as well. πŸ™‚ I may have to give FF Tisa a try!

    +follow!

  • Without a doubt, the CSS3 transition fade is the hottest thing in the new spec. Love it.

    Love this design, too.

  • I just wrote a bookmarklet that you and other designers may find useful. If you come across a font you like, but the designer wasn’t as nice as you and didn’t give its name, you can select some text and then click the bookmarklet and it will tell you all the font info — family, style, etc. http://alexch.github.com/bookmarklets#fonzie

  • Megan, a great read – thanks for being real.

  • FF Tisa is a great font! Great job on this site design (:

  • Comment by josh
    April 26, 2011

    Looks great Meagan! Really like the Tisa, it even looks good on a PC, unlike a lot of web fonts. Fluid layout is perfect. New logo feels truer to your previous design as well, which I also loved!

  • I have been pondering my own website redesign as well, and I must say that you are at least five steps ahead of me in the fact that you have a blog up! Love your candid thoughts and very handy links (never heard of Min before!)

  • I feel your pain. I’m struggling with the same exact thing myself and getting nowhere at incredible speed. I was writing a blog post about it too but you’ve done a much better job than I ever would. I love this site by the way.

  • Great post. I’m a huge typography nerd myself and I enjoyed the hell out of this post. Good work.

  • Comment by Jann Howell
    April 26, 2011

    Thanks so much for sharing MIN. The sketchy owl is super cute and matches the overall feel of the site, and your hand drawn type is quite lovely.

    I completely understand you’re struggle with the about page. I’ve been working on my portfolio site and sometimes wish I could leave the about page out completely. All I ever end up with is a paragraph, beyond that I start to ramble.

    Looks great so far, keep up the good work.

  • Is there anything worse than writing your own about page? – Do you know what, I’m not really sure that there is!

  • I love reading these redesign articles. Thanks Meagan!

  • Yeah, the whole responsive web design phenomenon is such a wonderful jaw-dropping pinnacle of achievement. Once you show a client how the site maneuvers on any browser or device, and how their fixed width site looks junky, they quickly understand.

    To re-design existing fixed-width sites and turn them into responsive sites is the big question for me. I’ve been working on one, but finding it very time consuming. Working on a site from scratch is a delight though…

  • Yeah it’s difficult task to redesign a website, takes a lot time than designing a fresh one. But anyway you have made it. I love your cool new design, it’s nice to see the new typography. CSS3 makes its more beautiful. Thanks for the article.

  • I love the simple design and have been trying to make my site more user friendly like yours. I hope you don’t mind me copying your layout. Just a little lol