webfonts: the hype about type
DESCRIPTION
So far designers were limited to the fonts available on the user's machines. All of a sudden New possibilities seem to open up.TRANSCRIPT
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