What’s the most important part of a brand? It’s a tough question to answer. If you pose the question to your team you’ll no doubt get conflicting responses.

Some will say “The Logo” which is true in a sense, as it should contain a brand’s name and a quick indication of what the brand does, but could it live without it? Others might say “Brand Proposition or Core Values” which form the foundation of any successful brand and are integral to a business’ growth and connection to consumers, but what use are these values if they’re not clearly conveyed and differentiate the brand from its competitors?

So what is the most important part of a brand?

From my experience working with brands ranging from global organisations to local restaurants, a business’ message and how it articulates that message matter more to people than logos, positioning and visual aesthetics combined.

Why?

Imagery such as illustration, graphics and sometimes photography can date and deteriorate with time and therefore has to follow trends to stay relevant and competitive within its market. Words don’t date, they are timeless and when done right, they can not only lead consumers to convert but become loyal brand advocates.

Okay, but what does that have to do with typography?

Typography is the art and technique of arranging text to make it legible, readable and appealing when displayed. In other words, it’s the way in which a brand expresses its message to its target audience making sure it’s easy to read, easy to understand and coherent with its visual identity. Here’s our comprehensive guide to the elements of typography.


Legibility


How legible a typeface is refers to the design of each letter within a typeface and how clear and recognisable that letter is when part of a word. A poorly designed typeface will have inconsistencies in the design of these letters or could simply be hard to distinguish at smaller point sizes.

 

legibility-typeface-difference.png

A typeface with unclear letterforms vs a typeface with clear, well defined letterforms.

 

Making a well-designed typeface that is legible, readable and unique to other typefaces is an incredibly in-depth process and takes type designers years to produce the individual characters in every weight, italic, extended, condensed and translation available. If you’ve ever looked at an expensive font and thought “Why would I spend money on that!?” there might be more to it than just the design of it that makes it worth the investment.

 

top-typefaces.gif

A handful of typefaces reknowned for their quality and design.


Serif, Sans Serif & Slab Serif

Serif typefaces have small lines to accentuate each letter’s characteristics. Sans Serif simply means “Without Serif” and Slab Serif is similar to standard serifs but has more basic and simple lines.

 

serifs-sans-slab.png

 

Whilst Serif typefaces were originally designed to be more readable on printed materials and Sans Serif to be more legible on early-era low-resolution screens, over time, as digital resolutions improved and evolved so did the ability to render more complex typefaces. As a result, you may find brands using Serif typefaces within their digital presence today more than ever before.

 

type-rendering.png

Printed serif text and the evolution of typeface rendering on screens.

 

Contrast
Contrast is vital to good typography as it directly affects whether a reader can distinguish text from its background. It’s often the first thing people notice when checking over designs and is easy to rectify by using a block colour or adding contrasting overlays to images. Beyond simple colour changes, there are some great online tools for checking contrast and accessibility.

Colour Contrast Checker
https://webaim.org/resources/contrastchecker

Sketch plugin for accessibility
https://www.getstark.co/

 

Readability

 

How readable a typeface is refers to the use of fonts as part of a wider design. Traditionally it was a Graphic Designer’s role to work with type and design layouts and a Typesetter’s responsibility to handle the arrangement of a matrix mold or printing blocks to enable a layout to be printed.

As digital printing techniques advanced the role of a Typesetter has become mostly redundant and Graphic Designers are able to design without being restricted by certain printing methods. Despite this, the traditional techniques and methods from original typesetting set a solid foundation for arranging type in the digital age.

 

typesetter.jpg

A typesetter assembling a composing stick ready for adding to a layout.

 

Line Length
English text is read from left to right and when a reader reaches the end of a line they have to jump from one edge of the copy to the other. To improve the flow of copy on a page, the best practice line length is 10 words long. This is the optimal distance for a reader’s eyes to easily find the start of the next line. A common design tool used for managing line length is using grid systems and columned layouts…but that’s another guide for another day.

 

line-length.png

Long lines of text vs best practice line length.

 

Line Height / Leading
Leading in typography is the space between each line of text. Unlike the standard best practice for line length, for a block of copy, it changes from one typeface to the next. A useful tip is to imagine clear white lines in between each row of copy preventing descenders from one row touching the ascenders of the next.

 

leading.png

Bad leading, good leading and use imaginary white lines to guide how much leading you need.

 

Kerning
Kerning refers to the space in between letters and should be incorporated within a typeface’s design process using kerning pairs. Imagine you type the word ‘You’, does the ‘o’ fit under the right edge of the ‘Y’ or does it sit after it? If it sits underneath then the type designer will have set this using kerning pairs, where every letter has a specified position based on whichever letter sits next. Sounds complicated right? See it this way, if there are 26 letters in a font, there will be 676 pairs to create.

 

kerning.png

Incorrect vs correct kerning using kerning pairs.

 

Tracking / Letter Spacing
Tracking is very similar to Kerning and again refers to the gap in between each letter, however, the difference with Tracking is that it is applied universally without considering the visual impact. Tracking is an incredibly useful tool for designers as it allows us to make text more legible at smaller point sizes and be more impactful at larger point sizes. A useful tip is to remember to increase tracking as the text gets smaller and decrease tracking as the text gets bigger.

 

tracking.png

Decrease tracking at large point sizes and increase tracking at small point sizes.

 

Hierarchy
In order for readers to distinguish titles from body copy, text styles need to be set and stuck to throughout a design to maintain consistency of messaging. In web design, this is done through Heading Tags, making sure each size has a responsive variant. In print similar consistencies still need to be met, but typography can be experimented with on a more case by case basis.

 

1.png

Heading tags for web and a poster explaining type hierarchy.

 

Personality & Purpose

 

Once a typeface is legible and readable to users it’s time to give it some character. This is where brands can start to visually combine their message to customers in a consistent and ‘on-brand’ way. See if you can guess which brands the fonts below belong to.

 

personality-images.jpg

Custom type for niix fitness, to uphold their mission to be cutting edge yet human and accessible.

personality-images2.jpg

Stylised type for Ixplor to reflect their brand values of dependability and adventure.

 

Display Fonts
Display fonts are where designers can be creative and bring a different dynamic to a brand. They’re usually very specific and don’t contain many characters as each one is very unique. You’ll find this type of font in places where typography needs to be a highlight or a styled element within a design.

 

display-fonts.png

A selection of free display fonts. Rustico, Hamurz, Apex and Stanley.

 


Want to know more about typography and how it can enhance your brand? Or want to share a typography challenge with us?

Get in touch by emailing Tom: tom.woollam@reckless.agency

You can also connect with Tom on LinkedIn

Tom Woollam  |  UI & UX Designer