1

TYPEFACESON THE WORLD WIDE WEBthe 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)

MEDIA TECHNOLOGY

2

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)

3

Table of Contents

Abstract 5 English 5 German 5Introduction 6The 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 10Digital Font readability 10 Readability or legibility? 10 Spacing 10Current webfont formats 11 True Type 11 Open Type 11 EOT 11 WOFF 11 SVG 11Webfont Licensing 12 EULA 12 Linking or Embedding? 12Webfont services 13Google Webfonts 13 Numbers and facts 13 Service 13 Usage 13 Speed & Features 13 Font compression 14Typekit 14 Numbers and facts 14 Service 14

4

Usage 15 Speed & Features 15Fontsquirrel and Frontspring 15 Service 15 Usage 16 Speed & Features 16Webtype 16 Numbers and Facts 16 Service 16 Usage 16 Speed & Features 16 Reading Edge 17 Hinting 17Influence of high-resolution displays for web font services 17 Experiment 17 Findings 18Result 18Conclusion 19 Future prospects 19References 20Additional literature 21Table of Figures 22

5

Abstract

EnglishThis thesis deals with the different opportunities

of web fonts under the aspect of web font services. Anti-aliasing, font-hinting and subpixel rendering are important features which can improve the dis-play and readability of a font a lot. Moreover, there are many different font formats that are being used to avoid browser quirks. These different formats all have their own features and characteristics. One of the reasons why there are so many different font for-mats, and not only one standard, is the difficulty of licensing on webfonts. While some foundries allow a certain kind of online use, others forbid it strict-ly. Since the re-introduction of the @font-face rule many services got established to distribute and/or host the webfonts, these services are called webfont services. Each of these tries to provide special fea-tures to the developers in order to get them use their font-services. With the introduction of the iPad3, the high-resolution displays were revolutionized. Like the iPhone4 and 4S the iPad3 has a retina display and an amazing resolution. These high-resolution de-vices feature specific characteristics, which have in-fluenced developers and webfont services. Summing up, the next web font standard should be a font for-mat that makes licensing easy to handle and can be displayed in all browsers and devices.

GermanDiese Arbeit behandelt die vielen unterschied-

lichen Möglichkeiten der Webfonts bezüglich der Webfont Services. Anti-aliasing, Font-Hinting und Subpixel Rendering sind wichtige Methoden um die Darstellung und die Leserlichkeit einer Schrift zu ver-bessern. Außerdem gibt es viele verschiedene Schrift-formate, welche benutzt werden, um die Browserei-genarten zu umgehen. Diese verschiedenen Formate haben alle ihre Besonderheiten und Eigenschaften. Einer der Gründe für die vielen Schriftformate und keinem einheitlichen Standard ist die Schwierigkeit der Schriftlizensierung. Während einige Foundries die Benutzung ihrer Schriften im Web erlauben, ver-bieten es andere wiederum strikt. Seit der Wiederein-führung der @font-face Regel 2009 wurde viele Un-ternehmen gegründet die Schriften vertreiben oder/und hosten. Diese Unternehmen werden als Webfont Services bezeichnet. Jeder dieser Services versucht, spezielle Angebote zu Verfügung zu stellen um mehr Kunden zu bekommen. Mit der Einführung des iPad3 von Apple wurden die hochauflösenden Displays re-volutioniert. Neben dem Retina Display, welches auch iPhone4 und iPhone4S besitzen, hat das iPad3 zusätzlich eine noch nie dagewesene Auflösung. Die-se hochauflösenden Displays haben besondere Ei-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.

6

IntroductionIn the past the situation with typography on the

web was described ‚like a desert’ by David Wurtz, Product manager from Google. There weren’t a lot of possibilities to use type on the WWW. Of course, there were ugly workarounds like images or flash plugins, but these workarounds brought along some 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. Furthermore, the text is not zoomable. The problem with flash is obvious – the users have to install a plu-gin in their browser. In consideration of the fact that every website has at the maximum 10 seconds to con-vince the user to stay, the effort to install a new plugin will be too big for the average user1. Additionally, the future of the WWW shows a trend to mobile devices and in large part of them flash is not supported and won’t be in the future.2

With the reintroduction of the @font-face rule in 2009 the latest browsers started to support the rule and enable to embed theoretically every font you 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-lain these points in detail: the different font file for-mats, font hosting, browser quirks and licensing. This thesis tries to answer if there already exists a webfont standard or if there will be one in the near future. To understand the following work the next chapter is about the most important terms.

1 Nielsen, „How Long Do Users Stay on Web Pages?“. 2 Google I/O 2011. 02:20 - 04:40

The most important terms

Webfonts 1.0In the early 90s Microsoft and other companies

