Using Fonts
Justin Spencer
Using fonts today is fairly straight forward, however there are some complexities and requirements that should be addressed before jumping in. This article explains the different types of fonts we need, where to get these fonts and how to use them in your websites and apps.
The design system uses 3 specific types of fonts (or font formats) know as; Desktop fonts, System fonts and Web fonts. Each font type serves a specific purpose.
System fonts
System fonts are part of your devices operating system. They’re pre-installed on your computer, phone, watch, fridge etc. In the early days of web, system fonts were badly designed and poorly crafted. Arial and Times were considered the default fonts for any and all web sites. In recent years System fonts have evolved into highly optimised, beautifully designed pieces of software which not only display text but also contain smarts to ensure perfect legibility based on environment and user preferences.
Desktop fonts
Desktop fonts are installed locally on your PC. When you purchase a desktop font you install it manually and it's only available to you. Desktop fonts are used predominantly in design applications such as Adobe Indesign, Photoshop, Illustrator, Sketch, Figma etc. Designers need desktop fonts in order to create mockups, layouts, presentations etc for print and web.
Web fonts
Web fonts are designed for use in websites and apps as a result they are delivered in a format specific to web. Web fonts allow companies to use their brand fonts online. Unlike desktop fonts web fonts are not installed locally on your PC or device. When visiting a website that uses web fonts, your browser will request the font file from the server, load it into temporary memory (cache) and use it to render the typography as intended. Most desktop fonts now have an accompanying web font.
Licensing fonts
Font files are classed as software, Like any other software package we have to purchase a licence to use it. Font licensing is generally looked after by type foundries. There are many different foundries all of whom use slightly different services, payment models and licence agreements however the requirements are the same:
1: You need a desktop font licence
Typically brand will engage with the type foundry and purchase an enterprise licence which covers x number of computers.
2: You need a web font licence
While purchasing a licence to use the desktop font brand will also purchase a suitable web font licence which will permit use on specific domains (e.g. westpacgroup.com.au) and in specific apps.
Important: When purchasing a web licence all brands must ensure that the licence includes the westpacgroup.com.au domain. This will ensure that the web font can be used in the design system which is hosted on the westpac group domain.
Custom made fonts
Many brands now create their own custom fonts, this not only provides more differentiation but also removes licensing costs. However, this is not a task that should be taken lightly. It can take months if not years to design and craft a typeface that will project the personality and voice of the brand, both now and into the future. A poorly designed typeface is easy to spot and could potentially damage the integrity and authenticity of the brand.
Choosing fonts for your brand
Wether you’re licensing an existing font or designing a custom font it’s important to understand two key requirements; Geometry and Hinting.
Geometry is the physical shape of each glyph (character). Typically fonts with higher x heights are more legible at small sizes. This is crucial given the ever increasing pixel density of modern screen resolutions. Fonts in the humanist family are characterised by low contrast between thin and thick strokes, loose letter spacing, and wide counters, making them more legible for small-sized text.
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 rasterised 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.
Downloading fonts
Similar to music tracks, downloading fonts is not as simple as asking a friend or colleague for a copy of their font file. Most font licences do not allow the distribution of the font files. When you send a font file to a friend or colleague you will most likely be in breach of the licence agreement. As a result we recommend the following:
For designers
As a designer at Westpac the desktop fonts you require should be pre-installed on your Mac or PC. If this is not the case please speak to your project lead who will point you in the right direction.
For developers
For those who work at Westpac we provide an internal link to the web font files in the Downloads section of the Design System. These fonts are stored securely on the internal network and only available to Westpac Group Developers.
IMPORTANT: Projects must ensure that the web fonts they wish to use are licensed for use on all the public domains, sub-domains, and or apps that will host and or display these fonts.