Skip to main content

Design Typography

Typography

By Justin Spencer

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 brand’s style, personality and tone of voice.

The typography system

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.

The brand font

The brand font is a crucial part of the digital brand. Correct use of the brand font provides invaluable brand recognition, consistency and authenticity. Incorrect use of the brand font has the opposite effect.

To differentiate themselves brands typically choose (or create) unique typefaces. These are generally display faces, used for headlines and marketing messages etc. They may also include multiple weights like bold, regular, light etc. We can not guarantee that brand fonts are installed on every users system. To get around this we provide a web version of the typeface. This is known as a web-font.

The body font

The body font is the companion to the brand font and used for all UI elements and body text. This typeface has to be extremely flexible and functional. As a result we encourage brands to use system fonts rather than bespoke web-fonts for the body. There are several key reasons we use system fonts for body text and UI elements:

  • Page weight and download speeds: Similar to images, web-fonts have to be downloaded. When it comes to online banking every byte counts. Using a system font boosts performance because the browser doesn't have to download any font files.
  • Multi-lingual applications: Our sites and applications are often multi-lingual and include double-byte character sets (Chinese, Japanese, Korean etc). These fonts use thousands of glyphs which creates huge font files. Using system fonts we have automatic access to these character sets when switching languages.
  • Leveraging the smarts: Modern system fonts are specifically designed and created to aid legibility on screen. The geometry, hinting and logic that goes into each glyph works in conjunction with the operating system to ensure that the user always has an optimal reading experience.

The font stack

To implement fonts in our web sites and applications we use two CSS font stacks. One for the brand font and one for the body font. Put simply the font stack is a list of typefaces. When users view a website or application their device goes through the list and selects the corresponding font.

The brand font stack is based on a hierarchical list with the web-font being the first entry in the list. All other fonts are simply backup system fonts in-case for some reason the web-font is not available.

The body font stack is a list of system fonts for each operating system. When users view a website or application their device goes through this list and selects the corresponding system font.

Font weights

Font weights allow us to add more visual appeal and hierarchy to our designs. Designers can use the available weights as they see fit however they must consider the brands design direction and guidelines. As we use the font stack to establish the correct typeface developers must always use 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 device is using (providing this weight is available). Unavailable weights display the logically closest weight. Font weights should always be used in alignment with the Design System and the digital brand guidelines.

Type scale

Our typographic scale has a limited set of sizes that work together to help maintain a consistent scale and rhythm across all digital touch-points. Designers can use these sizes as they see fit however they must consider the brands design direction and guidelines. We also have a few practical rules around the use of type sizes.

  • Line height: As a rule of thumb we generally use a proportional line height of 1.2 for headings and 1.4 for body text.
  • Responsive text: When reducing the size of headings for use in smaller breakpoints we typically use increments of 6px. For example a heading size of 36px in the sm breakpoint can be reduced to 30px in xs. This simple rule generally works well.

We’re hoping to establish a more robust system of spacing for our Typography system however this is easier said than done due to the volume and variation of our digital products and services. We’re also aware that good typography is a craft not an exact science. Baseline grids, tracking, kerning, leading etc are all features used by designers to massage letters and words into visually appealing shapes. With this in mind we are reluctant to apply too many rules to the type system opting instead to let designers work their magic armed with their knowledge, experience and of course the brand guidelines.

Web-fonts

What is a web font?

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.

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 Design System.

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 is better suited to content management systems and personalisation.

Web-font myths

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.

  • Web-font technology @fontface is not cutting edge. It’s been available for over 10 years. Internet Explorer 6 supports web fonts.
  • Web-fonts 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.
  • Web-fonts 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.

Distributing web fonts

Due to licensing restrictions we are unable to publicly distribute web fonts and desktop fonts. The EULA only allows us to use web-fonts on specific domains and sub domains eg. westpac.com.au

To access the web fonts for each of our brands you first need to go to the Blender.

At the bottom of this page there are instructions on how to get the web fonts. For those who work at Westpac we provide an internal link to the font files. Simply follow the download link in your blend’s index page.

If you don’t have access to confluence you can always get your manager to go to the blender and download the fonts for you however please be aware of the licence agreement.