introduced and designed a few web save fonts, inclu-ding Veranda and Georgia. These fonts were espe-cially created and improved for the web. Unfortuna-tely the web designer was very limited in typography at that time. Furthermore these web-save fonts must be installed on the user’s system. There are some dif-ferences between Mac, Windows and other operating Systems. A list of web-save fonts: 3

most safe

Arial/Helvetica Times New Roman/Times Courier New/Courier

Windows/Macintosh

Arial Black Comic Sans Georgia Trebuchet Verdana Lucida Grande/Lucida Sans Tahoma

cross platform

Palatino Garamond Bookman Avant Gard

3 Lupton, Thinking with type a critical guide for designers, writers, editors, & students. p.72

7

Webfonts 2.0Webfonts are all kind of fonts which can be em-

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 only been a draft, there are also other font formats that can be used as webfonts. The WebFont working draft includes the client-side font matching, font syn-thesis; progressive rendering is enabled and fonts can be downloaded from the web. Every user agent has a “font database”. The new CSS model allows the de-veloper to append his own settings to the font. The user agent finds the font that fits best and gets the font from a local system or via the web.4

AntialiasingOn the screen fonts are displayed with pixels.

Therefore the font does not look perfect because pi-xels cannot exactly display the outline curves of a font. The smaller a font is displayed the worse the re-sult will be because there are fewer pixels to produce the font. Therefore for screen design the size of the body copy should not be less than 12 pt. Furthermo-re anti-aliasing improves the digital font essentially. Anti-aliasing is a way to provide stairway effects at a font with using colour gradients at the edges of the letterforms. The gradients reach from the font-colour to the background-colour. The font then looks much smoother.5

HintingA digital font is usually defined in mathematical

outlines which can be rotated and moved freely. On a webpage these outlines must be rasterized, which means that the lines have to be converted into the pi-xels of the resolution of the device. In case of small displays or low resolutions these pixels do not fit very well into the mathematical outlines and so the font will look very imperfect. Hinting means that there are some defined rules for the process of rasteriza-tion. A hinted font includes such rules (hints) as a part of font definition. 6 Hinting is the big issue with Windows, because Mac posses a good rendering en-ginge. Windows has a variety of rendering engines which means that the same font can look different on

4 „CSS3 module: Web Fonts“.5 Klanten, Der kleine Besserwisser, p.95.6 Bringhurst, The elements of typographic style. p.326

the same system but in other applications. Hinting is a way to align letterforms to the pixel grid and a key to get good type in windows.7

Type/font foundryA company which designs and/or distributes

typefaces, is called a type foundry. Under William Caxton London became the centre of press printing industry. At the same time type foundries were esta-blished. The service became especially important du-ring this time when education got amenable to all. In those days type foundries handled with wood or me-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 services.

Webfont servicesSince the re-introduction of the @font-face rule

a new market has opened. The idea for this market was offering fonts for web use, especially to support companies to improve their corporate identity on the WWW by providing them the core company fonts as web fonts. To offer popular and well-designed fonts, the webfont services often work together with well-known font foundries. The first big service to grab up this idea was Typekit in 2008, followed by many others.

Subpixel renderingA standard pixel of a monitor consists of 3 parts

called R, G and B. They are so small that the illusi-on appears that you only see one colour. These three parts of a pixel are called subpixel and the brightness of each can be set independently. Subpixel rendering takes advantage of this independency and uses it to improve the resolution. Rendering a type with sub-pixels creates better results than with standard ren-dering but the font may get colour fringes. Subpixel rendering isn’t easy to apply on all monitors because some of them changed the order of the RGB subpi-xels. Right subpixel rendering can triple the resolu-tion. 8

7 Zeldan, The big Web Show #1 - Web Fonts. 8 Smashing Magazine, Typography - Getting the Hang of Webtypography, p8-p10.

@font-faceIn 1994 Microsoft came up with the fi rst @font-

face proposal for CSS. At that time this suggestion was dismissed because of a lack of interest of the browser developers and too little support. In 2009 the @font-face rule was re-introduced and is now part of the W3C Working Draft for CSS Fonts Module Level 3. Th e actual draft only includes minor changes to the earlier version of Microsoft . Th e @font-face rule al-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 multiple font-face rules can be used.

@font-face {

font-family: ‘EconomicaRegular’;

src: url(‘../fonts/Economica-Regular-OTF-web-

font.ttf’’);

}

p { font-family: EconomicaRegular, sans-serif; }

Browser support

Unfortunately not every browser supports the same font-formats so you have to embed diff erent formats to display the website into all browsers. To get cross-browser support you have to convert your font-fi le in all necessary font-formats and then em-bed them in your CSS, including the format attribute. When the browsers then come to the @font-face spe-cifi cation they will take the format they support.

