Typography - The Art of Writing

I wanted to explore the many ways typography is used and the intricacies within it. Why it is able to build brand recognition? Why is there a hierarchy within typography and what does that actually mean?

The best place to start was to look for the definition of the word “typography” itself. In basic terms, “typography is the art of arranging letters and text in a way that makes the copy legible, clear, and visually appealing to the reader.” (Hannah, J. 2020)[1]

Knowing this, it’s easy to say that typography is any writing, which isn’t incorrect, in fact, what you’re reading now is a form of typography. However, there’s also a lot more to it than just being text on a page. Good typography should set the overall tone of a text/product, it should have a strong visual hierarchy guiding the user and optimising readability, but why is good typography even important?

Typography can build brand recognition, influence decision making, and good typography can be the difference between holding the users’ attention and not.

If as a brand you stick to a specific style of typography, those who venture to your website, or product, will begin to recognise your brand - Coco-Cola is a good example of this, the bright red background and stark white text in the lettering style “known as Spencerian script.” (Font Meme. Undated)[2]

When it comes to influencing the decisions of your users, you’ll want to use fonts that reinforces the message of the text and is eye-catching. For example, if the text was about donating money to animal shelters you wouldn’t want to use a font like Dark Room by imagex[4] as it doesn’t evoke the loving or friendly emotion you’d expect, and instead looks more akin to a ransom note. Compare this to some of the typography work used on the RSPCA website on their “get involved” page[5] and you can clearly see the difference. The hand-written font gives it that friendly-note feeling, with the heart above the “i” only adding to that feeling.

As for keeping the users’ attention, there are many things that will help to do this. Things like the amount of white space, colour, alignment, and contrast in combination will decide whether a user stays, for example, on a website, for minutes or hours.

I’ve already mentioned a few, but there are many elements to typography that altogether if done correctly, will create stunning typography that will allow you to build up that brand recognition and keep the users’ attention.

One of the first things that come to mind when thinking about typography are typefaces and fonts, they are able to drastically change the appearance and feeling that a website or product has. No matter what font you end up using it’s extremely important that it’s clear and readable; if the font lacks readability then it’s highly likely that a user will tire of attempting to understand it. In addition, a typeface can hold certain connotations, this too is important to keep in mind. As an example, here are two typefaces:

Neither of these typefaces have readability issues, however, they do exhibit different connotations. The first typeface is Arial, a well-known and regularly used typeface for general computer-based writing. The second typeface is Comic Sans MS, again, this is also a well-known font, however, it’s known as a “meme typeface” due to the overuse of the typeface especially in professional settings despite its childish appearance[6]. Furthermore, since the release of the game Undertale[8], the typeface has only become more of meme due to the character Sans from the aforementioned game having been named and personified after the font.

White-space, alignment, and contrast are all elements of typography that can help to create a readable piece of text.

White-space, also known as negative space “is the space around the text or graphics.” (Hannah, J. 2020)[1]. White-space is something that can be easily taken for granted, but proper use of it will help to ensure that the space doesn’t feel cluttered and unreadable. White-space doesn’t necessarily just mean the space around a block of text, it includes the spacing between the individual words and even letters. Here are a few examples:

All the above examples show just how the white-space and letter spacing of a piece of text can drastically change how easily it can be read. The thing to keep in mind with white-space though is that while too little of it can make a page appear cluttered, too much can make it feel empty. Similarly with letter-spacing, too little can make multiple words look like one making it extremelyhardtoread (*extremely hard to read) and too much can make a sentence feel like it isn’t one (*feel like it isn’t one).

For white-space and letter-spacing, there isn’t exactly a sweet spot, but more so a sweet gradient, which is somewhat displayed in the above example by The Business Fairy[6]. To the side, I’ve highlighted the ones I believe are in this sweet gradient, however, like in most artistic areas, these soft rules can be broken due to artistic liberty, but to break them you should know them first so that they can be broken effectively.

Colour is another big element to typography, it can help graphics stand out and help to build a recognisable brand. Similar to typefaces and fonts, colour shouldn’t be used randomly as they have connotations, even different the shades of a colour can mean something different to another shade of the same colour. For example, according to Color Wheel Pro[10], a “dull (dingy) yellow represents caution, decay, sickness, and jealousy” but a “light yellow is associated with intellect, freshness, and joy” – it’s important to keep these connotations in mind when choosing colours for your typography.

