MEDIA TECHNOLOGY TYPEFACES ON THE WORLD WIDE WEB the various opportunities of web font services First Bachelor Thesis Completed by Lisa Maria Gringl mt101028 From the St. Pölten University of Applied Sciences Media Technology degree course Under the supervision of Mag. Jochen ELIAS St. Pölten, on _________________________________________ (Signature Author) 1 Declaration the attached research paper is my own, original work undertaken in partial fulfillment of my degree. I have made no use of sources, materials or assistance other than those which have been openly and fully acknowledged in the text. If any part of another person’s work has been quoted, this either appears in inverted commas or (if beyond a few lines) is indented. Any direct quotation or source of ideas has been identified in the text by author, date, and page number(s) immediately after such an item, and full details are provided in a reference list at the end of the text. I understand that any breach of the fair practice regulations may result in a mark of zero for this research paper and that it could also involve other repercussions. St. Pölten, on _________________________________________ (Signature Author) 2 Table of Contents Abstract 5 English 5 German 5 Introduction 6 The most important terms 6 Webfonts 1.0 6 most safe 6 Windows/Macintosh 6 cross plattform 6 Webfonts 2.0 7 Antialiasing 7 Hinting 7 Type/font foundry 7 Webfont services 7 Subpixel rendering 7 @font-face 8 Browser support 8 IE difficulties @font-face 9 Local 9 Font-size-adjust 10 Fallback 10 Digital Font readability 10 Readability or legibility? 10 Spacing 10 Current webfont formats 11 True Type 11 Open Type 11 EOT 11 WOFF 11 SVG 11 Webfont Licensing 12 EULA 12 Linking or Embedding? 12 Webfont services 13 Google Webfonts 13 Numbers and facts 13 Service 13 Usage 13 Speed & Features 13 Font compression 14 Typekit 14 Numbers and facts 14 Service 14 3 Usage 15 Speed & Features 15 Fontsquirrel and Frontspring 15 Service 15 Usage 16 Speed & Features 16 Webtype 16 Numbers and Facts 16 Service 16 Usage 16 Speed & Features 16 Reading Edge 17 Hinting 17 Influence of high-resolution displays for web font services 17 Experiment 17 Findings 18 Result 18 Conclusion 19 Future prospects 19 References 20 Additional literature 21 Table of Figures 22 4 Abstract English German This thesis deals with the different opportunities Diese Arbeit behandelt die vielen unterschied- of web fonts under the aspect of web font services. lichen Möglichkeiten der Webfonts bezüglich der Anti-aliasing, font-hinting and subpixel rendering Webfont Services. Anti-aliasing, Font-Hinting und are important features which can improve the dis- Subpixel Rendering sind wichtige Methoden um die play and readability of a font a lot. Moreover, there Darstellung und die Leserlichkeit einer Schrift zu ver- are many different font formats that are being used bessern. Außerdem gibt es viele verschiedene Schrift- to avoid browser quirks. These different formats all formate, welche benutzt werden, um die Browserei- have their own features and characteristics. One of genarten zu umgehen. Diese verschiedenen Formate the reasons why there are so many different font for- haben alle ihre Besonderheiten und Eigenschaften. mats, and not only one standard, is the difficulty of Einer der Gründe für die vielen Schriftformate und licensing on webfonts. While some foundries allow keinem einheitlichen Standard ist die Schwierigkeit a certain kind of online use, others forbid it strict- der Schriftlizensierung. Während einige Foundries ly. Since the re-introduction of the @font-face rule die Benutzung ihrer Schriften im Web erlauben, ver- many services got established to distribute and/or bieten es andere wiederum strikt. Seit der Wiederein- host the webfonts, these services are called webfont führung der @font-face Regel 2009 wurde viele Un- services. Each of these tries to provide special fea- ternehmen gegründet die Schriften vertreiben oder/ tures to the developers in order to get them use their und hosten. Diese Unternehmen werden als Webfont font-services. With the introduction of the iPad3, the Services bezeichnet. Jeder dieser Services versucht, high-resolution displays were revolutionized. Like spezielle Angebote zu Verfügung zu stellen um mehr the iPhone4 and 4S the iPad3 has a retina display and Kunden zu bekommen. Mit der Einführung des iPad3 an amazing resolution. These high-resolution de- von Apple wurden die hochauflösenden Displays re- vices feature specific characteristics, which have in- volutioniert. Neben dem Retina Display, welches fluenced developers and webfont services. Summing auch iPhone4 und iPhone4S besitzen, hat das iPad3 up, the next web font standard should be a font for- zusätzlich eine noch nie dagewesene Auflösung. Die- mat that makes licensing easy to handle and can be se hochauflösenden Displays haben besondere Ei- displayed in all browsers and devices. genschaften, welche die Entwickler sowie die Web- font Services beeinflussen. Zusammenfassend sollte der Webfont Standard also ein Schriftformat sein, welches die Lizensierung leicht macht und in allen Browsern und allen Geräten dargestellt werden kann. 5 The most important terms Webfonts 1.0 In the early 90s Microsoft and other companies Introduction introduced and designed a few web save fonts, inclu- ding Veranda and Georgia. These fonts were espe- In the past the situation with typography on the cially created and improved for the web. Unfortuna- web was described ‚like a desert’ by David Wurtz, tely the web designer was very limited in typography Product manager from Google. There weren’t a lot at that time. Furthermore these web-save fonts must of possibilities to use type on the WWW. Of course, be installed on the user’s system. There are some dif- there were ugly workarounds like images or flash ferences between Mac, Windows and other operating plugins, but these workarounds brought along some Systems. A list of web-save fonts: 3 disadvantages. In case of image replacement there is no semantic code any more. Moreover the content is not selectable which is very annoying to users if they want to copy something out of the HTML document. most safe Furthermore, the text is not zoomable. The problem with flash is obvious – the users have to install a plu- Arial/Helvetica gin in their browser. In consideration of the fact that Times New Roman/Times every website has at the maximum 10 seconds to con- Courier New/Courier vince the user to stay, the effort to install a new plugin will be too big for the average user1. Additionally, the Windows/Macintosh future of the WWW shows a trend to mobile devices and in large part of them flash is not supported and 2 Arial Black won’t be in the future. Comic Sans Georgia Trebuchet With the reintroduction of the @font-face rule Verdana in 2009 the latest browsers started to support the Lucida Grande/Lucida Sans rule and enable to embed theoretically every font you Tahoma want on you website. Theoretically therefore because there are of course some problems and facts that must be mentioned. In the next chapters I will exp- cross platform lain these points in detail: the different font file for- mats, font hosting, browser quirks and licensing. This Palatino thesis tries to answer if there already exists a webfont Garamond standard or if there will be one in the near future. To Bookman understand the following work the next chapter is Avant Gard about the most important terms. 1 Nielsen, „How Long Do Users Stay on Web Pages?“. 3 Lupton, Thinking with type a critical guide 2 Google I/O 2011 for designers, writers, editors, & students. p.72 . 02:20 - 04:40 6 Webfonts 2.0 the same system but in other applications. Hinting is a way to align letterforms to the pixel grid and a key Webfonts are all kind of fonts which can be em- to get good type in windows.7 bedded since the re-introduction of the @font-face rule. The official webfont format is the WOFF, which is defined in the W3C draft. Because until now it has Type/font foundry only been a draft, there are also other font formats that can be used as webfonts. The WebFont working A company which designs and/or distributes draft includes the client-side font matching, font syn- typefaces, is called a type foundry. Under William thesis; progressive rendering is enabled and fonts can Caxton London became the centre of press printing be downloaded from the web. Every user agent has industry. At the same time type foundries were esta- a “font database”. The new CSS model allows the de- blished. The service became especially important du- veloper to append his own settings to the font. The ring this time when education got amenable to all. In user agent finds the font that fits best and gets the those days type foundries handled with wood or me- font from a local system or via the web.4 tal typefaces, designed to print on a letterpress, whe- reas today, font foundries circulate digitalized fonts from type designers and might offer own type design Antialiasing services. On the screen fonts are displayed with pixels. Therefore the font does not look perfect because pi- Webfont services xels cannot exactly display the outline curves of a font. The smaller a font is displayed the worse the re- Since the re-introduction of the @font-face rule sult will be because there are fewer pixels to produce a new market has opened. The idea for this market the font. Therefore for screen design the size of the was offering fonts for web use, especially to support body copy should not be less than 12 pt. Furthermo- companies to improve their corporate identity on the re anti-aliasing improves the digital font essentially.