@font-face {

font-family: ‘EconomicaRegular’;

src: url(‘../fonts/Economica-Regular-OTF-web-

font.eot’) format(‘embedded-opentype’),

url(‘../fonts/Economica-Regular-OTF-web-

font.woff ’) format(‘woff ’),

url(‘../fonts/Economica-Regular-OTF-web-

font.ttf’) format(‘truetype’),

url(‘../fonts/Economica-Regular-OTF-web-

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

SAFARI 3.1 SAFARI 3.1 SAFARI 3.1

OPERA 10 OPERA 9 OPERA 11.01

IOS 4.2 IOS 11.01

2.2

N

W

S

E

NW

SW

SE

NE

E

N

E

NW

NE

Figure 1 -webfont formats browser support

8

9

The font format most browsers support is TTF follo-wed by SVG and WOFF, but SVG is not supported by any version of IE. For IE lower than v9 there is an own and only format that is supported called, EOT. Up to now only TTF has been supported by the most popular mobile browsers for iOS and Android.

IE difficulties @font-face

To name the browser which makes the most dif-ficulties – it is the Internet Explorer in versions 6, 7 and 8. The IE downloads all fonts that are described in the @font-face rule at the beginning. If there is more than one font embedded in the CSS the page-load time increases immensely. The other browser instead loads the fonts only when necessary. Further-more, the IE lower than v9 do not only take the for-

mat it supports, but downloads all other formats, too which, of course, also have a negative impact on the speed. To avoid IE downloading all formats, you have to add an interrogation mark or a hash to the EOT link so that the IE lower than v9 knows that its source ends there.

Another problem of the IE is its compatibility mode. It is possible to change the browser mode from your IE v8 browser to a virtual IE v7 browser called compatibility mode. If this mode is activated, your browser will come up with strange manners. An IE in compatibility mode ignores CSS if it does not know a special attribute in the specification which happens at the @font-face rule in position of the format attri-bute. To solve this problem you have to introduce a

second source attribute without the format specifica-tion. It is very important to add @font-face rules only if you really use the fonts because some browsers like the IE v6,v7,v8 load the font files, no matter if you use them or not. All these named bugs are fixed in IE v9.

Further attributes

Local

There are some further attributes that can be ad-ded to the @font-face rule but are not working well in all browsers. There is, for example, the local attribute, which makes it possible to load the font from the lo-cal System, if it is installed.

@font-face {

font-family: ‘EconomicaRegular’;

src: local (‘Economica-Regular.ttf’);

url(‘../fonts/Economica-Regular-OTF-web-

font.ttf’);

}

p { font-family: EconomicaRegular, sans-serif; }

The problem with the local attribute is the font-size. Often the fonts from font-foundries which are optimized for the web, have lower resolution. That means that the same font with the same given font-si-ze at CSS (12pt) looks different in the browser because the size depends on the initial font. While a local font

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; }

10

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

The local attribute is also buggy in Chrome and Mozilla and completely fails in IE v6-v8 and Android.

Font-size-adjust

This attribute is only available in Mozilla Firefox. It offers the possibility to adjust the x-height of the fallback font. So you can ensure if the font fails to load, at least the x-height of the alternative font is the same as the one of the preferred one. A requirement of this attribute is that you have to know the x-height of your font. Furthermore, up to now unfortunately this has only been possible in one browser.

Fallback

Every @font-face rule should include a fallback with at least one web-save font if the font-file fails to load. Here, too, some browsers have an odd bug. IE v8 and Opera for example cannot use the fallback font. Instead of the alternative font they display nothing. 9

9 „Jake Archibald | In your @font-face | Fron-teers 2011“.

Digital Font readability

Readability or legibility?

There was a large step between letters carved onto rocks or other ma-terials and digitalized words. Now we are using digital devices more than ever and read on them nearly daily. Recent studies have shown that if so-mething is hard to read it is hard to understand and to handle successful-ly. Therefore it is important to impro-ve the readability as much as possible on websites. Often the word legibility comes up in this context, but legibili-ty is an attribute which webdesigners cannot influence. Legibility depends on the type designer’s creation of the font, like the character shapes, stroke weight, axis and proportions. Howe-ver the readability can be influenced

by a webdesigner. He sets the type and can influence spacing, font-weight, size and context of use.10

SpacingA study shows that spacing is one of the most

important facts for display readability of separated words. Generally the default spacing is good for texts in body copy size (12 point), but for smaller sizes tests showed that a font is harder to read with the default 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 con-densed spacing. Moreover for bigger font sizes the spacing could be reduced for more efficient use of display space.

Another study shows that these findings also fit for longer text paragraphs, but unfortunately the tes-ted users felt more comfortable to read with default text size. 11

10 Suen u. a., „Evaluation of fonts for Digital Publishing and Display“, 1424–1426.11 Suen u. a., „Evaluation of fonts for Digital Publishing and Display“, 1430–1432.

“The local problem”So an embedded Zapfino at the size of 12pt might look like this:font gets the source from a webfont-service

@font-face

font gets the source from the additional local attribute

@font-face

11

Nowadays you can embed nearly every font on your website with the CSS3 @font-face feature so you have many more designing possibilities than before with only six web save fonts. Unfortunately not every browser supports the same font format. The 5 most important web font formats are: TrueType, Open Type, Embedded Open Type (EOT) and web Open Font Format (WOFF).

True TypeTrue Type replaced the bitmap fonts for the

screen in the late 1980s and was early adopted by Mi-crosoft as the standard system font because it offers a lot of fine-tuning possibilities for the screen. The True Type font was the alternative to Adobes Typ-1-Standard. 12 Type -1-Standard’s outlines consist of relationship curves and the True Type describes the outline with quadratic equation. The most important difference to the earlier developed PostScript font is that TrueType uses one format description for dis-play and print.13

Open TypeNext Microsoft and Adobe together developed

the Open Type font format based on the TrueType format which offers many typographical features. Open Type works on multiple platforms without ad-ditional software. An open type file supports up to 65,000 characters and includes multiple styles and variations. It is based on Unicode. That provides a big 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 numerals. In addition to that you can add characters from other languages in one font file. Unfortunately till now many browser do not really support this fea-ture in a satisfying way. There are two different kinds of Open Type font formats, one with TrueType Out-lines and one with PostScript Outlines. For the Web the one with True Type Outlines should be preferred, because this format supports subpixel rendering, this is why this format delivers better quality.

12 Smashing Magazine, Typography - Getting the Hang of Webtypography. p.162 - p.16613 Klanten, Der kleine Besserwisser, p. 92

EOTAlthough Microsoft was one of the Open Type

developers, the Internet Explorer does not support this format. Therefore there is a unique font format only supported by the IE, called EOT. It is a combina-tion of Open Type and True Type. EOT is a container 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 only Microsoft uses this format. On the one hand this font format is very compact and includes attri-butes that prevent fonts from unlicensed use, but on the other hand one browser only supports this font format, so it will not get the new Web font standard. The idea behind EOT is that the browser, in this case only IE, checks whether the font belongs to the web document or not. If not, the browser will ignore the font file and display a standard one.14

WOFF

Next there is a new font format under way – the Web Open Font Format, but until now it has just been a working draft from the W3C (World Wide Web Consortium). Font designers and browser develo-pers created this format together. WOFF includes a font compression and Meta data which can be added to every font file. These Meta data can include the li-censing of a font. Unfortunately up to now there has been no native browser feature which can check this meta file.

SVGThe last format that has to be mentioned is SVG.

SVG fonts are text files that include the outlines of the letters like vector objects. SVG fonts are usually very large and for that reason not good for online use but it is the only format that is supported by iPhone and iPad prior to iOS 4.2.

14 Bos, „Turning Sematics into Syntax“, p.6

Current webfont formats

12

Summing up, we can see that there are many dif-ferent aspects which you have to take into considera-tion 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

The End User License Agreement is a licence file every font included. This licence defines how and for which practice the end-user is allowed to apply the font.

Each font has an own EULA (End User License Agreement). Especially for web licensing this is dif-ficult because of two facts: licensing can’t be proven easily and a lot of designers don’t know when they are actually allowed to use the fonts on the Internet. A printing license isn’t the same as a web license.

A new approach in font licensing is the WOFF, which is a special case. WOFF is not a font-file alo-ne. It is a wrapper for a font (e.g. OpenType, TrueTy-pe) and a Meta file which includes information about the font licensing. This format allows checking the li-censing more easily. Furthermore it is not likely that somebody abuses these fonts because this format is developed for web use only, so it does not work like a system font and cannot be used as font for printing stuff. Unfortunately up to now there has been no au-tomatical browser checking for these meta data, and overall this font format is not supported by many ol-der browsers. Furthermore not all font-foundries al-low reproducing and using their fonts in WOFF. Ad-obe, for example, does not allow its customers to use their fonts in this file format. 15

15 „WOFF File Format 1.0“.

Linking or Embedding?One of the biggest problems is to under-

stand the difference between the permission to link and to embed a font on the Internet. Most of the fonts have a web embedding agreement. That means that the designer is allowed to embed the font in a file and this file is embedded on the website. So the designer is only allowed to use an image (which shows the font) or a flash file, but he is not allowed to link the font on the web page. So in most cases @font-face use is not allowed from the font-designer. Unless explicitly stated in the license.16

Webfont licensing is one of the most impor-tant reasons why it takes so long to get webfonts supported in all browsers. The problem is that a font, which is embedded in Websites, is easily re-producible because users have the possibility to get access to the whole source code. That means that you can download and reuse it easily for free, without having a licence. Therefore a lot of font-hosting services invest a lot of time and money to protect the fonts from abuse. Browser developers also tried to manage the font rights, but it never succeeded, because a browser cannot automati-cally check up the licensing. 17

16 Franz, Typographic web design. p.57 17 Zeldan, The big Web Show #1 - Web Fonts. 26:00 - 34:00

13

gIn the following chapter fi ve of the most popular web-font services will be analysed. It includes information about the business model, font hosting and numbers of off ered web fonts.

Google Webfontswww.google.com/webfonts

Numbers and factsGoogle 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 huge demand since the relaunch. In 2011 fonts were used on 1.29 million unique domains and, all in all, there are 110.000.000 font requests. Furthermore in 2011 they had a monthly growth of 30%.

David said that Google “want to be the web more impressive and fun” and for this reason they es-tablished the free web service Google webfonts. Th e keyword in the last sentence was “free” that mean that you do not have to pay any licensing to use the off ered fonts. You only have to name the font-desi-gner in your impressum. On the Google I/0 in 2011 David mentioned that one important future prospect is to keep the open source license.

ServiceGoogle hosts the webfonts for the users and

handles browser quirks. Th ey off er font updates, op-timization and quality improvement for free.

UsageUsing Google Webfonts is very easy. You select

you favourite font, include a snippet generated from 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.

Oft en it is important to use your favourite fonts in you prototypes. Th ere is no direct possibility to download the Google webfonts for prototyping but the company Type DNA off ers a standalone versi-on plus a plugin for the Adobe Creative Suite to use Google Webfonts directly in your layout.

Speed & FeaturesTo improve the loading speed of their webfonts

Google introduced a new mobile version of their font 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-dering quality of windows. In all IE versions lower than IE v9 the rendering of fonts isn’t very good. For that reason the Google web font source needs to in-clude a special metadata for Windows which pushes up the size of the font fi le. To reduce the amount of the transferred data Google omits the metadata in all other browsers, which is a big benefi t for the rela-tively low mobile broadband. Moreover it is possible to get multiple fonts in one request.

Furthermore Goole introduced a new parameter called ‘Text’. Th is parameter allows you to get only the needed characters from Google. Th at means if you only have one word on your website, which uses Google webfonts you don’t have to load all 252 cha-racters. So if you want to use the word ‘Hello’, you transform the link for the http request like this:

Webfont services

14

t

<link href=’http://fonts.googleapis.com/css?f

amily=Black+Ops+One&text=Hello’ rel=’stylesheet’

type=’text/css’>

Another important fact for speeding up font loa-ding is the maximal caching from Google. In eff ect that means if a user visits a website which is using Google fonts, the browser will automatically put the fonts into the browser cache. Th e next time a user vi-sits a site with the same Google font the browser does not make an http request, but it takes the font from the cache. Summing up, Raph Levien, engineer and font expert prospects for the future ‘the more popular it becomes the faster its gonna be.’

Font compressionGoogle Web fonts also do maximal font com-

pression. Th at means that they always use WOFF on modern browsers.18

Typekitwww.typekit.at

“Typekit myspace the world” – was a sentence Jeff rey Veen, senior director and founder of Typekit, loves most when people talk about his service. He totally agrees with this statement because MySpace gave people the opportunity to express themselves vi-sually, whether you like it or not. Th is is the same op-

18 Google I/O 2011.

portunity Jeff rey tries to enable designers and com-panies with Typekit.

Numbers and factsTypekit was the fi rst service which came up

with the external font embedding solution in 2008. Th ey brought in another business model. Th ey shift away from the asset sale to the service model. Th e two main goals at the establishment of Typekit were fi rstly to use the native web technology and secondly to make font embedding on websites easier for the designers to allow them to focus on the designing and typography process. Typekit got inspired and 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 is very similar. 19

In 2011 Adobe Systems Incorporated acquired Typekit. Now the service has over 250.000 customers including Th e New York Times and Twitter.

ServiceTypekit hosts the chosen fonts on their servers.

Th ey off er the right font format for every browser and device. Typekit also off ers fallback methods for browser (e.g everything lower than IE9), which does not support Webfonts. Fonts get updated regularly on the server. Furthermore the fonts get re-hinted and adjusted from the cooperation Foundry FontFont which has a warehouse of employees to hint fonts for Typekit. Th is newer version then gets updated on the server.

19 Zeldan, The big Web Show #1 - Web Fonts.

Figure 2 - typekitEditor

15f15f15

UsageAt Typekit you buy a subscription to get access

to an online font library. Depending on the number of used fonts and the page views per month you have to pay an annual fee to get access to the whole library. Aft er creating an account you can choose nearly eve-ry 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 Sheet with the font-family specifi cation and the cor-responding font name. Furthermore you can custo-mize your font properties, like the font-weight.

#header{

font-family: proxima-nova, sans-serif;

font-weight: 900;

}

