webfonts: the hype about type

1

Memi Beltrame: Webfonts – The Hype about Type

Webfonts

The Hype about Type

April 6th 2010

2

Memi Beltrame: Webfonts – The Hype about Type

How can designers make use of the rich variety of fonts on websites?

3

Memi Beltrame: Webfonts – The Hype about Type

So far designers were limited to the fonts available on the user's

machines.

4

Memi Beltrame: Webfonts – The Hype about Type

This means only fonts distributed with the OS.

font-family: Georgia, "Times New Roman", serif;

5

Memi Beltrame: Webfonts – The Hype about Type

Helvetica on Macintosh

Arial on Windows

vs.

6

Memi Beltrame: Webfonts – The Hype about Type

Alternative: Download the font from the server!

7

Memi Beltrame: Webfonts – The Hype about Type

Alternative: Download the font from the server!

CSS 2@font-face {

src: local("Alabama Italic"),url(http://fonts.org/alabama-italic)

format("truetype"); }

8

Memi Beltrame: Webfonts – The Hype about Type

Alternative: Download the font from server!

CSS 2 Dropped in CSS 2.1@font-face {

src: local("Alabama Italic"),url(http://fonts.org/alabama-italic)

format("truetype"); }

9

Memi Beltrame: Webfonts – The Hype about Type

2 Problems

• DRM• Browsers

10

Memi Beltrame: Webfonts – The Hype about Type

DRM

11

Memi Beltrame: Webfonts – The Hype about Type

DRMDesigners rely on good fonts

12

Memi Beltrame: Webfonts – The Hype about Type

DRMDesigners rely on good fonts

These have variations & dîàçrìtïcs

13

Memi Beltrame: Webfonts – The Hype about Type

DRMDesigners rely on good fonts

These have variations & dîàçrìtïcsGood fonts come from type foundries

14

Memi Beltrame: Webfonts – The Hype about Type

DRMDesigners rely on good fonts

These have variations & dîàçrìtïcsGood fonts come from type foundries

These want money for their use

15

Memi Beltrame: Webfonts – The Hype about Type

DRMDesigners rely on good fonts

These have variations & dîàçrìtïcsGood fonts come from type foundries

These want money for their use

DRM

16

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

1. Web Font Services

17

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

1. Web Font Services

Foundries:Linotype

Monotype

18

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

1. Web Font Services

Font-Service:Typekit

TypothequeFontdeck

Foundries:Linotype

Monotype

Licence to

19

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

1. Web Font Services

Font-Service:Typekit

TypothequeFontdeck

Foundries:Linotype

Monotype

Licence to

Domain 1Domain 1 Domain 2

Licence to you

20

Memi Beltrame: Webfonts – The Hype about Type

Typekit

- Sign up

21

Memi Beltrame: Webfonts – The Hype about Type

Typekit

- Sign up- Choose type of account

22

Memi Beltrame: Webfonts – The Hype about Type

Typekit

- Sign up- Choose type of account- Choose font(s)

23

Memi Beltrame: Webfonts – The Hype about Type

Typekit

<script type="text/javascript"

src="http://use.typekit.com/cyq6gmy.js"></script>

<script type="text/javascript">try{Typekit.load();}catch(e){}

</script>

Unique identifer

- Sign up- Choose type of account- Choose font(s)- Embed markup

24

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

2. Open Fonts

25

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

2. Open Fontshttp://openfontlibrary.org/

26

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

2. Open FontsOpen Font Library: - Ensures open licencing

(public domain, SIL Open Font Licence)

27

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

2. Open FontsOpen Font Library: - Ensures open licencing

(public domain, SIL Open Font Licence) - Ensures a certain standard in fonts

28

Memi Beltrame: Webfonts – The Hype about Type

DRM Solutions

2. Open FontsOpen Font Library: - Ensures open licencing

(public domain, SIL Open Font Licence) - Ensures a certain standard in fonts

Is no guarantee for professional fonts

29

Memi Beltrame: Webfonts – The Hype about Type

Browsers

30

Memi Beltrame: Webfonts – The Hype about Type

BrowsersInternet Explorer only understands EOT

31

Memi Beltrame: Webfonts – The Hype about Type

BrowsersInternet Explorer only understands EOT

No TTF, OTF, SVG, WOFF (new!)

32

Memi Beltrame: Webfonts – The Hype about Type

BrowsersInternet Explorer only understands EOT

No TTF, OTF, SVG, WOFF (new!)

@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot');

src: local('Graublau Web Regular'), local('Graublau Web'),

url('GraublauWeb.otf') format('opentype');}

YES IT'S A HACK!

33

Memi Beltrame: Webfonts – The Hype about Type

Browsers

Formats for Non-IE Browsers

34

Memi Beltrame: Webfonts – The Hype about Type

BrowsersThe Format Names:

SVG – Scalable Vector GraphicsTTF - True Type FontsOTF – Open Type FormatWOFF - Web Open Font Format

35

Memi Beltrame: Webfonts – The Hype about Type

Browsers

For an in-depth analysis cf http://liip.to/fontEngineComparison

36

Memi Beltrame: Webfonts – The Hype about Type

Browsers

Problems with ttf: - Mozilla support is new

- Chrome disables it by default

37

Memi Beltrame: Webfonts – The Hype about Type

Browsers

Problems with otf: - Mozilla support is new

- No Chrome support- doesn't render nicely on Windows

38

Memi Beltrame: Webfonts – The Hype about Type

Browsers

Problems with svg: - Mozilla does not support it, at least not very well

39

Memi Beltrame: Webfonts – The Hype about Type

BrowsersSVG : W3C recommendation

Implementation:

Source:

http://de.wikipedia.org/wiki/Svg

40

Memi Beltrame: Webfonts – The Hype about Type

WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF

41

Memi Beltrame: Webfonts – The Hype about Type

WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly

42

Memi Beltrame: Webfonts – The Hype about Type

WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF

43

Memi Beltrame: Webfonts – The Hype about Type

WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9

44

Memi Beltrame: Webfonts – The Hype about Type

WOFFWOFF - Web Open Font Format - a Wrapper for SVG, TTF, OTF - compressed losslessly - FF 3.6 frst browser shipping WOFF - MS 'considers' support in IE 9 - is backed by type foundries

45

Memi Beltrame: Webfonts – The Hype about Type

WOFFIncludes optional metadata

46

Memi Beltrame: Webfonts – The Hype about Type

WOFFIncludes optional metadata

Vendors can tag their fonts with information related to font usage.

47

Memi Beltrame: Webfonts – The Hype about Type

WOFFIncludes optional metadata

Vendors can tag their fonts with information related to font usage.

Font usage can be monitored but not completely restricted

48

Memi Beltrame: Webfonts – The Hype about Type

WOFFFirefox: - default same-origin restriction

49

Memi Beltrame: Webfonts – The Hype about Type

WOFFFirefox: - default same-origin restriction - only loads WOFF from the same domain

50

Memi Beltrame: Webfonts – The Hype about Type

WOFFFirefox: - default same-origin restriction - only loads WOFF from the same domain - makes font-vendors happy!

51

Memi Beltrame: Webfonts – The Hype about Type

So why this sudden font hype?

52

Memi Beltrame: Webfonts – The Hype about Type

So why this sudden font hype?

Implementation of the @font-face directive gained signifcant speed.

53

Memi Beltrame: Webfonts – The Hype about Type

So why this sudden font hype?

Font-services make designers and type foundries happy

54

Memi Beltrame: Webfonts – The Hype about Type

So why this sudden font hype?

WOFF may become the new standard for fonts on the web.

With Microsoft on board.

55

Memi Beltrame: Webfonts – The Hype about Type

Read more:

http://delicious.com/plonk/webfonts

56

Memi Beltrame: Webfonts – The Hype about Type

Thank you!memibeltrame.ch

twitter.com/bratwurstkomet

More presentations:slideshare.net/memibeltrame

liip.ch