The simplest solutions are usually the best

Posted in Brand and Design

I spent over five years happily tinkering with my brand, trying to find a way to tie in a stand-alone icon that I was happy. Now five years is a long time, but this story starts before that, with my original brand.

My original branding was ok… I used the friendly-looking Museo Sans as my main typeface and my logo used OCR-A, a retro monospace font, set white on a smokey blue background with the words ‘temper’ and ‘temper’ stacked on top of one another.

The original tempertemper logo, using OCR-A in white against a blue background

It served me well for the first few years, but it was always something I was looking to overhaul. I set five rules for a re-brand:

  1. I had always written ‘tempertemper’ as one word, so the logo should follow this – no separation
  2. The logo should include some kind of icon or motif that I could use separately
  3. It should work well against a white background, which my original logo never really did
  4. It should convert well to work against a dark/black background, which my original logo definitely never did
  5. Without losing friendliness, the typefaces should feel more classic; less cartoony

My re-brand work started with the logo, with the notion that the typeface and general colour palette would stem from there.

A first stab

I’ve always been a fan of Helvetica Neue in a bold weight, so a lot of early concepts involved that.

The first half-decent attempt at a redesign of the tempertemper logo – Helvetica Neue in smokey-blue against a white background

It was progress, but it only fully satisfied the first rule:

  1. It was presented as one word
  2. There was no motif/icon
  3. As the bold letterforms were more distinct, it worked better than the original logo against a white background, but it wasn’t great; changing it to black was better but it lost character
  4. Similarly, it worked ok on a black background; again, it was better in white, but felt a bit lifeless
  5. Although beautiful, Helvetica Neue can feel a bit aloof – classy but far from approachable

Furthermore, the way the r of the first temper met the t of the second (the ear of the r is thicker than the crossbar of the t) didn’t sit right with me; this was especially true of black text on a white background. Also, Helvetica Neue’s lowercase a and uppercase R are incredibly elegant, so a logo without them felt like a missed opportunity!

Bringing in the big guns

So in the summer of 2014 I called in my good friend Ant Barker, who I’ve collaborated with on countless client projects. He built upon the work I’d been doing and came up with something we were both very happy with!

The redesigned tempertemper logo, set in FS-Me in black with a bright blue underscore immediately after the second r, against a white background
  1. It was presented as one word
  2. An underscore, which represents a cursor, tying it into both coding and writing
  3. The black text works well against a white background and the (newly brightened) blue in the underscore provided a touch of vibrancy/fun
  4. It was easily switched to white text to accommodate a dark background
  5. The typeface (FS-Me) draws inspiration from Helvetica, so feels classic, but has a much more approachable feel:
    • There are no sharp edges to the letterforms
    • The softened corners on that previously-troublesome first r and second t mean they flow into one another well, despite having different thicknesses
    • The upward curves of the terminals on the t give it a wee bit of extra energy
    • The es are especially friendly-looking What’s more, FS-Me was designed with accessibility in mind which very much appeals to me

An iteration

In the five and a half years since that branding work my business has changed a lot! And the branding was flexible enough to allow for that, but one thing has been bugging me all those years: there wasn’t a true icon.

The square canvas version of the logo used the two ts and the underscore, which looked smart enough, but:

  • Letter-based icons feel too easy! I wanted a single shape/mark
  • It wasn’t all that distinguishable at very small sizes
  • It drew attention to the ts as initial letters of two separate words; something I’d be looking to avoid
  • Some people think of cars when they see two ts

Working on a new icon

The iteration of my logo started with the idea that I needed a more illustrative, stand-alone icon.

I started with blue fire icon, which was a (tenuous) reference to tempering steel, where metal is heated up then rapidly cooled down in order to increase its durability and efficiency. The fire icon went through revision after revision as I wanted to like it, but it wasn’t right.

The more icons I tried—a rocket ship (too start-upy), a star (too audacious), a lightening bolt (too flashy), a broadcast symbol (too RSS)—the more I felt simpler was the way to go.

I spent hours looking through the thousands of Unicode characters for some kind of punctuation. An asterisk looked nice but could suggest there might be some small print – not questions I wanted to raise in people’s minds. Curly braces ({}) had the right tone but have been done to death. Square brackets? A caret (^)? A triangle? Square? Circle? An arrow? Nah.

One day, on the bus home from work, I scrolled to a blog post by Amy Hupe in my Twitter timeline that used a great big square full-stop as its icon, and it hit me: the underscore was right all along! All it needed was some tweaking and it could be used as a stand-alone icon in its own right.

An iteration

Here’s where I landed with the new design:

The most recent iteration on the tempertemper logo in black with a thickened, non-rounded rectangle underscore, on a white background

Don’t see much difference? Well, there’s not! But if you look closely:

  • The underscore is thicker, to match the widths of ascenders (vertical lines) in the letters of the logotype, making it more prominent at smaller sizes
  • It now has square corners, making it a perfect rectangle and well and truly checking the ‘simplicity’ box
  • I gave it a simple 4 × 1 aspect ratio, which felt like the right proportions; it also fits nicely into an 8x8 square canvas

Here’s a closer look at the new underscore, in comparison with its older shape:

The old tempertemper logo animating into the new logo, to demonstrate the difference in the underscore

How’s that icon looking?

So the change to the logo is pretty low-key. The biggest change is how that translates to an icon. So instead of the tt_ icon, you’ll be seeing something else:

The new tempertemper icon in black on white, showing the 8 by 8 grid it was designed on; then coloured examples, first a blue square with a black underscore and a white square with a blue underscore on a black background, then a blue square with a white underscore and a black square with a blue underscore on a white background

So it’s a simple and very flexible icon; what’s more:

  • It’s a single shape/mark
  • It looks great at very small sizes
  • It doesn’t suggest tempertemper is two words
  • It doesn’t help Audi’s marketing department

The verdict

As I had been doing with all of my ideas, I ran it past Ant for a more objective out point of view:

Its a subtle improvement to something that I always thought looked great. So it’s a yes from me!

So it turned out, as with most things design, the simplest solution was the best.

Get them delivered!

If you enjoyed this and want all the latest articles delivered to your inbox every month, pop your email in the form below.

I don’t collect any data on when, where or if people open the emails I send them. Your email will only be used to send you newsletters and will never be passed on. You can unsubscribe at any time.

More posts

Here are a couple more posts for you to enjoy. If that's not enough, have a look at the full list.

  1. Text snippets on Apple devices

    I’ve been using Apple’s built-in Text Replacement instead of TextExpander for a while now. It’s pretty basic, but it’s free and it does the job.

  2. The right way to use break tags in HTML

    Break tags are often misused. I’ll demo some markup patterns to avoid them, and reveal the one and only legitimate use case I can think of.