Another possibility is to add the CSS selectors directly to your online typekit on the website. If you do so, you do not have to add any CSS to your own stylesheet. Th at means that every customization on your font can be done through your stylesheet or di-rectly through the Typekit online editor.20

Speed & FeaturesInstead of all other font-embedding-services Ty-

pekit is the only one that uses Javascript to embed the font. Th e reason why they do not choose pure CSS is easy. Th ey do not want to recreate the own code again and again, because since the re-introduction of @font-face in 2009 there were have been changes of syntax and many diff erent font formats that must be off ered. Instead of handling CSS they decided to 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-ans that Typekit only has to send one requested font format which is a big advantage on speed.

Another advantage this lightweight Javascript provides is the possibility of font events. Webbrow-sers do not off er any own method for detecting the status of font load. Th erefore Typekit introduces the font events which allows decelerating Fallback fonts, if the browser cannot load the requested font, for whatever reason.

20 „Using Typekit fonts in your own CSS“.

Using Javascript for embedding has not only one reason, there are a couple of things, which justify JavaScript, like browser quirks, reliability and consis-tency.21

Fontsquirrel and Frontspring www.fontsquirrel.com www.fontspring.com

Th e reason why I named these very diff erent 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 the establishment was the absence of free high qua-lity fonts on the WWW. Before foundation Ethan Dunham had already worked as a font designer for 15 years. Th e focus on fontsquirrel is to off er a few free high quality fonts and not unlimited range of low 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 whatever you want. Some of his fonts are on Google Web fonts, too, like the Open Sans.22 In February 2010 Ethan Dunham then established another well-known font-service website, called fontspring. On this web-site he wanted to apply what he learned about selling his own fonts to selling others fonts. Mr Dunham be-lieved that renting a font is not as satisfying as buying, installing an own a font. At fontspring the designer has the control of the font.23 Now Fontspring off ers up to 3,860 diff erent font families.

