Specific Font Serving

Making fonts completely responsive to medium and design

We’ve been approached by Google to contribute to Google Web Fonts, a project to build an open source library with Google’s intension to making web fonts quick and easy to use for everyone. At Type Mafia, it’s likely to solve problems and make client’s and user’s lives easier, rather than inventing for the sake of it. So when designing fonts for the web was considered, we naturally thought about the issues specifically related to rendering type on screen. Consequently we didn’t contribute fonts in the end, but instead gave advice which all fonts in their entire library profit from.

Difficulties displaying type consistent across anything

Since the early days of digital fonts, it has always been difficult to display them consistently across different platforms. A wide range of operations systems, different resolutions, pixel densities, programs and rasterizing software all significantly change the appearance of the original type design. Especially today there is a wild growth of platforms: next to desktop computers and laptops, now there also have to be dealt with tablets and mobile phones. All these factors make it impossible to design a typeface with predictable results on screen.

Apple versus Microsoft: dark versus light typography

Although the landscape of the mentioned mix constantly changes, there is one significant difference that seems consistent: fonts displayed on Apple products and fonts displayed on any other system differ in its colour (appearing relatively dark on a Mac, lightish on any other system). The significant difference of representing fonts lies in a difference of vision, meaning fonts are handled differently: whereas Apple believes the design of the typeface should be preserved as much as possible, Microsoft generally believes that the shape of each letter should be hammered into pixel boundaries. This means that although fonts, in comparison, look darker on an Apple and might show a little bit of blurriness, it respects the type designer’s outlines. On Windows, fonts appear lighter so they prevent blur and improve readability; however, at the cost of not being true to the typeface. This issue is as old as computers exist.

Specific Font Serving

However, the recent introduction of web services providing fonts for online typography can help close the gap of various darkness instances. The solution is relatively simple: produce a single design in two sets of fonts: one optimized for Macintosh and one other for all other operation systems – managed by the online distributing service. Specific font serving that is.

This concept of specific font serving only is a true and helpful solution if selecting the right set of tailored fonts happens fully automatically – that is: somewhere at the background, not at the web designer’s, developers’ or end-users’ end. And this is the point where the web service, in this case Google’s Font API, actually comes in. A tweaked Google Font API could look up the end-user’s operation system before it uploads the necessary fonts to display a certain web page. As the Google Font API works with one simple line of implementation code per typeface, it prevents web designers and developers from being confused and overwhelmed with multiple versions of a single typeface plus different implementation codes (which might need updating over time).

Additional benefits: speed

Serving specific font files doesn’t only make type rendering more predictable but can have other benefits too. For instance it can speed up files’ delivery. Although most people think that hinting – a way to optimize fonts for rendering on screens – is the main issue that makes the difference in rendering type on screen, it isn’t. Actually, Apple’s operation system ignores hinting instructions potentially coming with fonts even completely. So leaving hinting data out for fonts specifically tailored to be used on Macs, it saves production time and reduces fonts’ file sizes. This means that the necessary fonts are downloaded faster at the first place, and second it means monthly less data traffic for both the website’s owner and visitor.

Responsive fonts for optical sizes

With the above approach in mind, one can think of a number of other useful possibilities. It only takes a little day dreaming to nail down more issues, such as dealing with optical sizes. In some way it should be possible that the API uploads a family’s text font if a web page requires it being displayed below a certain pixel size and uploads the family’s corresponding display weight if it should be typed set above another size.

Meanwhile: Feature implemented, fonts upgraded.

We’re delighted to see that Google’s type team immediately started implementing some of our suggestions to their font collection. At their conference ‘Google I/O 2011’ the team presented that stripping certain data (unnecessary for some platforms) out of fonts, saves up about a rough 40% of the fonts’ file sizes. This might look not so important for desktop computing with decent broadband access, but it certainly is for mobile devices. We look forward to seeing the industry making wider use of this concept, so we make the web look better together.