Web fonts and HTML5 for brands

An edited version of this article appeared in issue 233 of .net magazine – the world's best-selling magazine for web designers and developers.

The proliferation of mobile and tablet devices presents a tremendous and unique opportunity for organisations to position their brands and establish a more personal relationship with their customers and target audience. Your brand defines who you are, and, just as important, helps you stand out from your competitors. With fonts being both the essence and genesis of brand identity, typography has a direct effect on a consumer’s perception of your company, your products and whether you seem trustworthy or not. A key difference with the digital medium is that brand presentation is of even greater importance in initiating a relationship with a customer, since purchase can be only a click away from first contact.

Web fonts go mainstream

One major development in the field is the fact that web fonts began to go mainstream in 2012. Monotype Imaging and Google’s web fonts team have been working closely together to improve their quality. The main focus has been on file size, because smaller web fonts are faster web fonts. By using Monotype Imaging’s MicroType Express (MTX) algorithm, we have now achieved the goal of making the display process quicker and the image sharper while retaining consistent quality and performance across different browser platforms.

But while it is undoubtedly encouraging to see a company with Google’s reputation throwing its weight behind web fonts, how are they being deployed in the real world?

Keeping a consistent brand style

Some of the largest online retailers are now getting to grips with web fonts and are really starting to use them to their advantage.

For example, price-comparion website Kelkoo recently completed a major overhaul of its website, with web fonts playing a key role in improving its digital experience. As an internationally recognised brand that operates across Europe and has recently expanded into the United States and Brazil, the revamped website had to cater to the tens of millions of unique users that it attracts per month.

Towards the beginning of 2011, the company wanted to revamp the visualisation of the site to ensure that customers were provided with the smoothest possible user experience when searching for products or services. With its increasing number of competitors, Kelkoo also wanted to update the site to improve its offering and differentiate it further in the market place. However, the company had gained and maintained loyal followers internationally over the years and created a core identity which was vital to maintain.

During the development of the site, the team realised that the Avenir font they required for the titles and subtitles of the site, and which was set out in the revamped brand guidelines, was not web standard and therefore couldn’t be used in the desired standard format. This presented a serious consistency problem for the team, who contacted Monotype Imaging to source an appropriate web font version of Avenir. Using web fonts, Kelkoo now has support for over 40 major languages, reducing the development time required to optimise the site for different countries. All the text changes were handled in the code of the website, removing any potential disruption to the design workflow. The developers can now deliver the correct style without having to embed text in graphics or use other technologies. Type also scales smoothly when the site is viewed on other devices.

Kelkoo’s experience is a good example of how important it is for brands to maintain a uniform presence across all of the platforms available in today's cross-media world. Building brand loyalty can take years, yet we still see companies jeopardising their reputations by not adapting their brand identity to new digital media. If the uniformity from print to mobile isn’t there, your brand is in serious trouble. Our research reveals that less than one per cent of users would definitely trust a brand if the font was different to the one they were used to seeing. With spam and data breaches becoming more common, keeping your brand’s typography consistent from print to online has never been more important.

Making things simpler

The emergence of HTML5 is also changing the way in which web fonts are implemented. Designers now have greater control over their web content, while developers can deliver type in an app or webpage without having to rely on text images or Flash, avoiding associated problems with type quality, site performance and search engine indexing.

Like any evolving technology, HTML5 has its drawbacks: not least that it has not been implemented consistently across browsers. I would recommend going to Mobile HTML5 to see which features have been adopted by which web browsers.

But maintaining a single code base means that a single team of developers can handle a project, increasing efficiency and reducing overall costs. Developing with HTML5 also means gaining access to the largest developer ecosystem available, with the ability to leverage existing libraries and tools; and it future-proofs all the content you produce.

If your brand is not consistently extended across mobile platforms, your ability to connect with your audience will be significantly reduced. The good news is that as digital media continue to prosper, so will web fonts and the technology used to implement them.

Find the 50 best free fonts for designers over at Creative Bloq.

Thank you for reading 5 articles this month* Join now for unlimited access

Enjoy your first month for just £1 / $1 / €1

*Read 5 free articles per month without a subscription

Join now for unlimited access

Try first month for just £1 / $1 / €1

The Creative Bloq team is made up of a group of design fans, and has changed and evolved since Creative Bloq began back in 2012. The current website team consists of seven full-time members of staff: Editor Georgia Coggan, Deputy Editor Rosie Hilder, Deals Editor Beren Neale, Senior News Editor Daniel Piper, Digital Arts and Design Editor Ian Dean, Tech Reviews Editor Erlingur Einarsson and Ecommerce Writer Abi Le Guilcher, as well as a roster of freelancers from around the world. The 3D World and ImagineFX magazine teams also pitch in, ensuring that content from 3D World and ImagineFX is represented on Creative Bloq.