ServiceAt fontspring and fontsquirell you download the

font once in diff erent formats and can use it for eve-rything you want for unlimited domain numbers. At fontspring you have to pay once, and then you own the font. Prices are from 0 - 130 . Th e fonts are all auto-hinted. 21 „Better web font loading with JavaScript“.22 „Episode 58 – Font Squirrel / Ethan Dun-ham – The Web 2.0 Show“.23 „Interview with Ethan Dunham of Fonts-quirrel and Fontspring | The Bright Lines“

16w16w16

UsageAt fontsquirrel you have the possibility to down-

load your font once, and then create your own @font-face. Furthermore fontsquirrel off ers a @font-face ge-nerator. Th ere you can upload a font you have legally acquired, and fontsquirrel generates you a basic, op-timal or expert version. At the latter you can customi-ze a lot of things, like the rendering, hinting, CSS or the produced font formats. Usually the optimal ver-sion fi ts for a normal website implementation. If you 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 diff erent sizes. So you only have to adopt the font-face to your stylesheet.

At fontspring you have to create a new account and then you can start buying fonts. If you choose a font, you can download a version with the right lan-guage set. You get a folder with the licence agreement, the desktop version of the font, a folder full of web-font formats and one demo HTML and CSS fi le.

Speed & FeaturesTh ere is no method to measure the speed of font

