As you may well know, our office is based in Truro. Very centrally so, meaning we regularly embark upon adventures into the town centre. As “true creatives” we can’t help but notice and analyse the visuals that surround us; everything from appreciating a crafty poster advertising an exciting event to pulling our hair out seeing how the kerning of a shop front has been so badly handled.
It dawns on us that most people do not know the fundamentals of typography, even to the point that I have to describe typography as “fonts” to most people. A font is merely the letters, numbers and symbols that belong to family. Typefaces are how these fonts are presented/designed; simply using a colour turns a font into a typeface. Typography is therefore how these fonts are used to convey a message. There are many devices used with fonts that create decoration, such as drop-shadows, stroke colours and gradients, even using more than one font is creating a typographic arrangement. There are also many technical aspects of typefaces too, like kerning, leading, ligatures and measure length, which we explain throughout this post.
As so many people opt for using a typographic logo design, known as a logotype (not “logofont”), it is worth discussing what others have done and what implications it has for your own company. People seem to think that typography is easy to get right, but they are usually careless and lack an eye for attention. Think of it this way, how easy is it to ruin a white shirt? So, we are going to be showing some real life examples of typographic works in Truro and analyse them, because you shouldn’t ever copy what works for other people, it’s actually illegal to do so now.
It might be worth starting with the first image I took the day I decided to write this blog, and that is one carved into the side of a car park.
This particular example is a tad odd, I see this structure fairly often but only on this occasion did I register the typography in use. It’s very natural, in the way that it isn’t painted or brought out. The only way this is legible is by the carving out of the space around the characters, giving it depth and actual drop shadowing. Interestingly the fact that the phrase is repeated so often makes it appear to be more of a pattern, or piece of decoration, rather than a message. If, for instance, it were simply one instance of the phrase placed directly central, it would be more visible, as it would conflict with the surrounding space. This is how complimentary colours work. The extremely tight kerning, which is the spacing between individual characters, makes the letters flow into each other, which would have saved a quantity of time on the carving. A tip for getting conventionally correct kerning is by slightly blurring your eyes whilst looking at a word. If the blur of a letter extends to far into the surrounding ones, it is to close. If it doesn’t reach them, then it is too lose. But that’s only if you are going for something standard, unlike:
Mounts Bay have very, very loose kerning on their signage here, to the point that it is longer than the car! Long signage is difficult to read, because you have to stand at some distance away to take it all in, good logotypes will present all the available information in a glance, this example requires you to scan your head across to read it. Most will mistake this for being attention grabbing, but let me be clear, it isn’t, it’s annoying. The use of space in a typographic mark is SO important to get right, take this for example:
UCoB have been leaders in using design to deliver a strong message, back years ago they were using campaigns to fight against racism, but more on this later. The green frame here is the element the typography exists in. As a general rule of thumb, the size of a typeface shouldn’t occupy more than 90% of the element it resides in. If the typeface were edge to edge, it would look very tacky, but also very hard to read. This is because our eyes focus on the element and then we absorb the information within it, if the typeface is too big, we can’t properly decipher it, becoming uncomfortable to read. You can change the shape of an element to manipulate how the viewer engages it, but again, we’ll save that for another time.
UCoB are an example of a first glance logo, much like:
In web design terms, we call the spacing within an element the “padding”. More padding means more space, more space means easier visual direction. But this should only be done with deliberately larger objects, like titles, as opposed to descriptive text, as it’s much harder to create a comfortable flow.
Notably, these last three examples here have a central alignment. As I was just talking about comfortable flow, larger blocks of text need what we call a “return point” This is where the viewer repositions their eyes to when starting a new line of text. Most short blocks of typography will be centred, which is fine, but don’t make everything so; else it becomes uncomfortable to read.
An offender of these last few principles is this company’s poster. Not to mention the lack of contrast, which is what helps reveal the shapes that form letters (and why so many people opt for black and white signs). I can’t also understand for the life of me why they have repeated their logo 3 times in vertical succession; it looks desperate to be honest. This work is visually undisciplined and follows no rules, which aren’t used to govern how work should look but, instead, make you consider best practices for legibility and information handling. They also have a modified typeface, which I’m sure is supposed to be a play on the heating elements, but again the rest of the typeface doesn’t follow the same structure.
The font choice is often something people get very bogged down with, it happens to designers a lot too. Typefaces were once described to me as “the clothes that words wear” which is nice, because they way people dress usually represents them in terms of character (hence why UCoB were so hot on their campaigns for equality). So a typeface needs to represent your brand ethos, and not just what looks pretty.
Fired Earth aren’t a bad example of that, the decorative “flicks” that protrude from the letters make this a “serif-typeface”. As a serif-typeface is traditionally decorative, it makes sense that a company producing home furnishings would use this. Difference being that the font-weight, or how thick it is, is quite heavy, giving the impression of sturdiness, but still modern with the element shape, alignment and supporting colour.
Another serif typeface here from River Island and Joules, in a clothing context this would give the impression of very traditional, even vintage, fashion. Funnily enough, RI is a very contemporary clothing company, whilst Joules is what I would describe as “old high-fashion”. So don’t let the choice of typeface category alone define your brand. It’s not just serif or sans-serif fonts.
You only have to look here to see why that’s a bad idea. The choice here doesn’t work within the element it’s placed in, the typeface is too wide, accentuated by it being italicized, and to be honest I’ve always thought script typefaces like this look tacky as hell. The “freehold for sale” text is very tall; we call this a large “x-height” which defines the vertical length of a character. This directly contrasts with the store sign having quite the small x-height. Maybe the lack of a quality sign had an effect on the number of visitors to the store? I would argue so.
Another example of a script typeface here, it may have worked if the colours weren’t so clinical. Tone obviously has a huge impact on the way we emotionally engage with design, confuse this with a conflicting typeface choice and people don’t know what to think about you, it merely becomes a sign that “says what it is”, great, that’s engaging isn’t it?
I’m usually not a big fan of design like this, as it feels somewhat effortless. The difference here is that the design is conflicting with its own iconographic logo, the ‘3’, moving onto literally spelling it out. This change interests me and would imply something about them has changed, but is it for the better? Can we tell this from such a strange turn of direction?
RCM, just look how different it is in the image compared to being written in this paragraph, sometimes it’s favourable to use lower case as it can be unthreatening. They use a typeface with rounded edges here, works nicely to suggest creativity but I would avoid using it as body text, unless you use a thin-weight version because it conflicts with how we use letter shapes to quickly read information. It is also very easy for this too look immature; so use a round-edged typeface with taste.
Both shops here have a summery seasonality to them, much more with the surf shop. They have used decorative typefaces here but each strikes it’s own tone, very strong example of how design can create market segmentation. Annoyingly the Mistral shop doesn’t follow it’s own typeface rules, what with the line coming out from the ‘L’, making it look more like a ‘T’, bad practice.
Speaking of bad practice, one of my pet design peeves is the use of too many typefaces; here we are victim to 4 in use at the same time. I mean honestly, does this make you think of a high-quality vintage cafe that uses beautifully crafted crockery in a pre-war, English setting? Not really. Typefaces are how we keep consistency in the written information we display, every single font has it’s own feel to it; too many feels equal confusion and just becomes another sign. Fortunately for these guys the typefaces in play go better together than most, it almost looks like you could forgive it, almost.
Now this example I find interesting. The type on the window frame is one that has become a very English font, the bridge between modernity and traditional English heritage. Compare that to the sign on the left written in something like Impact, which just screams hooliganism. They don’t really work together do they? Obviously one is temporary and maybe they are trying to attract a different clientele with it, but then again, they might not of thought of that, “cause it’s just a sign, doesn’t really matter.” Right?
I have to protest here too, I really don’t like it when companies do this, because this just looks like two different stores! Annoyingly for me it is fairly obvious that the sign on the left came after the black one on the right, which I might add extends right around the entire building, this sign is far superior to that on the left, because it has character. So why, when something has character do you feel the need to plonk a horrible sun-bleached blue sign on top of it? Sometimes people don’t know that something is good for them until they’ve got rid of it, but if you’re trying to use both at the same time, old and new? Well put that notion into a dating context and see what you come out with. Disaster.
Speaking of character, The Jean Store is literally round the corner from our office, we see it all time. It, for some reason unknown to us, it’s quite the landmark in Truro. It does have a vintage look to its signage, speaks of old craftsmanship, so it deserves the title really. Sadly though, the red sign on the door is totally mismatched, not just in terms of colour, but also in quality, somewhat removing of the reputation that precedes it. Having a consistent typographic would allow TJS to use this crafty signage in a print and digital context, but not being aware of the impact the signage has, they don’t really realize how important it is to keep right.
Keeping it right, not easy is it? Not only are the colours horribly contrasting here, but so are the fonts used. I mean, urgh, it’s really awful to even look at, it hurts your eyes. Why did they feel the need to repeat the name of the place three times in the same space in 3 different styles? The confliction is just beyond any rational explanation, almost like 3 different companies were hired at the same time to make signs and the owner couldn’t decide which to put up, so they put them all up. I claim this to be the worst typographic offender in Truro, perhaps in Cornwall.
Speaking of offenders, the Juice Bar is the example we will use to start discussing typographic styling. Obviously suggesting this has style is a bit of a stretch, but if you were to apply such an effect in a program like Photoshop or Illustrator you would use the styles panel. So for this example they have used a stroke, which is when you add an outer membrane to the text, of variable thickness, that is usually a different colour. This helps with lifting a colour off of a background, often seen with black strokes on white text, especially on “memes”. Doesn’t seem to be working out too well here, the choice of colour is unruly and undisciplined, this could have been made to work, but without the knowledge of palettes and such... but I’m talking more about colour than I am about typography here, so next effect please:
Green, blue and yellow wow! Ok not talking about colour again, this effect is known as a “drop-shadow”. It effectively (pardon the pun) duplicates the text and places a copy underneath it and displaces it slightly, which is again variable. The drop shadowing was originally intended to mimic the natural shadowing of objects in 3 dimensional space, which is visually quite stunning when done well, and processed that into a 2D format, which is not so nice. Drop-shadowing usually has some form of transparency to it, instead of being opaque, like the above example. This is also coloured too, a very unnatural green, instead of a shadow tone, usually black. The person making the sign wanted to make it eye-catching, and instead made it something you want to turn away from instantly, attention is a fickle thing and you cannot demand it from people, not like this anyway. You can make it alluring though (more on this in another post).
I suppose I can’t escape the fact that most of these effects include some form of colouring. Most of the colours I’ve used are quite chaotic; so to show you an example of where it can go wrong with fairly basic colours and to cover another effect, let’s talk about this dam van.
I mean, please don’t pretend this looks good, you can’t even read anything here, and especially not without straining your eyes, which is precisely not what you should have to do on a moving vehicle. The example shown here could only be saved by using colour funnily enough, don’t overlay similar colours, in fact don’t overlay anything, unless you’re a professional, and even then. Gradients are supposed to give a sense of texture. When you look at real life colour it rarely is one particular colour as the surround light modifies it. If you cast your mind back the days of word art, you might remember how crazy the gradients were that they used. This isn’t good practice when using gradients, and I think the point with showing all of these effects is that people tend to over-do them, effects used subtly are best, as per the original intention.
Last one from me now, embossing and bevelling, where this one is embossed. Now talking about original intention, this one is actually embossed; it’s not an effect and therefore doesn’t look tacky. See what I’m getting at? This example is the best decorative example I could find, not the best as the “measure”, that being the line width, is too long, but the one that has the greatest sense of craft to it, it just wouldn’t work as a logo. The difference to a lot of the other examples is that this constitutes as “lettering” because it is hand rendered as opposed to digital or print. Lettering has a knack for looking good but inconsistent if, like me, you have a keen eye for detail. I wouldn’t recommend all try this approach, but it’s a nice alternative if you’re feeling “au naturel”.
So, here’s to hoping you know a little bit more about typography just by looking at some local examples and that you have a better appreciation of the craft. It is important to reiterate that typography is a huge element of design; it’s the thing we tend not to talk about much with the outside world because it’s so technical, if you catch my drift. As design plays such an important role in adding value to your brand and positioning it to the right people, you need to make sure your typography is playing ball, dismissing it will only cause trouble. You have no excuse to play ignorant now and suggest that it “says what it needs to say” when it clear means so much more than just words.Disqus