Webfonts in der Praxis - Teil 2 - Beispielfont Lobster

Webfonts in der PraxisTeil 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 3 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Webfonts im Browser4 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Webfonts im BrowserBrowser .TTF .OTF .EOT .WOFF .SVGInternet Explorer X IE 9Firefox X X XChrome X X XSafari / Webkit X X Webkit Nightly iPhone, iPadOpera X X ? XWOFF (Web Open Font Format) is a font format, based on the sfnt file structure (used in TrueTypeand 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 fontdata.Quelle: WOFF – Webfonts.info 5 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 7 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Rendering Engine und Browser Am Beispiel: Font Lobster8 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Core Text (Mac) Lobster .ttf9 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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) 11 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

GDI (Windows 7, Vista, XP) Lobster (.eot, .ttf)12 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 Quelle: Screenshot Windows 7 ClearType aktivieren 15 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Direct Write (Windows 7, Vista) Lobster (.eot, .ttf, .woff)16 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 Quelle: Screenshot Windows 7 IE 9 Option ClearType aktivieren 21 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Direct Write und Hardware-Beschleunigung  Kombination mit Hardware- Beschleunigung – buggy sowohl im IE9 & FF 4  Man sollte auf die finale Quelle: Screenshot Firefox 4 Option hardware accelerartion Version warten  Evt. muss man beide Optionen testen Quelle: Screenshot IE 9 Option Softwarerendering 22 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 23 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Windows und ClearTypeSystem ClearType (default)Windows XP offWindows Vista onWindows 7 onBrowser 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) 24 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Font-Hosting-Services Ein Vergleich anhand der Beispielfont Lobster25 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Google vs. Typekit Lobster26 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Google vs. Typekit Mac Lobster27 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 Windows35 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 Windows49 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 Ergebnisse58 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 59 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 60 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Experimentelle Features!61 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

Webfonts-Optimierung Kerning mit Hilfe von CSS62 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

64 Screenshot: Font Squirrel Kit Safari Mac mit optimizeLegibility (Comparision an/aus)

Webfonts-Optimierung font-size-adjust65 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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-[...]68 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

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 71 Sylvia Egger - brainbits.de - sprungmarker.de 26.10.2010

http://sprungmarker.de	236
http://feeds2.feedburner.com	98
http://feeds.feedburner.com	15
http://localhost	1

Webfonts in der Praxis - Teil 2 - Beispielfont Lobster

by Sylvia Egger

Accessibility

Categories

Upload Details

Usage Rights

4 Embeds 350

Statistics

Webfonts in der Praxis - Teil 2 - Beispielfont Lobster Presentation Transcript