User Experience

Web Fonts- The State of the Web

Why is the need for web fonts? Why should we not use regular, old print fonts? What advantages do they bring to users?

We analyse a talk between, Rick Viscomi and Dave Crossland, Fonts Program Manager at Google, about the state of web fonts.

Indispensability of Web Fonts 

Text is undisputedly the focal element of any web page. A web page may be designed without images or video, but text and hence fonts are indispensable. Moreover, fonts along with the choice of colours and the logo, constitute the fundamental elements of the branding process.

The Google Fonts API has clocked over 22 trillion font views since the launch of the product in 2010. Its popularity could be attributed to the fact that Google Fonts is fast, easy and most importantly, free. The Fonts API also removes a lot of the complexities in the web font technology. It offers different formats for different browsers- serving WOFF2 files to the newer browsers and other formats to the older ones.

Developing Web Fonts for an International Audience- Challenges

However, there arises a whole new set of challenges while developing fonts for an international audience. The file sizes of fonts for international languages are typically larger than that of European languages. Google Fonts has traditionally sliced these languages into writing system sets. While a typical font for any of the Indian languages might be around two to three times larger than a European font, those of East Asia can be over a hundred times larger.

In such a scenario, the new Unicode-range aspect of the @font-face CSS is used. It allows developers and designers to slice the fonts into pieces dynamically, with the browser downloading only the pieces that are required. Hence, an East Asian language can be sliced into a hundred slices which brings the latency of each slice to a level similar to that of a European font, leading to much faster font loads.

The future of Web Fonts

Custom fonts and icon fonts have been used to display images and even emojis. Getting the proper alignment with the text baseline is tricky when both text and image elements are present. This is where icon fonts come in handy.

Things get more complicated when it comes to emojis and colour fonts because there are different colour formats for different platforms. This means each font file would need to ensure that is supports all platforms and their specifications.

A new, exciting technology in this field would be variable fonts. It allows runtime interpolation between different styles and faces within a font family. CSS has only up to nine weights – from 100 through 900. But with variations, you can dial in a very specific weight. This provides much greater flexibility than what existed before. Also, the variations apply to not only font weight but also font width, rounding, slanting, optical size etc. All these are part of the OpenType standard which is supported across all platforms.

Web fonts, and especially variable fonts are revolutionary tools which will gain even greater credence in the future. To learn more about these thrilling changes, you could delve into a few resources such as those at Microsoft Edge, material.io or design.google.com/fonts.

You may also like
adwords-experiment-roi-1
An Experiment on Increasing ROI of an Adwords Campaign
bad design
Is your Landing Page Raising more Questions than it is Answering?