Typography in a multi-channel age — how to make the right choices for your brand
Sunday, 07 March 2021
“Letters,” said the typographer Eric Gill, “are things, not pictures of things.” Gill was making the point that letterforms, unlike pictures or sculptures, are not representations of something else. They are things in their own right — and any beauty they have is their own rather than a reflection of something else.
This is as true today as it was in the 1930s. But the truth is less immediate now. In Gill’s time, type really was a physical thing: each letter a piece of cast-metal for a compositor to arrange in a type galley. The weight of the type could even be used to produce an embossed shape on the printed page. This physicality — along with the high-resolutions and large media sizes possible in print — informed the design of many of the typefaces we use today.
For the contemporary typographer and brand designers, this raises some interesting challenges. When creating or refreshing your company’s visual identity, your designer is faced with the difficulty of choosing a set of typefaces that work well together, accurately reflect the personality and values of your brand, and which will display well on anything from a 5-inch smartphone screen to 300m2 outdoor advertising screens.
So what rules or guidelines can you follow to choose the right typefaces for your brand? To answer this question, it helps to understand how a typeface is designed and how it works as — in Gill’s terms — a physical thing.
The anatomy of a typeface
All typefaces share certain design features in common. At the most basic, all Western typefaces are made up of a set of characters based on the Latin alphabet and standard typographical marks. The outline of each letter is referred to as that letter’s ‘stroke’. Some fonts are decorated with small flourishes at the end of strokes. These are called ‘serif’ fonts. Fonts without flourishes are called ‘sans serif’ fonts.
In the diagram below, you can see some of the most important parts of a font’s anatomy. It’s useful to have at least some understanding of this, because it can have a big impact on how well a font works in a given media. In some early sans serif fonts, for instance, there’s little visual difference between a lower-case ‘l’, an upper-case ‘i’ and a number ‘1’. On a printed page, with a high resolution and plenty of space for context, this isn’t a problem. On a mobile screen, it can lead to poor legibility. Similarly, in some serif fonts the cross strokes of two letters may appear to meet, creating an unintended ligature (the joining of two letters) and subsequent legibility problems.
Baseline: an imaginary line on which the letters ‘sit’. Only descenders sit below the baseline.
Median: also referred to as the x height, usually the height of a lower case ‘x’. Used to define the height of many lower-case letters and of elements such as the bowls of the letters ‘d’ and ‘b’.
Stroke: the line defining the basic shape of the letterform.
Arm: short strokes branching off the main stem of the letterform. Think of capital letters ‘E’ or ‘F’.
Bowl: the rounded form found on letters such as ‘b’, ‘d’, or ‘p’.
Descender: the part of letters such as ‘p’ or ‘y’ that sits below the baseline.
Ascender: the bit of letters such as a lowercase ‘h’ or ‘k’ that protrude above the median.
What to consider when choosing typefaces
The typefaces you choose for your brand need to be clearly legible across all media. "Brands often prioritise marketing when choosing fonts. They don't think about the whole range of uses when considering factors such as the different media their typefaces need to work in, the anticipated reading distance, and so on” explains Paul Luna, Professor of Typography at the University of Reading and co-editor of the recent book 'Information Design: Research and Practice'.
“A good brand design should consider not just the brand personality you want to convey, but the whole spectrum of media and use cases — from marketing materials through to forms, billing information, and small print. If you don't build this into the process of choosing your typeface, you'll have problems later on".
A font that works well in one medium or setting may not work at all in another. Your visual brand identity needs to accommodate all of today’s possible uses— and it needs to anticipate tomorrow’s too.
This can be tricky. Which font you choose for a given purpose depends on factors such as the anticipated resolution, reflectiveness of the medium, reading distance, the visual acuity of the intended audience, anticipated line length, and so on.
When selecting a typeface for use with continuous text, for instance, designers will usually choose a medium-weight high-contrast serif font. The serifs make it easy to distinguish one letter from another. And a medium-weight is neither too light, which can cause eye-strain, nor too heavy, which can make the letters difficult to distinguish from one another. On the other hand, when creating a poster for a billboard, a designer is more likely to choose a lighter and more widely spaced font.
That’s why, even just looking at traditional print medium, it’s important not only to factor a fully rounded understanding of your brand and your business needs — but also to work with an experienced art director or brand agency, who will guide you through the necessary choices.
When type goes digital
Until recently, the received wisdom was that sans serif fonts were always better for digital design. Serifs often simply weren’t displayed properly on lower resolution screens. Either they’d be lost entirely or the letterform would appear as blended or blurred, with the serif’s extraneous information making it more difficult for the reader to distinguish the shape of the word.
For maximum legibility, the designer should choose a sans serif font with distinct, high-contrast letter forms. By high-contrast, we don’t mean the colour — we mean the letterforms themselves — it should be easy to tell an ‘h’ from a ‘k’ and ‘e’ from a ‘c’ and so on.
Fonts with a higher x-height tend to be more legible, particularly in the constrained space of a small screen. If the x-height is too low, your text can end up looking almost runic — a series of vertical strokes.
It’s generally accepted that you’re best choosing a sans serif font of a medium weight (not too heavy, or the shape of the letters gets lost). For instance, one brand we worked with specified a font-weight of 700 points for print but only 300 for digital assets.
The digital landscape in 2017
In the past, web browsers used whatever fonts were installed on someone’s computer. This gave designers very little control. If you didn’t specify a font, then the browser built your page using that PC’s default font, which could look awful. The best you could do, was tell the browser to use one of several web-safe fonts — fonts which almost all PCs had installed and which rendered well in most browsers, for instance Arial or Helvetica.
That’s no longer the case. Your digital designers can now use the CSS @font-face declaration to tell the browsers to download and use your brand fonts. This happens, for practical purposes, instantaneously — as the page is being loaded.
This gives your designers greater control. It’s also good news for your brand, meaning you can stay on brand on the web. But it does make it all the more important that you choose fonts that will work equally well in print and on screens big and small.
The screen sizes your font will be read on vary from 5in across for an iPhone 7 right up to several meters across, for outdoor advertising. This has been roughly the same for the last few years. But while screen sizes haven’t changed screen resolutions have increased dramatically.
Manufacturers are cramming more pixels into the same space. The first iPad had a screen size of 9.7inches, just like the current 4th-generation iPad. But the original iPad has a resolution of 132 pixels-per-inch (ppi), compared to a 4th-generation iPad which has a resolution of 264ppi.
Packing twice as many pixels into the same screen-size means that your font choice for those screens doesn’t have to be as limited. For instance, it’s safer to assume that serif fonts will display correctly. But, and it’s a big but, these screen resolutions aren’t yet universal. Until they are, it’s best to carry on designing as if the limitations were still in place.
You should also continue to specify which web-safe fonts digital designers should use as their fall back. These aren’t as important as they used to be, but in some contexts they are still necessary. Email clients, for instance, don’t usually display webfonts — you’ll need to use web-safe fonts instead.
Working with experts
The best way to make the right typographical decisions for your brand is to work with brand and design experts. A good art director will understand the theory and practice of typography. He or she will be able to help you choose a selection of typefaces that fit your brand personality and will work across as wide a range of print and digital media as possible.
WLM.DIGITAL has worked with a range of brands, including household names, to help them make these decisions. If you’re working on a branding or rebranding project, and would like to talk, just drop me a line: [email protected]