ON the WORLD WIDE WEB the Various Opportunities of Web Font Services

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.

The most important terms

Webfonts 1.0

In the early 90s Microsoft and other companies Introduction introduced and designed a few web save fonts, including 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 formats, 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. WWW by providing them the core company fonts as Anti-aliasing is a way to provide stairway effects at a web fonts. To offer popular and well-designed fonts, font with using colour gradients at the edges of the the webfont services often work together with well- letterforms. The gradients reach from the font-colour known font foundries. The first big service to grab to the background-colour. The font then looks much up this idea was Typekit in 2008, followed by many smoother.5 others.

Hinting Subpixel rendering A digital font is usually defined in mathematical A standard pixel of a monitor consists of 3 parts outlines which can be rotated and moved freely. On called R, G and B. They are so small that the illusi- a webpage these outlines must be rasterized, which on appears that you only see one colour. These three means that the lines have to be converted into the pi- parts of a pixel are called subpixel and the brightness xels of the resolution of the device. In case of small of each can be set independently. Subpixel rendering displays or low resolutions these pixels do not fit very takes advantage of this independency and uses it to well into the mathematical outlines and so the font improve the resolution. Rendering a type with sub- will look very imperfect. Hinting means that there pixels creates better results than with standard ren- are some defined rules for the process of rasteriza- dering but the font may get colour fringes. Subpixel tion. A hinted font includes such rules (hints) as a rendering isn’t easy to apply on all monitors because part of font definition.6 Hinting is the big issue with some of them changed the order of the RGB subpi- Windows, because Mac posses a good rendering en- xels. Right subpixel rendering can triple the resolu- ginge. Windows has a variety of rendering engines tion. 8 which means that the same font can look different on

4 5 Klanten, Der kleine Besserwisser 7 The big Web Show #1 - Web Fonts. 6 Bringhurst,„CSS3 module: The Web elements Fonts“. of typographic 8 Typography - Getting style. p.326 , p.95. the HangZeldan, of Webtypography Smashing Magazine, , p8-p10. 7 @font-face Browser support In 1994 Microsoft came up with the fi rst @font- Unfortunately not every browser supports the face proposal for CSS. At that time this suggestion was same font-formats so you have to embed diff erent dismissed because of a lack of interest of the browser formats to display the website into all browsers. To developers and too little support. In 2009 the @font- get cross-browser support you have to convert your face rule was re-introduced and is now part of the font-fi le in all necessary font-formats and then em- W3C Working Draft for CSS Fonts Module Level 3. bed them in your CSS, including the format attribute. Th e actual draft only includes minor changes to the When the browsers then come to the @font-face spe- earlier version of Microsoft . Th e @font-face rule al- cifi cation they will take the format they support. lows the developer to embed fonts he wants to use on a website so that the developer is not restricted to a few platform-depended fonts. In one CSS document @font-face { multiple font-face rules can be used. font-family: ‘EconomicaRegular’; src: url(‘../fonts/Economica-Regular-OTF-web- @font-face { font.eot’) format(‘embedded-opentype’), url(‘../fonts/Economica-Regular-OTF-webfont-family: ‘EconomicaRegular’; font.woff ’) format(‘woff ’), src: url(‘../fonts/Economica-Regular-OTF-web- url(‘../fonts/Economica-Regular-OTF-webfont.ttf’’); font.ttf’) format(‘truetype’), } url(‘../fonts/Economica-Regular-OTF-web- p { font-family: EconomicaRegular, sans-serif; } font.svg#EconomicaRegular’) format(‘svg’); } p { font-family: EconomicaRegular, sans-serif; }

OTF/TTF SVG WOFF EOT

IE9 IE9 IE5

FF3.5 FF3.5 FF3.6

CHROME4 CHROME 0.3 CHROME 5

N NE NW

S SW SAFARI 3.1 SAFARI 3.1 SAFARI 3.1

OPERA 10 OPERA 9 OPERA 11.01

IOS 4.2 IOS 11.01

8 2.2

Figure 1 -webfont formats browser support The font format most browsers support is TTF follo- second source attribute without the format specifica- wed by SVG and WOFF, but SVG is not supported tion. It is very important to add @font-face rules only by any version of IE. For IE lower than v9 there is an if you really use the fonts because some browsers like own and only format that is supported called, EOT. the IE v6,v7,v8 load the font files, no matter if you use Up to now only TTF has been supported by the most them or not. All these named bugs are fixed in IE v9. popular mobile browsers for iOS and Android.

Further attributes IE difficulties @font-face

