Webfonts: The Hype about Type

1

Memi Beltrame: Webfonts – The Hype about Type

Webfonts

The Hype about Type

April 6th 2010

2


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

3


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

machines.

4


This means only fonts distributed with the OS.

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

5


Helvetica on Macintosh

Arial on Windows

vs.

6


Alternative: Download the font from the server!

7


Alternative: Download the font from the server!

CSS 2@font-face {

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

format("truetype"); }

8


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


2 Problems

• DRM• Browsers

10


DRM

11


DRMDesigners rely on good fonts

12



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

13



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

14




These want money for their use

15




These want money for their use

DRM

16


DRM Solutions

1. Web Font Services

17


DRM Solutions


Foundries:Linotype

Monotype

18


DRM Solutions


Font-Service:Typekit

TypothequeFontdeck

Foundries:Linotype

Monotype

Licence to

19


DRM Solutions


Font-Service:Typekit

TypothequeFontdeck

Foundries:Linotype

Monotype

Licence to

Domain 1Domain 1 Domain 2

Licence to you

20


Typekit

- Sign up

21


Typekit

- Sign up- Choose type of account

22


Typekit

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

23


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


DRM Solutions

2. Open Fonts

25


DRM Solutions

2. Open Fontshttp://openfontlibrary.org/

26


DRM Solutions

2. Open FontsOpen Font Library: - Ensures open licencing

(public domain, SIL Open Font Licence)

27


DRM Solutions


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

28


DRM Solutions


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

Is no guarantee for professional fonts

29


Browsers

30


BrowsersInternet Explorer only understands EOT

31



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

32



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


Browsers

Formats for Non-IE Browsers

34


BrowsersThe Format Names:

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

35


Browsers

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

36


Browsers

Problems with ttf: - Mozilla support is new

- Chrome disables it by default

37


Browsers

Problems with otf: - Mozilla support is new

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

38


Browsers

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

39


BrowsersSVG : W3C recommendation

Implementation:

Source:

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

40


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

41


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

42


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

43


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


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


WOFFIncludes optional metadata

46



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

47



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

Font usage can be monitored but not completely restricted

48


WOFFFirefox: - default same-origin restriction

49


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

50


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

51


So why this sudden font hype?

52



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

53



Font-services make designers and type foundries happy

54



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

With Microsoft on board.

55


Read more:

http://delicious.com/plonk/webfonts

56


Thank you!memibeltrame.ch

twitter.com/bratwurstkomet

More presentations:slideshare.net/memibeltrame

liip.ch

Date post:	28-Jan-2015
Category:	Design
Upload:	memi-beltrame
View:	106 times
Download:	0 times