There’s no disputing the power of typography. It has a huge influence on brand perception and recognition. Good typography not only differentiates a brand but also communicates the brands style, personality and tone of voice.
By Justin Spencer
The typography system
The GUI Framework uses a typography system which allows us to implement brand specific fonts in a multi-brand framework.
How it works
The typography system allows each brand to designate two typefaces: A display font for headings etc. and a body font for editorial and UI elements. Similar to the colour system a reference (variable) is created for each font, brand and body. By using this reference rather than the physical name of the font we can quickly and efficiently implement brand specific typography across multiple applications and brands. Being an automated system this also removes the margin for error.
If a license to use the brand fonts online (as web fonts) is not purchased the typography system will implement suitable alternatives based on the best available system fonts. Fonts used in modern operating systems are specifically designed for legibility on screen, come in a variety of weights and have been optimised for use in their respective operating environment. Although this approach lacks brand consistency it does ensure optimal legibility and typographic scope where older system fonts like Arial and Times do not.
Font weights allow us to add more visual appeal and hierarchy to our designs. The typography system uses numerical values to assign different font weights rather than specifying the physical name or weight of the font. For example, assigning a value of 300 to the font weight property will display the light version of whatever typeface the brand is using (providing this weight is available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the GUIs and the digital brand guidelines.
Using too many type sizes and styles at once can destroy a layout. Our typographic scale has a limited set of type sizes that work together and help maintain a consistent type scale across all digital touch-points. The styles are based on a typographic scale of: 14, 16, 18, 24, 30, 36, 42. Designers can use these sizes as they see fit however there are a few practical rules around the use of type sizes.
- Body or paragraph text should never go below 14px. This is an accessibility requirement.
- Never use the light (300) on text that is 16px and below. On some screens anti-aliasing will cause the text to fall out of an accessible contrast range.
- All essential text must be AA accessible.
- Don’t add more type sizes.
- When designing responsive applications heading sizes may need to be reduced at the extra small breakpoint (phone). In this situation we recommend going one size down. For example if your heading is 30 on large views a reduction to 24 on extra small works well.
Designing layouts in a responsive environment is tricky. Maintaining optimal line lengths across all breakpoints is almost impossible. However we should still keep in mind these basic readability principles from the Baymard Institute.
- You should have around 60–70 characters per line to achieve a good reading experience.
- If a line of text is too long, the user’s eye will have a hard time focusing on the text. It’s difficult to get an idea of where the line starts and ends. It can also be difficult to continue from the correct line in large blocks of text.
- If a line of text is too short, the eye will have to travel back too often, breaking the reader’s rhythm. Short lines also encourage people to skim read skipping to the next line before finishing the current one and potentially missing important information.
For more information on how to use the typography system see the GUI Framework.
Commit to quality
In spite of its importance, typography on the web is often overlooked. Many choose to ignore it and settle for old techniques and common system fonts like Times and Arial. This is largely due to technical requirements and font licensing costs.
Given the ever increasing number of online customers our brands must be presented as intended regardless of channel — this is how we build brand familiarity. Typography plays a critical role in brand recognition.
A web font is a specially crafted typeface, designed for use on screen as well as in print. Many common typefaces are now available as web fonts. Some are better than others and it’s important to understand why.
There are two key requirements for a good quality web font. Geometry and hinting.
Geometry is the physical shape of each glyph (character). Typically fonts with higher x heights display better and are more legible at small sizes. This is crucial given the ever increasing pixel density of modern screen resolutions.
Hinting is the process of applying mathematical instructions to each character in a typeface to adjust the display of its outline so that it lines up with a rasterized grid. At low screen resolutions, hinting is critical for producing clear, legible text on all devices.
As mentioned, some typefaces simply don’t lend themselves to screen legibility, others are badly crafted and render poorly on all but the highest definition screens. Brand agencies should collaborate with the GEL team to ensure that web fonts are of a sufficient quality for use on all supported operating systems and screen resolutions. This involves testing all UI components across multiple devices, operating systems and platforms before implementing the web font in the GUI Framework.
Why use web fonts?
More and more brands are abandoning substitute system fonts and using web fonts to provide a consistent brand experience across all touch points. There are no technical restrictions, browser or platform issues when using web fonts.
Apart from increasing brand consistency other benefits of implementing web fonts include:
- Removes the need for image substitutes and makes every piece of text on the page html. This reduces page weight, increasing download speeds.
- Fewer images means less http requests, decreasing the load on the server and speeding up load times.
- html text makes the site more accessible to screen readers.
- html text increases SEO.
- html text makes the site more adminable via content management systems.
There are some misconceptions regarding web font technology. The fact is web fonts are not going away. Brand consistency and good typography on the web are now mandatory. We can not achieve this using old techniques and poor cousin substitutes like Times and Arial.
- Webfont technology @fontface is not cutting edge. It’s been available for over 10 years. Internet Explorer 6 supports web fonts.
- Webfonts are supplied as a package containing various formats of the same font (.ttf .eot .woff etc.). This is to accommodate the different browsers. The browser only downloads the format it requires. For example Chrome only downloads the .woff format.
- The .woff format alone is now supported by 85% of browsers.
- The browser only downloads the web font if it finds text on the page that requires that font.
- In the unlikely event that a web font is not downloaded the browser will simply fall back to system fonts. Nothing breaks.
- Webfonts are downloaded once then cached.
- We are hosting the fonts, there is no reliance on 3rd party providers.
- Including the @font-face block does not initiate a download of the remote font file from the server (except in IE8).
- There are no technical restrictions, browser or platform issues when using web fonts.
Licensing web fonts
Licensing a web font for use in apps or websites is not the same as licensing a font for use on a desktop computer. Typefaces are owned by type foundries. Each foundry’s web licensing requirements and payment models differ, however all foundries are prepared to negotiate.
IMPORTANT: Never use a web font without confirmation that you have the correct licence agreement in place.
Good quality fonts cost. Designing a quality typeface can take months, sometimes years. Often a collaboration between designers and typographers, each glyph is carefully crafted to create a set of letter forms that when put together display beautifully proportioned words, sentences and paragraphs for us to communicate our message. Typography is one of the oldest trades in history. How wonderful we have the opportunity to apply it to the fastest moving technology in history.