To name the browser which makes the most dif- Local ficulties – it is the Internet Explorer in versions 6, 7 and 8. The IE downloads all fonts that are described There are some further attributes that can be ad- in the @font-face rule at the beginning. If there is ded to the @font-face rule but are not working well in more than one font embedded in the CSS the page- all browsers. There is, for example, the local attribute, load time increases immensely. The other browser which makes it possible to load the font from the lo- instead loads the fonts only when necessary. Further- cal System, if it is installed. more, the IE lower than v9 do not only take the for-

Browser independent @font-face rule: @font-face {

font-family: ‘EconomicaRegular’; src: url(‘../fonts/Economica-Regular-OTF-webfont.eot’); src: url(‘../fonts/Economica-Regular-OTF-webfont.eot?#iefix’) format(‘embedded-opentype’), url(‘../fonts/Economica-Regular-OTF-webfont.woff’) format(‘woff’), url(‘../fonts/Economica-Regular-OTF-webfont.ttf’) format(‘truetype’), url(‘../fonts/Economica-Regular-OTF-webfont. svg#EconomicaRegular’) format(‘svg’); } p { font-family: EconomicaRegular, sans-serif; }

mat it supports, but downloads all other formats, too which, of course, also have a negative impact on the @font-face { speed. To avoid IE downloading all formats, you have to add an interrogation mark or a hash to the EOT font-family: ‘EconomicaRegular’; link so that the IE lower than v9 knows that its source src: local (‘Economica-Regular.ttf’); ends there. url(‘../fonts/Economica-Regular-OTF-webfont.ttf’); Another problem of the IE is its compatibility } mode. It is possible to change the browser mode from p { font-family: EconomicaRegular, sans-serif; } your IE v8 browser to a virtual IE v7 browser called compatibility mode. If this mode is activated, your The problem with the local attribute is the font- browser will come up with strange manners. An IE in size. Often the fonts from font-foundries which are compatibility mode ignores CSS if it does not know optimized for the web, have lower resolution. That a special attribute in the specification which happens means that the same font with the same given font-si- at the @font-face rule in position of the format attri- ze at CSS (12pt) looks different in the browser because bute. To solve this problem you have to introduce a the size depends on the initial font. While a local font

9 is designed for higher resolutions and therefore the initial size is very big, a web font is made for a lower resolution and initially smaller. So an embedded Digital Font readability Zapfino at the size of 12pt might look like this:

Readability or “The local problem” legibility? So an embedded Zapfino at the size of 12pt might look like this: There was a large step between font gets the source from a webfont-service letters carved onto rocks or other materials and digitalized words. Now we are using digital devices more than ever and read on them nearly daily. @font-face Recent studies have shown that if something is hard to read it is hard to font gets the source from the additional local attribute understand and to handle successful- ly. Therefore it is important to improve the readability as much as possible on websites. Often the word legibility comes up in this context, but legibility is an attribute which webdesigners cannot influence. Legibility depends on the type designer’s creation of the @font-face font, like the character shapes, stroke weight, axis and proportions. Howe- ver the readability can be influenced The local attribute is also buggy in Chrome and by a webdesigner. He sets the type and can influence 10 Mozilla and completely fails in IE v6-v8 and Android. spacing, font-weight, size and context of use. Font-size-adjust

This attribute is only available in Mozilla Firefox. Spacing It offers the possibility to adjust the x-height of the fallback font. So you can ensure if the font fails to A study shows that spacing is one of the most load, at least the x-height of the alternative font is the important facts for display readability of separated same as the one of the preferred one. A requirement words. Generally the default spacing is good for texts of this attribute is that you have to know the x-height in body copy size (12 point), but for smaller sizes tests of your font. Furthermore, up to now unfortunately showed that a font is harder to read with the default this has only been possible in one browser. spacing than with increased spacing. Especially for serif fonts it is important to increase the spacing ma- nually at smaller size because they suffer from condensed spacing. Moreover for bigger font sizes the Fallback spacing could be reduced for more efficient use of display space. Every @font-face rule should include a fallback with at least one web-save font if the font-file fails to Another study shows that these findings also fit load. Here, too, some browsers have an odd bug. IE v8 for longer text paragraphs, but unfortunately the tes- and Opera for example cannot use the fallback font. ted users felt more comfortable to read with default Instead of the alternative font they display nothing. 9 text size. 11 10

9 11 Suen u. a., „Evaluation of fonts for Digital Publishing and Display“, 1424–1426. „Jake Archibald | In your @font-face | Fron- Suen u. a., „Evaluation of fonts for Digital teers 2011“. Publishing and Display“, 1430–1432. 10 Current webfont formats

Nowadays you can embed nearly every font on EOT your website with the CSS3 @font-face feature so you have many more designing possibilities than before Although Microsoft was one of the Open Type with only six web save fonts. Unfortunately not every developers, the Internet Explorer does not support browser supports the same font format. The 5 most this format. Therefore there is a unique font format important web font formats are: TrueType, Open only supported by the IE, called EOT. It is a combina- Type, Embedded Open Type (EOT) and web Open tion of Open Type and True Type. EOT is a container Font Format (WOFF). format which includes a font file (Open Type) and a licence document or a link to a licence. Although EOT can be used via CSS it is no standard because True Type only Microsoft uses this format. On the one hand this font format is very compact and includes attri- True Type replaced the bitmap fonts for the butes that prevent fonts from unlicensed use, but on screen in the late 1980s and was early adopted by Mi- the other hand one browser only supports this font crosoft as the standard system font because it offers format, so it will not get the new Web font standard. a lot of fine-tuning possibilities for the screen. The The idea behind EOT is that the browser, in this case True Type font was the alternative to Adobes Typ- 12 only IE, checks whether the font belongs to the web 1-Standard. Type -1-Standard’s outlines consist of document or not. If not, the browser will ignore the relationship curves and the True Type describes the font file and display a standard one.14 outline with quadratic equation. The most important difference to the earlier developed PostScript font is that TrueType uses one format description for dis- WOFF play and print.13 Next there is a new font format under way – the Open Type Web Open Font Format, but until now it has just been a working draft from the W3C (World Wide Web Next Microsoft and Adobe together developed Consortium). Font designers and browser develo- the Open Type font format based on the TrueType pers created this format together. WOFF includes a format which offers many typographical features. font compression and Meta data which can be added Open Type works on multiple platforms without ad- to every font file. These Meta data can include the li- ditional software. An open type file supports up to censing of a font. Unfortunately up to now there has 65,000 characters and includes multiple styles and been no native browser feature which can check this variations. It is based on Unicode. That provides a big meta file. advantage towards PostScript which was ranged to 256 glyphs. Furthermore an OpenType font includes all signs of a font-set like small caps and medieval SVG numerals. In addition to that you can add characters from other languages in one font file. Unfortunately The last format that has to be mentioned is SVG. till now many browser do not really support this fea- SVG fonts are text files that include the outlines of ture in a satisfying way. There are two different kinds the letters like vector objects. SVG fonts are usually of Open Type font formats, one with TrueType Out- very large and for that reason not good for online use lines and one with PostScript Outlines. For the Web but it is the only format that is supported by iPhone the one with True Type Outlines should be preferred, and iPad prior to iOS 4.2. because this format supports subpixel rendering, this is why this format delivers better quality. 12 Typography - Getting the Hang of Webtypography 13 Klanten,Smashing Der Magazine, kleine Besserwisser 14 . p.162 - p.166 , p. 92 Bos, „Turning Sematics into Syntax“, p.6 11 Summing up, we can see that there are many different aspects which you have to take into consideration before you choose a font format for a web page. Usually a web designer has to use all of these 5 font formats to attain browser autonomy.

Webfont Licensing

EULA Linking or Embedding? The End User License Agreement is a licence file every font included. This licence defines how and for One of the biggest problems is to under- which practice the end-user is allowed to apply the stand the difference between the permission to font. link and to embed a font on the Internet. Most of the fonts have a web embedding agreement. Each font has an own EULA (End User License That means that the designer is allowed to embed Agreement). Especially for web licensing this is dif- the font in a file and this file is embedded on the ficult because of two facts: licensing can’t be proven website. So the designer is only allowed to use an easily and a lot of designers don’t know when they are image (which shows the font) or a flash file, but actually allowed to use the fonts on the Internet. A he is not allowed to link the font on the web page. printing license isn’t the same as a web license. So in most cases @font-face use is not allowed from the font-designer. Unless explicitly stated in A new approach in font licensing is the WOFF, the license.16 which is a special case. WOFF is not a font-file alo- ne. It is a wrapper for a font (e.g. OpenType, TrueTy- Webfont licensing is one of the most impor- pe) and a Meta file which includes information about tant reasons why it takes so long to get webfonts the font licensing. This format allows checking the li- supported in all browsers. The problem is that a censing more easily. Furthermore it is not likely that font, which is embedded in Websites, is easily re- somebody abuses these fonts because this format is producible because users have the possibility to developed for web use only, so it does not work like get access to the whole source code. That means a system font and cannot be used as font for printing that you can download and reuse it easily for free, stuff. Unfortunately up to now there has been no au- without having a licence. Therefore a lot of font- tomatical browser checking for these meta data, and hosting services invest a lot of time and money to overall this font format is not supported by many ol- protect the fonts from abuse. Browser developers der browsers. Furthermore not all font-foundries al- also tried to manage the font rights, but it never low reproducing and using their fonts in WOFF. Ad- succeeded, because a browser cannot automati- obe, for example, does not allow its customers to use cally check up the licensing. 17 their fonts in this file format. 15

16 Typographic web design 17 The big Web Show #1 - Web Fonts. 15 Franz, . p.57 Zeldan, „WOFF File Format 1.0“. 26:00 - 34:00 12 Webfont services

Usage In the following chapter fi ve of the most popular webfont services will be analysed. It includes information Using Google Webfonts is very easy. You select about the business model, font hosting and numbers you favourite font, include a snippet generated from of off ered web fonts. Google in the header of your HTML - It is a link to the hosted font. Finally you can use the font family in your CSS like every other font-family.

Google Webfonts Oft en it is important to use your favourite fonts in you prototypes. Th ere is no direct possibility to www.google.com/webfonts download the Google webfonts for prototyping but the company Type DNA off ers a standalone version plus a plugin for the Adobe Creative Suite to use Numbers and facts Google Webfonts directly in your layout.

Google webfonts was launched at Google I/0 in 2010. Th e web service started with 18 font families and reached 175 in 2011. Th ey work together with 45 font designers. Statistics show that there has been a Speed & Features huge demand since the relaunch. In 2011 fonts were used on 1.29 million unique domains and, all in all, To improve the loading speed of their webfonts there are 110.000.000 font requests. Furthermore in Google introduced a new mobile version of their font 2011 they had a monthly growth of 30%. off ering. Th at means that Google automatically iden- tifi es in which browser the font is obtaining and then responds with a Webkit-Android-Mobile version or a Windows version. Th e reason for this is the ren- David said that Google “want to be the web dering quality of windows. In all IE versions lower more impressive and fun” and for this reason they es- than IE v9 the rendering of fonts isn’t very good. For tablished the free web service Google webfonts. Th e that reason the Google web font source needs to in- keyword in the last sentence was “free” that mean clude a special metadata for Windows which pushes that you do not have to pay any licensing to use the up the size of the font fi le. To reduce the amount of off ered fonts. You only have to name the font-desi- the transferred data Google omits the metadata in gner in your impressum. On the Google I/0 in 2011 all other browsers, which is a big benefi t for the rela- David mentioned that one important future prospect tively low mobile broadband. Moreover it is possible is to keep the open source license. to get multiple fonts in one request.

Service Furthermore Goole introduced a new parameter Google hosts the webfonts for the users and called ‘Text’. Th is parameter allows you to get only handles browser quirks. Th ey off er font updates, op- the needed characters from Google. Th at means if timization and quality improvement for free. you only have one word on your website, which uses Google webfonts you don’t have to load all 252 characters. So if you want to use the word ‘Hello’, you transform the link for the http request like this: g 13 portunity Jeff rey tries to enable designers and com- css’> Numbers and facts

Another important fact for speeding up font loa- Typekit was the fi rst service which came up ding is the maximal caching from Google. In eff ect with the external font embedding solution in 2008. that means if a user visits a website which is using Th ey brought in another business model. Th ey shift Google fonts, the browser will automatically put the away from the asset sale to the service model. Th e fonts into the browser cache. Th e next time a user vi- two main goals at the establishment of Typekit were sits a site with the same Google font the browser does fi rstly to use the native web technology and secondly not make an http request, but it takes the font from to make font embedding on websites easier for the the cache. Summing up, Raph Levien, engineer and designers to allow them to focus on the designing font expert prospects for the future ‘the more popular and typography process. Typekit got inspired and it becomes the faster its gonna be.’ taught from Google because before the establishment the team of Typekit worked two and a half years for Google. Th erefore their font-hosting-business model Font compression is very similar. 19 Google Web fonts also do maximal font com- In 2011 Adobe Systems Incorporated acquired pression. Th at means that they always use WOFF on Typekit. Now the service has over 250.000 customers modern browsers.18 including Th e New York Times and Twitter.

Service Typekit Typekit hosts the chosen fonts on their servers. Th ey off er the right font format for every browser www.typekit.at and device. Typekit also off ers fallback methods for browser (e.g everything lower than IE9), which does “Typekit myspace the world” – was a sentence not support Webfonts. Fonts get updated regularly on Jeff rey Veen, senior director and founder of Typekit, the server. Furthermore the fonts get re-hinted and loves most when people talk about his service. He adjusted from the cooperation Foundry FontFont totally agrees with this statement because MySpace which has a warehouse of employees to hint fonts for gave people the opportunity to express themselves vi- Typekit. Th is newer version then gets updated on the sually, whether you like it or not. Th is is the same op- server. t

Figure 2 - typekitEditor

18 Google I/O 2011. 19 The big Web Show #1 - Web Fonts.

Zeldan, 14 Usage At Typekit you buy a subscription to get access Using Javascript for embedding has not only to an online font library. Depending on the number one reason, there are a couple of things, which justify of used fonts and the page views per month you have JavaScript, like browser quirks, reliability and consis- to pay an annual fee to get access to the whole library. tency.21 Aft er creating an account you can choose nearly every font you want to embed on your website. Th en you get a link from Typekit which you have to embed in the header of the HTML document. Aft erwards you can use the font normally in your Cascading Style Fontsquirrel and Sheet with the font-family specifi cation and the cor- responding font name. Furthermore you can custo- Frontspring mize your font properties, like the font-weight. www.fontsquirrel.com www.fontspring.com #header{ font-family: proxima-nova, sans-serif; Th e reason why I named these very diff erent font-weight: 900; font services in one chapter is easy – the inventor of } those is one person, called Ethan Dunham. Mr Dun- ham founded fontsquirrel in 2009 – the reason for Another possibility is to add the CSS selectors the establishment was the absence of free high qua- directly to your online typekit on the website. If you lity fonts on the WWW. Before foundation Ethan do so, you do not have to add any CSS to your own Dunham had already worked as a font designer for stylesheet. Th at means that every customization on 15 years. Th e focus on fontsquirrel is to off er a few your font can be done through your stylesheet or di- free high quality fonts and not unlimited range of low rectly through the Typekit online editor.20 quality fonts. Furthermore it was important for Mr Dunham to provide the fonts with a not-only-private licence. Th at means the font is really free, you can do Speed & Features whatever you want. Some of his fonts are on Google Web fonts, too, like the Open Sans.22 In February 2010 Instead of all other font-embedding-services Ty- Ethan Dunham then established another well-known pekit is the only one that uses Javascript to embed the font-service website, called fontspring. On this webfont. Th e reason why they do not choose pure CSS site he wanted to apply what he learned about selling is easy. Th ey do not want to recreate the own code his own fonts to selling others fonts. Mr Dunham be- again and again, because since the re-introduction lieved that renting a font is not as satisfying as buying, of @font-face in 2009 there were have been changes installing an own a font. At fontspring the designer of syntax and many diff erent font formats that must has the control of the font.23 Now Fontspring off ers be off ered. Instead of handling CSS they decided to up to 3,860 diff erent font families. go on with a Client-Side Javascript called Kit JS. Th e advantage of this method is that every browser iden- tifi es itself when coming to Typekit and so already knows who he is and what he exactly wants. Th at me- Service ans that Typekit only has to send one requested font At fontspring and fontsquirell you download the format which is a big advantage on speed. font once in diff erent formats and can use it for eve- Another advantage this lightweight Javascript rything you want for unlimited domain numbers. At provides is the possibility of font events. Webbrow- fontspring you have to pay once, and then you own sers do not off er any own method for detecting the the font. Prices are from 0 - 130 . Th e fonts are all status of font load. Th erefore Typekit introduces the auto-hinted. font events which allows decelerating Fallback fonts, 21 if the browser cannot load the requested font, for 22 whatever reason. „Better web font loading with JavaScript“. 23 „Episode 58 – Font Squirrel / Ethan Dun- 20 ham – The Web 2.0 Show“. „Interview with Ethan Dunham of Fonts- „Using Typekit fonts in your own CSS“. quirrel andf Fontspring | The Bright Lines“ 15 Usage quality fonts for all platforms, with very good legibility. Webtype tries to get only as good readable fonts At fontsquirrel you have the possibility to down- as Georgia. Th erefore Roger Black mentioned that he load your font once, and then create your own @font- wants to apply some rules from printing to web. So face. Furthermore fontsquirrel off ers a @font-face ge- typefaces, which are good readable at very small sizes nerator. Th ere you can upload a font you have legally at old newspapers must be good as webfonts. So the acquired, and fontsquirrel generates you a basic, op- company not only created new typefaces, they also timal or expert version. At the latter you can customi- took old easy to read typefaces and optimize them ze a lot of things, like the rendering, hinting, CSS or for web use.25 Now Webtype off ers about 70 diff erent the produced font formats. Usually the optimal ver- font-families with up to 28 diff erent styles off ered sion fi ts for a normal website implementation. If you from 4 font-foundries. check to the licensing Agreement you can download your @font-face folder, including a index.html and a style.css which covers all font styles and weights in Service diff erent sizes. So you only have to adopt the font- You only pay for the webfonts you really need face to your stylesheet. and for the number of page views. Unfortunately At fontspring you have to create a new account you do not see the price if you chose your font. Only and then you can start buying fonts. If you choose a on the way to check out you can see the price which font, you can download a version with the right lan- changes if you modify the number of page views and guage set. You get a folder with the licence agreement, the kind of hosting. Th ere is also a 30-day free tri- the desktop version of the font, a folder full of web- al version for every font available but restricted to font formats and one demo HTML and CSS fi le. monthly page views of 250.000. You have to pay for the desired fonts annually. Speed & Features Usage Th ere is no method to measure the speed of font loading because it depends on the server. In the case First you have to choose your favourite font. Re- of fontsquirrel and fontspring you have to host your ally helpful is the option to sort the font aft er inten- fonts on your own server so the speed depends on ded size. So if you search for a body copy font you your server settings. So furthermore the font-loading can choose the option small (9px-14px). Th e off ered speed cannot be improved.24 fonts are specially made for these pixel sizes. Aft er se- lection a font you can go to the shopping cart and choose the options for your font (hosting, pageviews). Aft er you have paid the calculated amount of money you will get the font added to your account. Th en you Webtype have to setup a new project online with your domain and Webtype creates a snippet of code, which you www.webtype.com have to paste to your HTML fi le. Th en you are able to use the bought font in your CSS. Numbers and Facts

Webtype was established in August 2010 from Speed & Features the Font Bureau, Inc. and Ascencer Corporation Petr Like all other webfont services WebType also van Blokland, DevBridge and Roger Black a popular off ers server updates with newer font versions auto- art director. Some experts from Ascender Coporati- matically. Furthermore all browsers, including the on already worked on the web-safe fonts 1.0, we re- mobile ones get supported. Moreover they off er legal lied on in the past. Th e reason for establishing a new use of webfonts and security of abuse for designers. font-embedding service was the aim to deliver great Th e 30-days trial version gives the web developers the possibility to test every font in real-world settings. 26 24 25

„Web fonts and desktop fonts | Fontspring“; 26 „Webtype“.„5by5 | The Big Web Show #18: Roger Black „Font Squirrel | Handpicked free fonts for graphic on Web Type and Templates“.. designers with commercial-usew licenses.“ 16 Experiment Reading Edge Th e introduction of the high-resolution mobile devices has changed a lot. With the new Retina Dis- Reading Edge is a font series only available on play of the iPad3, the resolution went up to 2048 × WebType. It consists out of fi ve font families which 1536 pixels. Th at is more than an average LCD Moni- styles correspond to existing print typefaces from tor has, but at the size of 10 inch. Expert Web designer Font Bureau but they are totally newly adjusted for Dave Shea explained why this high resolution could web. Th ey are very highly readable on screen. be a problem when using images. All pictures we save for web and put on a website will look like a ‚pixelated clip art’, because oft he high resolution. Th erefore Hinting Text must be ‘real’ Text on a high-resolution display. Th at means no images for heading, or buttons. 28 Even Every font has been carefully hinted at Webty- on a retina display of the iPhone4 you can see every pe. Th ere is no auto-hinting setting that improves the detail the following example shows: quality of the off ered type immensely. Tom Rickner and experts at Ascender Corporation have hinted I embedded the OpenSans Condensed from every font methodically. Th e font from Webtype ren- Google webfonts to a Website and tested the website ders cleanly in all browsers.27 on the iPad3, iPhone4 and the Safari under Mac with Lion.

header nav{ font-family: ‘Open Sans Inﬂ uence of high-resolution Condensed’,’Helvetica’, sans-serif; font-size:1.3em; displays for web font services font-weight:bold; }

Figure 3 - iPhone4

27 28 „iPad 3 and Retina Screen: What it means for your mobile commerce site | Mobify“ „Font Bureau Blog | Webtype Launched by Partnership of Experts“. 17 Findings The experiment shows that the same font looks To develop right for mobile high-resolution good in Safari on Desktop version and looks awful on displays many facts must be taken into considerati- the iPhone and on the iPad. It seems like the outlines on, and if you decide to host your font by yourself, of the fonts are doubled. First of all, I absolutely did you will have to do all the maintenances on your own, not know why the same font with the same stylesheet and you do not get regular font updates. Therefore seemed to be completely different on another device. I think that the introduction of the high-resolution After a few tests I found out that the problem was the displays, the web-font services, which offer font hos- font-weight attribute in combination with the high- ting, will take an advantage out of this, because this is

Figure 4 - Desktop browser the easiest way to implement the desired fonts. Even resolution display. I tried to replace the bold value for headings or small parts then you cannot use ima- with a number (900), but it didn’t change anything. ges anymore – because of the too low resolution of On the normal LCD display on my laptop the resolu- the pictures the font looks very pixelated in compari- tion is too low to recognize that the web browser du- son to the real embedded font (Figure 5). The possibi- plicates the outline instead of creating a real bold font. lity to save the pictures of a font in a higher resolution By deleting the font-weight the displaying works fine. is not a good idea because it delays the loading time a lot and isn’t necessary for all other currently used desktop and mobile browsers. Result Roger Black from WebType mentioned that mo- This means that web designers have to reconsider bile devices with retina displays would be a key for their way of designing. Using normal font-weights readability because you then can make pages smaller, does not achieve good results on the high-resolution without loosing readability. So on a high-resolution mobile devices. That means if you want to have a bold display it is possible to read even small font sizes very style, you will have to offer the right font-file on the well. That would be of advantages to the user because server. It is not enough to buy or download one free readers of webpages want to scan a paragraph and font and use this for the web with different styles via not read letter by letter. So these high-resolution dis- CSS. So the developers are forced to get all different plays can be optimized for scanability.29 styles via @font-face or font-hosting services. 29 „5by5 | The Big Web Show #18: Roger Black 18 iPad  iPad Desktop Browser (Safari ..)

Figure 5 - real font/image comparison

Conclusion Future prospects Th e cooperation of font foundries and all brow- As the thesis shows the typography of the web ser companies with the W3C working group plus re- is becoming more and more important. Over the defi ning the uniform WOFF fi le with a licensing mo- past years many webdesigners were no typographers del will make it possible to get a webfont standard because they only had to handle with a few webs- within the next few years. Th erefore it is important ave fonts and so had used some workarounds to get that browsers start to check licenses from WOFF fi les other fonts into the website, like images or fl ash. Th e automatically to give the font foundries the security webfont specifi cation and the web font services to- of font abuse. In this way everything could turnout gether gave webdesigners the opportunity to become well, providing that every webdesigner adopts typo- typographical web designers. To focus on readability graphic skills. and design the off ers of the webfont services are very compelling. Most of them handle all browser quirks and optimize the fonts for mobile devices. Moreover it is important to use good quality fonts to make your content more appealing and legible because the most important thing on a website is good, well-structured content. If the development proceeds as fast as over the last 3 years, then the web will become a typographic paradise soon. Unfortunately it is never so easy. If you decide to do self-font-hosting, the handling with the diff e- rent font formats will be diffi cult. You always have to create at least 4 font formats to cover all devices. Fur- thermore you can’t ensure that nobody copies your font from your server. Converting fonts to various fi les and handling some strange IE quirks should be eliminated in the future. So as you can see, there has not been a webfont standard established yet. on Web Type and Templates“, 13:20 - 18:50 19 References „Interview with Ethan Dunham of Fontsquirrel and Fontspring | The Bright Lines“, o. J. http:// Archibald, Jake. „In your @font-face | Fronteers www.thebrightlines.com/2010/04/18/inter- 2011“. Vimeo, o. J. http://vimeo.com/33154573. view-with-ethan-dunham-of-fontsquirrel- Zugriff: 2012-05-26 12:07:52 and-fontspring/. Zugriff: 2012-05-25 12:54:03

„5by5 | The Big Web Show #18: Roger Black on Web „iPad 3 and Retina Screen: What it means for your Type and Templates“, o. J. http://5by5.tv/big- mobile commerce site | Mobify“, o. J. http:// webshow/18. Zugriff: 2012-05-26 16:06:46 www.mobify.com/blog/ipad-3-and-retina- screen-what-it-means-for-your-mobile- „Better web font loading with JavaScript“. The commerce-site/. Zugriff: 2012-05-26 18:40:54 Typekit Blog, o. J. http://blog.typekit. com/2011/08/11/better-web-font-loading- with-javascript/. Klanten, Robert. Der kleine Besserwisser : Grund- Zugriff: 2012-05-25 12:09:48 wissen für Gestalter. Berlin: Die-Gestalten- Verl., 2007. Bos, Bert. „Turning Sematics into Syntax“, Februar 1, 2009. Lupton, Ellen. Thinking with type a critical guide for designers, writers, editors, & students. New Bringhurst, Robert. The elements of typographic sty- York: Princeton Architectural Press, 2010. le : verson 3.2. Point Roberts, Wash: Hartley & Marks, Publishers, 2008. Nielsen, Jakob. „How Long Do Users Stay on Web Pages?“, o. J. http://www.useit.com/alertbox/ „CSS3 module: Web Fonts“, o. J. http://www.w3.org/ page-abandonment-time.html. TR/2002/WD-css3-webfonts-20020802/. Zugriff: 2012-06-11 11:12:12 Zugriff: 2012-05-26 18:07:25 Smashing Magazine, Hrsg. Typography - Getting the „Episode 58 – Font Squirrel / Ethan Dunham – The Hang of Webtypography. Freiburg, Germa- Web 2.0 Show“, o. J. http://web20show. ny: Smashing Media GmbH, 2011. com/2009/11/episode-58-font-squirrel/. Zugriff: 2012-05-25 12:53:29 Suen, C.Y, N. Dumont, M. Dyson, Y.-C. Tai, und X. Lu. „Evaluation of fonts for Digital Publi- „Font Bureau Blog | Webtype Launched by Partner- shing and Display“. E.ICST, Peking Universi- ship of Experts“, o. J. http://www.fontbureau. ty, China, 2011. com/blog/webtype-launched-partnership- experts/. Zugriff: 2012-05-26 16:05:47 „Using Typekit fonts in your own CSS“. The Ty- pekit Blog, o. J. http://blog.typekit. „Font Squirrel | Handpicked free fonts for graphic com/2011/06/29/using-typekit-fonts-in- designers with commercial-use licenses.“, o. your-own-css/. Zugriff: 2012-05-25 10:53:12 J. http://www.fontsquirrel.com/. Zugriff: 2012-05-25 13:24:37 „Web fonts and desktop fonts | Fontspring“, o. J. htt- ps://www.fontspring.com/. Franz, Laura. Typographic web design : how to think like a typographer in HTML and CSS. Chi- „Webtype“, o. J. http://www.webtype.com/. chester, West Sussex: Wiley, 2012. Zugriff: 2012-05-26 16:06:24

Google I/O 2011: Web Fonts are changing the Web. „WOFF File Format 1.0“, o. J. http://www.w3.org/TR/ Learn why, 2011. http://www.youtube.com/ WOFF/. Zugriff: 2012-05-25 12:27:05 watch?v=QTX1lU97z08&feature=youtube_ gdata_player. Zeldan, Jeffrey. The big Web Show #1 - Web Fonts, 2010. http://5by5.tv/bigwebshow/1. Zugriff: 2012-05-25 10:53:12

20 Additional literature

Huang, Mary. „Bold, Italic, Emphatic - Possibilities for Interactive Type“. IEEE Computer Socie- ty, May/June 2011

Hogan P., Brian. HMTL5 and CSS3 - Develop with Tomorrows‘s Standards Today, Part 19 - Using Real Fonts. USA: December 2010

Spiekermann, Erik. Überschrift. Kapitel 1-4; Kapitel 7 & 8. Deutschland: 2004, 1. Auflage

Smashing Media GmbH. Smashing Book 2. Freiburg, Germany: 2011

J.Böhringer, P.Bühler, P.Schlaich. Kompendium der Mediengestaltung. Konzeption und Gestal- tung für Digital- und Printmedien. Kapitel 2.1 Schriftengeschichte, 2.3 Lesbarkeit, 6.2 Screendesign. Berlin: 2008, 4. Auflage

J.Böhringer, P.Bühler, P.Schlaich. Kompendium der Mediengestaltung.Produktion und Technik für Digital- und Printmedien. Kapitel 1.2 Schrifttechnologie, 10.2 CSS. Berlin: 2008, 4. Auflage

Sonic Media Verlag GmbH, Steven Jenkins. „Be- eindruckende Typografie mit lizensfreien Schriften“. Der Webdesigner - Ausgabe 1/2011

21 Table of Figures

Figure 1: webfont formats browser support 8 Figure 2: typekitEditor 14 Figure 3: iPhone4 17 Figure 4: Desktop browser 18 Figure 5: real font/image comparison 19