/ log / 24th May, 2010 /

Reversed Logotype

Reversed type optical illusion example.

This image shows a particular optical illusion that confronts us every day. Notice the difference between the black text on a white background and the reverse. With reversed type — light text on a darker background — the strokes seem bolder.

Black text on white is very familiar, so we can be forgiven for thinking it correctly proportioned. For familiarity’s sake we can say it is, but there are two effects happening here: The white background bleeds over the black, making the strokes seem thinner. With reversed type the opposite is true: The white strokes bleed over the black, making it seem bolder.

Punched, backlit letters on a sign outside the Nu Hotel, Brooklyn.

One of the most obvious examples of this is with signs where the letters are punched into the surround then lit from inside. In his article, Designing the ultimate wayfinding typeface, Ralph Herrmann used his own Legibility Text Tool to simulate this effect for road and navigational signs.

One might say that characters are only correctly proportioned with low-contrast. Although objective reality hails that as true, it isn’t a good reason to always set type with low contrast. Type designers have invariably designed around optical illusions and the constraints of different media for us. Low-contrast text can also create legibility and accessibility problems. Fortunately, kind folks like Gez Lemon have provided us with simple tools to check.

As fascinating as optical illusions are —  the disturbing, impossible art of Escher comes to mind — we can design around reversed body type. On the Web, increasing tracking and leading are as simple as increasing the mis-named letter-spacing and line-height in CSS. However, decreasing font weight is a thornier problem. Yes, we will be able to use @font-face to select a variant with a lighter weight, but the core web fonts offer us no options, and there are only a few limited choices with system fonts like Helvetica Neue.

Reversing a logotype

For logotype there are plenty of options, but it makes me slightly uncomfortable to consider switching to a lighter font for reversed type logos. The typeface itself is not the logotype; the variant is, so switching font could be tricky. Ironically, I’d have to be very sure that that was no perceivable difference using a lighter weight font. Also, with display faces, there’s often not a lighter weight available — a problem I came across designing the Analog logo.

The original Analog logo seen here is an adapted version of Fenway Park by Jason Walcott (Jukebox Type).

Analog logo original.

The logotype worked well when testing it in black on white. However, I wanted a reversed version, too. That’s when I noticed the impact of the optical illusion:

(Reversed without any adjustment.)

Analog logo reversed (flawed).

It looked bloated! Objective reality be damned; it simply wouldn’t do. After a few minutes contemplating the carnage of adjusting every control point by hand, I remembered something; eureka!

(Reversed then punched.)

Analog logo reversed (punched).

Punching the paths through a background image in Fireworks CS4 removed the illusion. (Select both the path and the background then using Modify > Combine Paths > Punch.) Is this a bug? I don’t know, but if it is, it’s a useful one for a change!

Modify > Combine Paths > Punch in Fireworks CS4.

N.B. I confess I haven’t tested this in any other Adobe products, but perhaps you will be so bold? (’scuse the pun. :)

Fireworks CS4 screenshot.

Matthew Kump mentions an Illustrator alternative in the comments.

I grinned. I was happy. All was well with the world again. Lovely! Now I could go right ahead and think about colour and I wouldn’t be far from done. This is how it emerged:

Analog logo.

A final note on logotype design & illusions

Before we even got to actual type for the Analog logo, we first had to distill what it would convey. In our case, Alan took us through a process to define the brand values and vision. What emerged were keywords and concepts that fed into the final design. The choice of type, colour, and setting were children of that process. Style is the offspring of meaning.

I always work in greyscale for the first iterations of a new logo for a few simple reasons:

  1. The form has to work independently of colour — think printing in greyscale or having the logo viewed by people with a colour-impairment.
  2. It allows for quick testing of various sizes — small, high contrast versions will emphasise rendering and legibility issues at screen resolutions, especially along curves.
  3. I like black and white. :)

I realise that in this day and age the vast majority of logos need to perform primarily on the Web. However, call me old-fashioned, but I still think that they should work in black and white, too.

