Header Banner - its where the magic happens

By Andy Bundock

I have been wanting to write about something that has been niggling at me for a while now. So now it’s time to put pen to paper.

Now you may be thinking, Oh lord, here we go, another old skool creative having a moan! Well, you may be right…or it may just be that that wafer thin slice of difference between you landing your next deal.

Basically, these niggles all come down to one thing
Attention to detail.

It doesn’t matter what medium or channel you are working in, Attention to detail is where the magic happens. Your client has hired you because you see and do things that they cannot. They may not know why they like your work compared to the other guys, they just do – And there’s the fairy dust.

Some things are more recognisable than others. Spelling mistakes are noticeable by all, really quite obvious. Miss-alignments, slightly less so and typographic errors will be noticed by a client team member with design training but not perhaps by the CEO.

There are often extremely thin margins of difference between you and the competition. Whether that be an individual trying to land a freelance gig or an agency trying to land their next deal. Either way, you are in a pitch situation. Your prospect is looking for reasons to drop you off their shortlist. They want to get down from say 12 to 6 and then have a face to face with the final 3. 

If your work has obvious imperfections in it that are recognised everyday no-nos then you could be in trouble. If you have missed xyz, then what else have you missed? If you are in software, could you have sloppy code? if you are a writer, will there be grammatical errors? If you are a designer, have you used the wrong hex ref? Doubt will creep in, the fact that these questions are being asked could easily mean that you are off that list. Even though they liked your work.

Whats wrong with this headline

Nothing wrong with this right? Apart from the double space, misalignment, inch mark and unnecessarily open spacing.

There are a number of examples that have been creeping in to my feeds and inbox recently. Whether it be line height/leading, smart quotes or even double spacing.

It’s 2019, how are these things still happening? I have often seen huge billboard’s with an inch mark instead of an apostrophe. This is has been a bug bear of mine for years. But, amazingly, it still happens.

Vertigo
Call it what you want, Line height, Leading – it’s all about vertical distance between lines of text. However you display it on screen or on paper.

I was doing some research for a project and ended up on a Surface Design site. When I came across this banner I let out a little sigh. All of the work featured was stunning. Beautiful patterns and crafted creations that had clearly been created with love and care.

In my opinion, this little banner let it down. It’s nearly there, it’s pretty enough, it’s just the execution that falls short.

Surface Pattern Banner Image before

The headline font used has too much leading in comparison with the cap height.

Surface Pattern Banner Image after
Surface Pattern Banner Image before

Move the slider to see some subtle adjustments that feel a little more balanced.

Now you may be thinking that I’m nit-picking here. Or, thinking that these old skool typography moans don’t have place in todays digital world. Well, for me it is a simple question of ratios. We all use grids in our pages on screen and on paper to keep our pages balanced and weighted correctly. Photographers will use the rule of thirds to frame their photographs.

Typography shouldn’t be any different. When you look at it in its simplest form by reducing the text and the space between them to blocks, they look like this. 

Pattern Design diagram

The gap between the two lines of the headline is almost the same as the cap height of the text.

You can see that the distance between the two lines is almost the same as the cap height of the text. It almost looks like two separate statements. We need hold the users hand the whole way through their journey on our pages. In this instance, we are asking them the click and engage further. It needs to be bulletproof or we risk drop off.

launch a startup screengrab

Take a look at this headline on a design blog. The line height looks great, nicely balanced

launch a startup screengrab - lower page

But when you click through to read the article the line is just a little too open on the headlines and makes for an uncomfortable read.

Software
When it comes to vertical spacing of text, the tools that we, as designers use every day default to a set percentage. This is so we can change the text size to fit our page and the leading or line height will scale with it. This is fine when you are working out your page hierarchy, elements and sizes etc. But, once you start to craft the page, don’t be tempted to stay with the out of the box settings.

Try and avoid ‘out of the box’ settings when it comes to leading and line height.

Double or nothing
My daughter wanted to learn Chess recently, so we downloaded an app. The lessons were great and the content well thought out and presented. She got her head around the basics quite quickly (proud dad moment).

But then I noticed that the body copy had double spaces after every full stop. Not just one stray mistake but every single one. Such a shame, someone had spent a long time planning out all of this content and writing in depth copy, a designer had laid it all out and it was let down at he build stage. Somehow, the sign-off procedure had failed. A potential number of people had missed this.

Chess App screengrab

Double spaces haven’t been needed in typing or typesetting for decades.

“Well, nobody really actually cares about all this stuff do they?”

Yes, you do
You have honed and crafted your work, spent time and effort on it, don’t let inconsistencies or errors at the build or artwork stage let it down.

If you want to set yourself apart from the other guys, make sure that you keep your attention to detail radar on all of the time. Your work deserves it – and will thank you for it, so will you clients, by coming back and giving you more work.

So, that is quite enough of me yabbering on. If anyone finds any mistakes on this page, please let me know so I can correct it – I’m not sure I could handle the embarrassment 🙂

4 Responses

  1. I have read several excellent stuff here. Definitely price bookmarking for revisiting. I wonder how so much attempt you place to make such a excellent informative web site. Adi Tomlin McClelland

  2. Its such as you read my thoughts! You appear to know so much approximately this, such as you wrote the e book in it or something. I feel that you just could do with a few percent to power the message home a little bit, but other than that, that is wonderful blog. A fantastic read. Ill certainly be back. Doti Prentice Kilk

Leave a Reply

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