Design & UX
Article

Should You Be Brave with Your Typography? Ask Mr. Robot.

By Alex Walker

So You Need a Typeface - Julian Hansen

About five years ago Julian Hansen published a brilliant flowchart poster called 'So You Need a Typeface'. Answer a series of simple 'yes/no' questions and Julian will point you to the font you need.

While the poster is a little tongue-in-cheek, it gives you an idea of how complex font selection can be. Someone once said 'Nobody ever got sacked for buying IBM' and perhaps the same could be said for 'choosing Helvetica'. As designers, we can easily be forgiven if we make safe typography decisions.

And, to be honest, that is generally sound advice – particularly with the denser, text-heavy webpages.

But it's also a bit of a shame. The current website trend towards large image backgrounds and lower text provides a little more space for less conservative choices.

Logos & Movies

Movie titles and company logos are two areas with long histories of more inventive and daring typography. There's simply more room to experiment with a logo than you might be afforded on a book, newspaper or magazine layouts.

Sega Logo (1975)

Back in 1975 Sega (formally 'SErvice GAmes') unveiled this epic sci-fi creation – all Star Trek, disco and circuit boards.

CNN Logo (1980)

The logo has served Sega brilliantly and remains almost unchanged 40 years later. The CNN logo (1980) certainly paid homage to the Sega design, but I can't remember seeing anything else like it since. Like glitter rock, it was kitsch and firmly rooted in its time.

..Until ‘Mr. Robot’

Mr Robot text super-imposed over face

If you've missed it so far, Mr. Robot is a 2015 TV psychological thiller centered around a troubled, young computer security expert and a shady hacker group – think of it as 'Edward Snowden in Breaking Bad'.

Everything from the scripting to the photography to the acting is amazing, but it's the opening titles that really set the tone from the first seconds.

Mr. Robot title panel #1 - The corporate headquarters

Each episode carefully crafts the 'Mr. Robot' title – in that super kitsch Sega-like font – into a new scene. The results are stunning. Touches of Kubrick framing mixed with 80's video games blend to create a vaguely familiar yet disorienting tone. And that's the intention – this is a dark, unsettling story.

Mr. Robot title panel #4 - the shop

Creator Sam Esmail said:

The typeface was the one ingredient about the opening titles that we kept as our flag of consistency… I must have looked at hundreds of fonts before settling on our current one.

Now as a designer, I'm fairly sure my natural instinct would have been to completely avoid a font like that. Futura would have been just fine. Univers would have worked. And nobody would have noticed – much less complained.

Mr. Robot title panel #3 - the gym

But I doubt either would have had the visual punch of that unloved and unlovable Sega-esque typeface.

There are plenty of other examples of oddball type choices working.

The Fugees - The Score

Back in the mid-90’s, The Fugees released this striking album cover for ‘The Score’, employing a very distinctive typeface. Though their R&B hip hop has little to do with italian-american mobsters, you might recognize that font from The Godfather trilogy.

The Godfather graphic

It doesn’t have to only be about choosing obscure typefaces. Sometimes it’s about how a font is used.

Re-Inventing Clarendon

Londoner Robert Besley designed the Clarendon slab-serif way back in 1845 with newspapers in mind, but it might conjure up visions of all-capitals wanted posters to our eyes. You’ll even see it on NFL field markings. It looks heavy, solid and very official.

Clarendon used on wanted posters and football fields.

Clarendon used on wanted posters and football fields.

Yet in the 1960’s, Blue Note Records released a series of hip jazz masterworks with incredibly iconic covers dominated by fusty old Clarendon. Clarendon is very blocky and static when centered in all uppercase, but Reid Miles, the cover designer, found it had energy and shape when used in all lowercase. It has echoes of musical notation.

Blue Note Album cover designs

Miles also used a limited, flat color palette and loose asymmetric layouts to create a feeling of movement.

"Fifty Bucks an album…they loved it, thought it was modern, they thought it went with the music…one or two colors to work with at that time and some outrageous graphics!".

To me, these are all glorious examples of the power of listening to what smart people might tell you – and doing the exact opposite.

Originally published in the SitePoint Design Newsletter.

  • http://careersreport.com maij.thompson

    Allow me to show you a genuine way to earn a~ lot of extra money by finishing basic tasks from your house for few short hours a day — See more info by visiting >MY*&___(DISQUS)*%___ID)

  • Jacob Alvarez

    The link to the typeface poster is broken.

    • http://sitepoint.com Alex Walker

      The site seems to be down as I check it now (was fine last week). His links to the image assets still work so not sure what’s going on there. Here’s the relatively hi-res poster image: http://julianhansen.com/files/infographiclarge_v2.png

  • http://SalaryNet30.com Marinda Caulder

    This is something very interesting that is worth paying your extreme attention ,a very good chance to work for those people who want to use their free time so that they can make some extra money using their computers… I have been working on this for last two and half years and I am earning 60-90 dollar/ hour … In the past week I have earned 13,70 dollars for almost 20 hours sitting ….

    Any special qualification, degree or skills is not necessary for this, just keyboard typing and a good working and reliable internet connection ….

    Not any Time limitations to start work … You may do this work at any time when you willing to do it ….

    Just know how I have been doing this…..….see this (webiste-Iink) on my !profile!` to know how I am working` on this`

    *m9

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.