Brands and display faces emerged with consumer culture during the 19th Century. Logotypes were displayed prominently in high streets, advertising hoardings, and on sign boards. In many instances the message would be in black and white. They were designed to be legible from a distance, at a glance, and to be instantly recognisable. Even with colour, contrast was important.

The same is true for the Web today; only the context has changed, and the popularity of logomarks and icons. We should always test any logo at low resolutions and sizes, and the brand must still have good contrast (regardless of WCAG 2.0) to be optimal. A combination of colour and form works wonders, but in a world of a million colours where only a handful are named in common parlance, having the right form still seems a smarter choice than trying to own a palette or colour.

A final word

This article was prompted by a happy accident followed by a bit of reading. There are many references to optical illusions in design and typography books. The example image at the start of this article was inspired by one found in the excellent Stop Stealing Sheep and Find Out How Type Works by Erik Spiekermann and E.M. Ginger. There’s also plenty of online material about optical or visual illusions you can dive into. There’s also more on how the eye processes light. Oh, and don’t forget the work of M. C. Escher!

Human eyes are amazing. In two sets of watery bags we get a wide-angle lens with incredibly sharp focus and ridiculous depth of field. Apparently our brain is even clever enough to compensate for the lag in the signal getting from retina to cortex. I know next to nothing about ocular science. Spending a morning reading and thinking about optical illusions, and contemplating my own view here in the garden office is pretty awe-inspiring. If only my photographs were as good as my eyes, illusions or no.

Share

Browse More Articles

15 Comments

  1. 1. By Danny Zevallos on 24th May ’10 at 09:55am

    Great read! I will share this with my fellow designers. You may want to point out that it’s a different beast when dealing with print. You have to use the Medium styled font for body text due to the ink bleeding into the type especially for body text.

  2. 2. By Scott Corgan on 24th May ’10 at 17:49pm

    Wow, ok. I was unaware of illusions such as these. But now that you have my attention, I see it all over the place now. Thanks for the heads up!

  3. 3. By Christopher Murphy on 25th May ’10 at 05:39am

    You’ll be unsurprised to discover that we’ve just added this to the list of required reading for our students and will hit them with it the moment they return in the new year. A typically thoughtful and well-crafted piece. Thank you.

  4. 4. By black eye on 25th May ’10 at 18:12pm

    @Christopher - I’m so glad you are helping educate the future designers coming through. Too many times – on my various design forums – I see junior designers saying 'I don’t care, it’s only for the web' when prodded about how their logo might reproduce at different sizes, in reverse or god forbid in black & white only.

    Sure the arguments of faxes and photocopiers are increasingly valid, but I don’t see (hand-held) newspapers dying in the near future, and the cost of a colour advert vs black & white should be kept in mind.

  5. 5. By Shane Weave on 26th May ’10 at 09:24am

    Really great post, This will come in very handy when reversing any logo’s of my own!

    Thanks.

  6. 6. By Christopher Murphy on 27th May ’10 at 05:55am

    @black eye We certainly do our best and process posts like this, where established designers share their knowledge, are an important part of the learning mix.

    When I was trained, 22 years ago at Glasgow School of Art (seems like a long time ago), the emphasis was on looking at black and white first and foremost. If you could craft something that worked there, the rest - almost always - fell into place.

  7. 7. By Matthew Kump on 31st May ’10 at 20:45pm

    Wouldn’t using the Effect->Path->Offest Path in Illustrator be a quick way to do it? -0.0125pt or so depending on the size of your doc?

    That’s what I use, also to test how a symbol or wordmark looks lighter/heavier.

  8. 8. By benjamin on 9th Jun ’10 at 15:17pm

    I agree with you and Chris, designing logotypes/brandmarks (logos) in B/W first is so important. If the design works in B/W your options for using color or masking are nearly endless.

  9. Jon 陳’s profile 9. By Jon 陳 on 14th Jun ’10 at 01:13am

    Thanks, Christopher!

    Matthew, that seems like a good alternative. I’ve edited the article to include it. My only concern would be how the adjusted paths behave on the pixel grid, but that could easily be nudged afterwards. Thanks!

  10. 10. By Wendy on 22nd Jun ’10 at 01:44am

    Great post! Thanks for sharing with us. It´s amazing what big effects could be reached bey changing only colours. My best friend is also a designer - I will show her your interesting post!

  11. 11. By Jason on 7th Jul ’10 at 08:56am

    This was truly a great read. Found the article from a post on VandelyDesigns “25 Beautiful, Minimalistic Websites." I love how the logo turned out in color but it works just as well in black and white. That’s an excellent tip you made about the importance of the logo working without and color needed.

    Thanks so much for writing this, your tips are very useful and your article was very inspiring!

  12. 12. By Robin on 13th Sep ’10 at 06:55am

    Late-comer to your post - very interesting. The illusion is subtle, but definitely noticeable - will be bearing this in mind for our work. Thanks.

  13. 13. By Manik on 22nd Oct ’10 at 23:17pm

    Very nice article. Its really informative. Now I’ll definitely share this with all my mates.

    Many thanks to throw my attention on this side also.

  14. 14. By John on 29th Dec ’10 at 09:16am

    Your pages are really well-designed!

  15. 15. By Martin on 16th May ’11 at 08:18am

    The illusion is subtle, but definitely noticeable!