loading because it depends on the server. In the case of fontsquirrel and fontspring you have to host your fonts on your own server so the speed depends on your server settings. So furthermore the font-loading speed cannot be improved.24

Webtypewww.webtype.com

Numbers and FactsWebtype was established in August 2010 from

the Font Bureau, Inc. and Ascencer Corporation Petr van Blokland, DevBridge and Roger Black a popular art director. Some experts from Ascender Coporati-on already worked on the web-safe fonts 1.0, we re-lied on in the past. Th e reason for establishing a new font-embedding service was the aim to deliver great

24 „Web fonts and desktop fonts | Fontspring“; „Font Squirrel | Handpicked free fonts for graphic designers with commercial-use licenses.“

quality fonts for all platforms, with very good legibi-lity. Webtype tries to get only as good readable fonts as Georgia. Th erefore Roger Black mentioned that he wants to apply some rules from printing to web. So typefaces, which are good readable at very small sizes at old newspapers must be good as webfonts. So the company not only created new typefaces, they also took old easy to read typefaces and optimize them for web use.25 Now Webtype off ers about 70 diff erent font-families with up to 28 diff erent styles off ered from 4 font-foundries.

ServiceYou only pay for the webfonts you really need

and for the number of page views. Unfortunately you do not see the price if you chose your font. Only on the way to check out you can see the price which changes if you modify the number of page views and the kind of hosting. Th ere is also a 30-day free tri-al version for every font available but restricted to monthly page views of 250.000. You have to pay for the desired fonts annually.

