A Comprehensive Guide to Typography

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.

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.

A handful of typefaces renowned 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.

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.

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.

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.

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.

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.

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.

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.

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.

Custom type for niix fitness, to uphold their mission to be cutting edge yet human and accessible.
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.

A selection of free display fonts. RusticoHamurzApex and Stanley.

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

    More Insights

    We have over 12 years experience in the industry and work with clients from a wide range of sectors across the UK and Europe. Our diverse portfolio includes automotive, leisure and hospitality, FMCG, manufacturing, finalcial service and more.

    Let’s talk about the challenges in the travel, leisure and tourism industry
    We help our clients by taking the time to really understand their sector. By attending...
    Insight
    The Benefits of Shopify
    What is Shopify? Before we begin, let’s give you a quick summary of Shopify itself....
    Insight, Uncategorized
    Email vs Push Notifications vs In-App Messaging: Which has the highest engagement?
    Email marketing is a controversial subject here at Reckless. Some people say it’s spam and...
    Insight