Post a Comment

Required sections are marked § . Please remember, debate and courtesy are mutually inclusive.

Personal Details and Authentication
Comment

Lately in the Log

  1. Anakin Tue, 26th Jun 2012 {4}

    I’m pleased to be able to say that Analog is joining forces with…

  2. We, Who Are Web Designers Mon, 19th Sep 2011 {67}

    In 2003, my wife Lowri and I went to a christening party. We were friends…

  3. Ampersand, the Aftermath Wed, 22nd Jun 2011 {4}

    The first Ampersand web typography conference took place in Brighton last…

  4. Design Festival, The Setup, and Upcoming Posts Mon, 20th Jun 2011 {2}

    Wow, this has been a busy period. I’m just back from the Ampersand…

  5. Web Design as Narrative Architecture Wed, 30th Mar 2011 {12}

    Stories are everywhere. When they don’t exist we make up the…

  6. Ides of March Tue, 15th Mar 2011 {5}

    My friend and colleague, Chris, has shared a spiffing idea, the Ideas of…

Remarks from the log

  1. By pixelangry in We, Who Are Web Designers:

    Unfortunately, here in Italy, the figure of the web designer is seen as a figure who plays a nerd on the computer,…

  2. By www.canadianseoagency.com in The Paragraph in Web Typography & Design:

    Yep, this would be arguably the best articles I’d ever gone through in the recent times. I do hear alot of…

  3. By George in Copywriting, Experience Design, Daleks & Julio:

    Thanks

  4. By Martins in Typeface != Font:

    Great post Jon, I stumbled across it by chance on Google..!!

  5. By OddsRİng Giriş in Ides of March:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

  6. By OddsRing Giriş in Ampersand, the Aftermath:

    hourse to go where doing pts to 72pt (an inch high) and sometimes bedava rulet oyna 84pt and 96pt, or as large as a…

People and XFN

Analog folks:

  1. Andrei Zmievski

  2. Chris Shiflett

  3. Jon Gibbins

Friends, colleagues, and authors with interesting voices:

  1. Ben Ramsey

  2. Dan Mall

  3. Denna Jones

  4. Ed Finkler

  5. Elizabeth Naramore

  6. Elliot Jay Stocks

  7. John D. Boardley

  8. Helgi Þormar Þorbjörnsson

  9. Joe Leech

  10. Jos Buivenga

  11. Kester Limb

  12. Nicola Pressi

  13. Patrick H. Lauke

  14. Piotr Fedorczyk

  15. Richard Rutter

  16. Rick Hurst

  17. Sean Coates

  18. Simon Pascal Klein

  19. Terry Chay

Live the questions and one day grow into the answers.