UsageFirst you have to choose your favourite font. Re-

ally helpful is the option to sort the font aft er inten-ded size. So if you search for a body copy font you can choose the option small (9px-14px). Th e off ered 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 have to setup a new project online with your domain and Webtype creates a snippet of code, which you have to paste to your HTML fi le. Th en you are able to use the bought font in your CSS.

Speed & FeaturesLike all other webfont services WebType also

off ers server updates with newer font versions auto-matically. Furthermore all browsers, including the mobile ones get supported. Moreover they off er legal use of webfonts and security of abuse for designers. Th e 30-days trial version gives the web developers the possibility to test every font in real-world settings. 26

25 „5by5 | The Big Web Show #18: Roger Black on Web Type and Templates“..26 „Webtype“.

17

Reading Edge

Reading Edge is a font series only available on WebType. It consists out of fi ve font families which styles correspond to existing print typefaces from Font Bureau but they are totally newly adjusted for web. Th ey are very highly readable on screen.

Hinting

Every font has been carefully hinted at Webty-pe. Th ere is no auto-hinting setting that improves the quality of the off ered type immensely. Tom Rickner and experts at Ascender Corporation have hinted every font methodically. Th e font from Webtype ren-ders cleanly in all browsers.27

27 „Font Bureau Blog | Webtype Launched by Partnership of Experts“.

ExperimentTh e introduction of the high-resolution mobile

devices has changed a lot. With the new Retina Dis-play of the iPad3, the resolution went up to 2048 × 1536 pixels. Th at is more than an average LCD Moni-tor has, but at the size of 10 inch. Expert Web designer Dave Shea explained why this high resolution could be a problem when using images. All pictures we save for web and put on a website will look like a ‚pixela-ted clip art’, because oft he high resolution. Th erefore Text must be ‘real’ Text on a high-resolution display. Th at means no images for heading, or buttons. 28 Even on a retina display of the iPhone4 you can see every detail the following example shows:

I embedded the OpenSans Condensed from Google webfonts to a Website and tested the website on the iPad3, iPhone4 and the Safari under Mac with Lion.

header nav{

font-family: ‘Open Sans

Condensed’,’Helvetica’, sans-serif;

font-size:1.3em;

font-weight:bold;

}

28 „iPad 3 and Retina Screen: What it means for your mobile commerce site | Mobify“

Infl uence of high-resolution displays for web font services

Figure 3 - iPhone4

18

FindingsThe experiment shows that the same font looks

good in Safari on Desktop version and looks awful on the iPhone and on the iPad. It seems like the outlines of the fonts are doubled. First of all, I absolutely did not know why the same font with the same stylesheet seemed to be completely different on another device. After a few tests I found out that the problem was the font-weight attribute in combination with the high-

resolution display. I tried to replace the bold value with a number (900), but it didn’t change anything. On the normal LCD display on my laptop the resolu-tion is too low to recognize that the web browser du-plicates the outline instead of creating a real bold font. By deleting the font-weight the displaying works fine.

ResultThis means that web designers have to reconsider

their way of designing. Using normal font-weights does not achieve good results on the high-resolution mobile devices. That means if you want to have a bold style, you will have to offer the right font-file on the server. It is not enough to buy or download one free font and use this for the web with different styles via CSS. So the developers are forced to get all different styles via @font-face or font-hosting services.

To develop right for mobile high-resolution displays many facts must be taken into considerati-on, and if you decide to host your font by yourself, you will have to do all the maintenances on your own, and you do not get regular font updates. Therefore I think that the introduction of the high-resolution displays, the web-font services, which offer font hos-ting, will take an advantage out of this, because this is

the easiest way to implement the desired fonts. Even for headings or small parts then you cannot use ima-ges anymore – because of the too low resolution of the pictures the font looks very pixelated in compari-son to the real embedded font (Figure 5). The possibi-lity to save the pictures of a font in a higher resolution 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.

Roger Black from WebType mentioned that mo-bile devices with retina displays would be a key for readability because you then can make pages smaller, without loosing readability. So on a high-resolution display it is possible to read even small font sizes very well. That would be of advantages to the user because readers of webpages want to scan a paragraph and not read letter by letter. So these high-resolution dis-plays can be optimized for scanability.29

29 „5by5 | The Big Web Show #18: Roger Black

Figure 4 - Desktop browser

19

Conclusion

As the thesis shows the typography of the web is becoming more and more important. Over the past years many webdesigners were no typographers because they only had to handle with a few webs-ave fonts and so had used some workarounds to get other fonts into the website, like images or fl ash. Th e webfont specifi cation and the web font services to-gether gave webdesigners the opportunity to become typographical web designers. To focus on readability 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 typogra-phic 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