Furthermore, you will also want to keep in mind how the colour you want to use compliments the already existing branding. This doesn’t mean only using shades from the brand’s colours, in fact, it’s best to avoid using shades too similar to the branding as that can be off-putting for a user and they might believe that the brand doesn’t have a clear representation of itself – not a good thing.

Of all the things I’ve mentioned about colour, the most important thing is for it to be readable – if the user can’t read it, you’ve wasted time even implementing it. “Colour has three key components: value, hue, and saturation. A good designer will know how to balance these three components to make the text both eye-catching and clearly legible… Often designers will test this by viewing the text in greyscale.” (Hannah, J. 2020)[1]

Above I’ve created three examples to show this greyscale test. To create the greyscale here I used Adobe Photoshop and the adjustment “black & white” at its default setting. It’s clear here that the light green on dark green is the easiest to read despite the fact they are similar in colour; this is because the value, hue, and saturation are different enough. In comparison, the orange on red, and the orange on yellow only have a difference in hue.

All in all, you want to make sure that the colours are being used for a reason and aren’t just randomly being thrown together.

Hierarchy is yet another element of typography and is probably most notable in newspapers with their clear primary heading, secondary heading, tertiary heading, and then the body text.

Being able to establish a clear hierarchy is a vital principle of typography. “[It’s] important as it helps organise and rank the information presented.” (Newspaper Toolbox. 2017)[6] There are many ways to do this, the simplest is with font sizes – the bigger the font the more important the text is – another can be using font size, bold, and italics. Colour and underlining words can also help to put emphasis on those words – something that should be used sparingly for effect. Examples below:

Italics can also be used to add emphasis, but can also be used as a way to add more information to a title, similar to how you might use brackets in writing.

­

If you’re creating an advert “hierarchy helps the advert stay easily noticeable allowing readers to take in the information for the advert quickly.” (The Business Fairy. Undated)[9] An example of this is an advert used by Coca-Cola, in which they also mixed fonts which also helps the message be more legible:

This is the same when using hierarchy is any case as it can allow users to skip to the information they were looking for without needing to read through everything.

If you want to build up brand recognition then the most important thing about typography is keeping it consistent. The typeface, colour scheme and hierarchy should stay consistent throughout a brand and shouldn’t change unless a rebrand is happening. This way you can ensure that the users will recognise your brand and keep coming back.

Typography is like body language, it’s not something that users will consciously pay attention to, but subconsciously it can feel like something is off if done incorrectly with no thought behind it. Therefore, it’s important to treat typography like a realistic painted portrait – a thought in every stroke – as opposed to abstract blobs.

---

Bibliography

[1] Hannah, J. (2020). What Is Typography, And Why Is It Important? A Beginner’s Guide. [blog] Career Foundry Blog. Available at: https://careerfoundry.com/en/blog/ui-design/beginners-guide-to-typography [Accessed 24 September 2020]

[2] Font Meme. (Undated). Coca-Cola Font. [online] Font Meme. Available at: https://fontmeme.com/coca-cola-font/ [Accessed 25 September 2020].

[3] The Coca-Cola Company. (1886). Coca-Cola. [drink].

[4] imagex. (2011). Dark Room. [online] Dafont.com. Available at: https://www.dafont.com/dark-room.font [Accessed 25 September 2020].

[5] RSPCA. (Undated). Get Involved. [online] Available at: https://www.rspca.org.uk/getinvolved [Accessed 25 September 2020].

[6] Newspaper Toolbox. (2017). How typography affects advertising. [blog] Newspaper Sales Blog. Available at: https://newspapersalesblog.wordpress.com/2017/08/17/how-typography-affects-advertising/ [Accessed 24 September 2020]

[7] Ogreenworld, Andcallmeshirley. (2012). Comic Sans. [online] Know Your Meme. Available at: https://knowyourmeme.com/memes/comic-sans [Accessed 26 September 2020]

[8] Fox, T. (2015). Undertale. [digital download/disc] PC, Nintendo Switch, PS4, PS Vita. Place of Publication Unknown: Toby Fox. Available at: https://undertale.com/ [Accessed 25 September 2020]

[9] The Business Fairy. (Undated). Importance of Typography in Advertising. [blog] The Business Fairy. Available at: https://thebusinessfairy.ie/importance-of-typography-in-advertising/ [Accessed 24 September 2020]

[10] Color Wheel Pro. (Undated). Colour Meaning. [website] Color Wheel Pro. Available at: http://www.color-wheel-pro.com/color-meaning.html [Accessed 26 September 2020]