webfonts in der praxis - teil 2 - beispielfont lobster
DESCRIPTION
Presentation 10/2010 in cologne PDF-file not accessible.TRANSCRIPT
Webfonts in der Praxis Teil 2: Beispielfont - Lobster
Sylvia Egger
2 Quelle: The Lobster Font – das Orginal
Webfonts abhängig von Rendering Engine
Core Text (Mac) GDI und GDI+ (Windows XP, Vista, Windows 7) Direct Write (Windows Vista, Windows 7)
Browser systemabhängig (Rendering Engine) Browserabhängig (IE 7, 8, 9, FF 4)
Font-Hosting-Service Jeder Service optimiert anders
Font Optimierung für Webdarstellung
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 3
Webfonts im Browser
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 4
Webfonts im Browser
Browser .TTF .OTF .EOT .WOFF .SVG
Internet Explorer X IE 9
Firefox X X X
Chrome X X X
Safari / Webkit X X Webkit Nightly iPhone, iPad
Opera X X ? X
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 5
WOFF (Web Open Font Format) is a font format, based on the sfnt file structure (used in TrueType and OpenType fonts) and specifically designed for web use with the @font-face declaration. (...)
A WOFF font font is a repackaged version of a TrueType or OpenType font in a compressed form. The font format also allows metadata and private-use data to be included separately from the font data.
Quelle: WOFF – Webfonts.info
6 Screenshot: Font Squirrel @FONT-FACE GENERATOR
Bulletproof @font-face: Smiley variation @font-face {
font-family: 'Lobster ‘; src: url('Lobster_1.3-webfont.eot'); src: local('☺'), url('Lobster_1.3-webfont.woff') format('woff'), url('Lobster_1.3-webfont.ttf') format('truetype'), url('Lobster_1.3-webfont.svg#webfontLUQA99mS') format('svg');
} h1 {
font-family: 'Lobster', Arial, sans-serif; font-weight: normal; font-style: normal;
} Quelle: Paul Irish
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 7
Rendering Engine und Browser
Am Beispiel: Font Lobster
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 8
Core Text (Mac)
Lobster .ttf
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 9
10 Screenshot: Lobster Mac .ttf (Safari, FF, Chrome, Opera)
Core Text am Mac seit Mac 10.4, generell ab 10.5 Leopard iPad browserübergreifend gleich Browserabhängig (Font-Features)
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 11
GDI (Windows 7, Vista, XP)
Lobster (.eot, .ttf)
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 12
13 Screenshot: Lobster Windows XP .eot (IE 6 mit aktiviertem ClearType)
14 Screenshot: Lobster Windows XP .ttf (FF 3 mit aktiviertem ClearType)
GDI und GDI+ Windows XP, Vista, 7 ClearType aktiv / nicht aktiv
Systemintern Als Browseroption (ab IE 7) IE 8 kann ClearType systemweit überschreiben
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 15
Quelle: Screenshot Windows 7 ClearType aktivieren
Direct Write (Windows 7, Vista)
Lobster (.eot, .ttf, .woff)
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 16
17 Screenshot: Lobster Window 7 (IE 9 mit aktiviertem ClearType)
18 Screenshot: Lobster Window 7 (Firefox 4 mit aktiviertem ClearType)
19 Screenshot: Lobster Window 7 (Chrome mit aktiviertem ClearType)
20 Screenshot: Lobster Window 7 (Safari mit aktiviertem ClearType)
Direct Write Windows Vista, 7 ClearType aktiv / nicht aktiv
Systemintern Als Browseroption (IE)
Browserunterstützung: IE 9 Firefox 4 Chrome nächste Version
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 21
Quelle: Screenshot Windows 7 IE 9 Option ClearType aktivieren
Direct Write und Hardware-Beschleunigung
Kombination mit Hardware- Beschleunigung – buggy
sowohl im IE9 & FF 4 Man sollte auf die finale Version warten
Evt. muss man beide Optionen testen
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 22
Quelle: Screenshot Firefox 4 Option hardware accelerartion
Quelle: Screenshot IE 9 Option Softwarerendering
Webfonts testen: Mac: alle oder nur einen
Firefox 4 für spezielle Font-Features
IE 9 mit aktiviertem ClearType Hardware-Beschleunigung an/aus
Firefox 4 Hardware-Beschleunigung an/aus Für spezielle Font-Features
IE 8 mit aktiviertem ClearType IE 6 mit aktiviertem Standard-Anti-Antialising
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 23
Windows und ClearType
System ClearType (default)
Windows XP off
Windows Vista on
Windows 7 on
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 24
Browser ClearType option (default)
Internet Explorer 7 on (even not enabled in OS)
Internet Explorer 8 on (overrules OS settings)
Internet Explorer 9 on (overrules OS settings)
Font-Hosting-Services
Ein Vergleich anhand der Beispielfont Lobster
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 25
Google vs. Typekit
Lobster
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 26
Google vs. Typekit
Mac Lobster
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 27
28 Screenshot: Google hosted Font Lobster Mac, Typekit Lobster (Safari)
29 Screenshot: Google hosted Font Lobster Mac (Firefox)
30 Screenshot: Google hosted Font Lobster Mac (Opera)
31 Screenshot: Google hosted Font Lobster Mac (Comparison Safari Firefox (above))
32 Screenshot: Google hosted Font Lobster Mac (Comparison Safari Opera (above))
33 Screenshot: Google hosted Font Lobster Mac and Typekit Lobster (Comparison Opera)
34 Screenshot: Google hosted Font Lobster Mac and Typekit Lobster (Comparison Firefox)
Google vs. Typekit
Lobster Windows
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 35
36 Screenshot: Google Lobster, Typekit Lobster Window 7 (IE 9)
37 Screenshot: Google Lobster Window 7 (Firefox 4)
38 Screenshot: Google Lobster, Typekit Lobster Window 7 (Chrome)
39 Screenshot: Google Lobster, Typekit Lobster Window 7 (Safari)
40 Screenshot: Google Lobster, Typekit Lobster Window 7 (Opera)
41 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Firefox 4)
42 Screenshot: Typekit Lobster Window 7 (Comparison IE 9 and Firefox 4)
43 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Chrome)
44 Screenshot: Google Lobster Window 7 (Comparison IE 9 and Opera)
45 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Safari)
46 Screenshot: Google Lobster Window 7 (Comparison Firefox 4 and Safari)
47 Screenshot: Google Lobster Window 7 (Comparision Firefox 4 and Chrome)
48 Screenshot: Google Lobster Window 7 (Comparision Firefox 4 and Opera)
Google & Typekit
Comparison Lobster Mac and Windows
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 49
50 Screenshot: Google Lobster, Typekit Lobster Windows 7 und Mac (Safari)
51 Screenshot: Google Lobster, Typekit Lobster Windows 7 und Mac (Chrome)
52 Screenshot: Google Lobster, Typekit Lobster Windows 7 und Mac (Opera)
53 Screenshot: Google Lobster Windows 7 und Mac (FF 3 Mac, FF 4 Win)
54 Screenshot: Typekit Lobster Windows 7 und Mac (FF 3 Mac, FF 4 Win)
55 Screenshot: Font Squirrel Kit, Google Lobster, Typekit Lobster Windows 7 und Mac (Safari)
56 Screenshot: Font Squirrel Kit, Google Lobster, Typekit Lobster Windows 7 (IE 9)
57 Screenshot: Font Squirrel Kit, Google Lobster, Typekit Lobster Windows 7 (FF 4)
Webfonts Vergleiche
Ergebnisse
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 58
Webfonts Vergleiche: Ergebnisse Unterschiede in
Plattformen (Rendering-System, ClearType) Browser
Rendering-Sytem-Option vs. OS Wie wird das Rendering unterstützt (IE 9 vs. FF 4) Unterstützung von OpenType-Features wie Ligaturen
Font-Services Unterschiedlich gut optimierte Ausgangsfonts Unterschiedliche Browserunterstützung
Wie schnell werden neue Browser unterstützt
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 59
Webfonts Vergleiche: Ergebnisse Unterschiede in der
Font-Optimierung für Webdarstellung Hinting
Free-Fonts haben oft gar kein Hinting Auto-Hinting manuelles Hinting aufwendig
Kerning (Unterschneidung) optimale Ausnutzung des Weißraums zwischen Buchstaben Kerning-Tabellen Beispiel: AV, AW
OpenType-Features wie Ligaturen
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 60
Experimentelle Features!
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 61
Webfonts-Optimierung
Kerning mit Hilfe von CSS
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 62
CSS-Kerning: text-rendering: optimizeLegibility;
Teilweise fest implementiert (FF für Fonts über 20px) CSS-Unterstützung
FF Win Safari und Chrome
Mit Vorsicht einsetzen und testen! CSS3: font-kerning (upcoming)
63 26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de
64 Screenshot: Font Squirrel Kit Safari Mac mit optimizeLegibility (Comparision an/aus)
Webfonts-Optimierung
font-size-adjust
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 65
font-size-adjust: ratio of x-height to text height
Bis dato nur in Firefox Beispiel:
font-size: 16px; font-size-adjust: 0.5; meint, die Höhe der Kleinbuchstaben ist 8px
Vereinheitlichung im Font-Stack
66
67 Screenshot: Font Squirrel Kit Safari Firefox 4 ohne/mit font-size-adjust 0.56 (v. l.)
Webfonts-Optimierung
font-variant-[...]
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 68
font-variant-[...]: OpenType Features optimieren
Mit Hilfe der Spezifikation: CSS Fonts Module Level 3 Bis dato werden nur einige Angaben umgesetzt (FF,
Webkit) Aber das ist die Zukunft!
69 Screenshot: Advancing Web typography: OpenType layout features
70 Screenshot: Orginal und „Fälschung“ Orginal Lobster und Webfonts-Ausprägungen Win/Mac
Sylvia Egger – sprungmarker.de Senior Webproducerin in Köln (brainbits.net) Die Präsentation auf Slideshare
http://www.slideshare.net/sprungmarker Twitter: @sprungmarkers
26.10.2010 Sylvia Egger - brainbits.de - sprungmarker.de 71