Modern human culture is based on our written language. No wonder, then, that typography - the design and depiction of lettering - shapes our everyday lives. We encounter different fonts in every situation, almost omnipresent: when reading newspapers, on posters, on TV, in shops and pedestrian zones; even street names have a different look in every city. Good typography is much more than just decoration. It structures and arranges information and helps with orientation. It improves readability and speeds up the absorption of content. And it translates emotions in the content into a visual experience, which is already indicated by the term “typeface”.

Today, professional designers and amateurs who hear the calling to be creative can choose the right font out of umpteen thousand fonts. And a few hundred new ones pop up every year. All brands and companies use typography to ensure a uniform appearance and recognisability and to stand out from the competition. Those that can afford to, use individually developed corporate fonts to lend a singular note to their corporate design.

Using workarounds to achieve individuality

The internet, which has been around for more than 30 years, vehemently refused this quest for individuality until recently. Texts on the world wide web or in ads in browser applications such as Netscape, Internet Explorer & the like could only be displayed with the help of pre-installed system fonts like Arial, Times or Verdana. In addition, the fonts were reproduced differently on different devices and browsers. For a long time, it was simply not possible to display a website with the company’s own corporate typeface.

To help fulfil their aesthetic aspirations, companies implemented the makeshift solution of presenting headlines with the help of pictures. However, images are not automatically readable and they play a subordinate role in HTML syntax, which means search engines were no longer able to recognise the headings and display them as search results. Another interim solution was established and used for several years with the advent of Adobe Flash as an alternative to spartan HTML websites. By expanding the forms of interaction and the multimedia possibilities of the internet to date, designers could now once again cut loose with animations, graphics and even desired fonts. But Adobe missed the signs of the times and the creative development of HTML standards. Steve Jobs himself initiated the decline of the software in 2007 by not allowing Flash as a basic technology on the iPhone.

Web font pioneers

Interestingly, it was already possible to integrate web fonts into websites via HTML in 1997. The @font-face rule for Netscape 4 and Internet Explorer 4 was developed for this purpose. The fonts were defined and linked in the Cascading Style Sheet (CSS) version 2.0. If you opened the website, the font was temporarily loaded from a web server into the browser instead of from the local font collection. However, screens were unable to display web fonts properly at the time, rendering the results unprofessional. This technology was ahead of its time.

It wasn’t until Apple developers combined the advantages of OpenType font technology from the print sector with the @font-face rule with the WebKit rendering engine for the new Mac OS X browser Safari 3.1 in 2007 that the road has finally been paved for web fonts.

But with the resurgence of the @font-face rule, regulatory inconsistencies also arose. Since the fonts were only linked in the source code of the website, they could be easily downloaded by pirates. This was a thorn in the side of the font providers, prompting them to carry out the font embedding themselves as a “delivery service”. At the same time, WOFF (Web Open Font Format) was introduced as a new typographic standard. WOFF is an extension of the widely used OpenType format, with the difference being that meta data can also be stored with license terms.

The era of system fonts has ended

Nowadays all common browsers and mobile devices support web fonts. They can also be integrated via JavaScript and API (Application Programming Interface). When you buy a font you usually receive it in different file formats such as EOT (Embedded OpenType/Microsoft), which is needed for the display on older versions of Internet Explorer, and in WOFF format for newer browsers. Additional formats such as SVG (Scalable Vector Graphic), TTF (TrueType Font) and OTF (OpenType Font) are often included in the font packages.

The quality of the web fonts depends not only on the file format but is decisively determined by the something called the hinting of the font. Hinting is the optimal adaptation of the font depiction to the pixel grid of the display. In order for a font to appear sharp, the edges of the letters must be smoothed by colour gradations (called antialiasing). This can vary greatly depending on the resolution of the output device and must be defined accordingly to maintain the individual character of the font for each point size.

Tips for using web fonts

If you decide to use a web font, certain things have to be considered: firstly, not every font that is available for printing is also available as a web font. Secondly, there are considerable differences in the licensing models of providers. Unfortunately, there is still no uniform solution here, as the market is in a phase of experimentation.

Google Fonts is a web service that offers a variety of web fonts for free use. Here you can download fonts free of charge, without creating a user account, and integrate them directly into the website.

However, the model of renting is the most widespread. The annual fee to be paid is often calculated on the basis of estimated page impressions or the size of the company (by number of employees). In some cases, it is also possible to use web fonts for an unlimited period of time for a one-time payment. When purchasing a web font license, the corresponding print license is usually not included in the purchase. The fonts are managed and the transactions are processed via a user account with the corresponding provider. Bank transfer, credit card payment and online payment services like PayPal are usually accepted.

Providers like MyFonts offer numerous fonts

The best-known commercial providers include Monotype, Adobe Typekit and MyFonts. Before purchasing a web font, it is important to test and compare the font on different browsers and operating systems. With MyFonts, the buyer even has the possibility to adapt and change the web font as desired after acquiring the license. With font design programs such as FontForge, FontXChange, iFontMaker, Glyphs and many others, corporate fonts can also be converted into web fonts and used for the company’s website.

Conclusion

Web fonts thus offer companies a good opportunity to transfer their corporate design to their communication channels on the World Wide Web. However, for the fonts to unfold their full effect, you still need a good hand. The basic rules of typography, to be found in the standards works Lesetypografie by Hans Peter Willberg and Friedrich Forssman, for example, are valid on the web, too. But in particular with regards to the development of new viewing habits through smartphones and tablets and the resulting requirements for responsive page design and flexible content adaptation, the complexity of typography is increasing.

New formats such as multimedia online magazines and interactive experience worlds, where boundaries between static staging and dynamic animation are dissolving, pose additional challenges. Successful implementations stand out with an excellent user experience that invites users to linger and guarantees recommendations and links.

Cover: Michael Bundscherer
Licence: CC BY-SA 2.0