Future prospects

Th e cooperation of font foundries and all brow-ser companies with the W3C working group plus re-defi ning the uniform WOFF fi le with a licensing mo-del will make it possible to get a webfont standard within the next few years. Th erefore it is important that browsers start to check licenses from WOFF fi les automatically to give the font foundries the security of font abuse. In this way everything could turnout well, providing that every webdesigner adopts typo-graphic skills.

Figure 5 - real font/image comparison

iPad iPad Desktop Browser (Safari ..)

20

ReferencesArchibald, Jake. „In your @font-face | Fronteers

2011“. Vimeo, o. J. http://vimeo.com/33154573. Zugriff: 2012-05-26 12:07:52

„5by5 | The Big Web Show #18: Roger Black on Web Type and Templates“, o. J. http://5by5.tv/big-webshow/18. Zugriff: 2012-05-26 16:06:46

„Better web font loading with JavaScript“. The Typekit Blog, o. J. http://blog.typekit.com/2011/08/11/better-web-font-loading-with-javascript/. Zugriff: 2012-05-25 12:09:48

Bos, Bert. „Turning Sematics into Syntax“, Februar 1, 2009.

Bringhurst, Robert. The elements of typographic sty-le : verson 3.2. Point Roberts, Wash: Hartley & Marks, Publishers, 2008.

„CSS3 module: Web Fonts“, o. J. http://www.w3.org/TR/2002/WD-css3-webfonts-20020802/. Zugriff: 2012-05-26 18:07:25

„Episode 58 – Font Squirrel / Ethan Dunham – The Web 2.0 Show“, o. J. http://web20show.com/2009/11/episode-58-font-squirrel/. Zugriff: 2012-05-25 12:53:29

„Font Bureau Blog | Webtype Launched by Partner-ship of Experts“, o. J. http://www.fontbureau.com/blog/webtype-launched-partnership-experts/. Zugriff: 2012-05-26 16:05:47

„Font Squirrel | Handpicked free fonts for graphic designers with commercial-use licenses.“, o. J. http://www.fontsquirrel.com/. Zugriff: 2012-05-25 13:24:37

Franz, Laura. Typographic web design : how to think like a typographer in HTML and CSS. Chi-chester, West Sussex: Wiley, 2012.

Google I/O 2011: Web Fonts are changing the Web. Learn why, 2011. http://www.youtube.com/watch?v=QTX1lU97z08&feature=youtube_gdata_player.

„Interview with Ethan Dunham of Fontsquirrel and Fontspring | The Bright Lines“, o. J. http://www.thebrightlines.com/2010/04/18/inter-view-with-ethan-dunham-of-fontsquirrel-and-fontspring/. Zugriff: 2012-05-25 12:54:03

„iPad 3 and Retina Screen: What it means for your mobile commerce site | Mobify“, o. J. http://www.mobify.com/blog/ipad-3-and-retina-screen-what-it-means-for-your-mobile-commerce-site/. Zugriff: 2012-05-26 18:40:54

Klanten, Robert. Der kleine Besserwisser : Grund-wissen für Gestalter. Berlin: Die-Gestalten-Verl., 2007.

Lupton, Ellen. Thinking with type a critical guide for designers, writers, editors, & students. New York: Princeton Architectural Press, 2010.

Nielsen, Jakob. „How Long Do Users Stay on Web Pages?“, o. J. http://www.useit.com/alertbox/page-abandonment-time.html. Zugriff: 2012-06-11 11:12:12

Smashing Magazine, Hrsg. Typography - Getting the Hang of Webtypography. Freiburg, Germa-ny: Smashing Media GmbH, 2011.

Suen, C.Y, N. Dumont, M. Dyson, Y.-C. Tai, und X. Lu. „Evaluation of fonts for Digital Publi-shing and Display“. E.ICST, Peking Universi-ty, China, 2011.

„Using Typekit fonts in your own CSS“. The Ty-pekit Blog, o. J. http://blog.typekit.com/2011/06/29/using-typekit-fonts-in-your-own-css/. Zugriff: 2012-05-25 10:53:12

„Web fonts and desktop fonts | Fontspring“, o. J. htt-ps://www.fontspring.com/.

„Webtype“, o. J. http://www.webtype.com/. Zugriff: 2012-05-26 16:06:24

„WOFF File Format 1.0“, o. J. http://www.w3.org/TR/WOFF/. Zugriff: 2012-05-25 12:27:05

Zeldan, Jeffrey. The big Web Show #1 - Web Fonts, 2010. http://5by5.tv/bigwebshow/1. Zugriff: 2012-05-25 10:53:12

21

Additional literatureHuang, 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

22

Table of Figures

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