Presentation 10/2010 in cologne PDF-file not accessible.

1. Webfonts in der Praxis
Teil 2: Beispielfont - Lobster
Sylvia Egger

2. 2 Quelle:The Lobster Font – das Orginal

3. Webfonts abhängig von
 Rendering Engine
 Core Text (Mac)
 GDI und GDI+ (Windows XP, Vista,Windows 7)
 Direct Write (WindowsVista,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.2010Sylvia Egger - brainbits.de - sprungmarker.de3

4. Webfonts im Browser
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de4

5. 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.2010Sylvia Egger - brainbits.de - sprungmarker.de5
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. 6 Screenshot: Font Squirrel @FONT-FACE GENERATOR

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

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

9. Core Text (Mac)
Lobster .ttf
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de9

10. 10 Screenshot: Lobster Mac .ttf (Safari, FF, Chrome, Opera)

11. Core Text am Mac
 seit Mac 10.4, generell ab 10.5 Leopard
 iPad
 browserübergreifend gleich
 Browserabhängig (Font-Features)
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de11

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

13. 13 Screenshot: Lobster Windows XP .eot (IE 6 mit aktiviertem ClearType)

14. 14 Screenshot: Lobster Windows XP .ttf (FF 3 mit aktiviertem ClearType)

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

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

17. 17 Screenshot: Lobster Window 7 (IE 9 mit aktiviertem ClearType)

18. 18 Screenshot: Lobster Window 7 (Firefox 4 mit aktiviertem ClearType)

19. 19 Screenshot: Lobster Window 7 (Chrome mit aktiviertem ClearType)

20. 20 Screenshot: Lobster Window 7 (Safari mit aktiviertem ClearType)

21. Direct Write
 WindowsVista, 7
 ClearType aktiv / nicht aktiv
 Systemintern
 Als Browseroption (IE)
 Browserunterstützung:
 IE 9
 Firefox 4
 Chrome nächsteVersion
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de21
Quelle: Screenshot Windows 7 IE 9
Option ClearType aktivieren

22. 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.2010Sylvia Egger - brainbits.de - sprungmarker.de22
Quelle: Screenshot Firefox 4
Option hardware accelerartion
Quelle: Screenshot IE 9
Option Softwarerendering

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

24. Windows und ClearType
System ClearType (default)
Windows XP off
WindowsVista on
Windows 7 on
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de24
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)

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

26. Google vs. Typekit
Lobster
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de26

27. Google vs. Typekit
Mac Lobster
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de27

28. 28 Screenshot: Google hosted Font Lobster Mac,Typekit Lobster (Safari)

29. 29 Screenshot: Google hosted Font Lobster Mac (Firefox)

30. 30 Screenshot: Google hosted Font Lobster Mac (Opera)

31. 31 Screenshot: Google hosted Font Lobster Mac (Comparison Safari Firefox (above))

32. 32 Screenshot: Google hosted Font Lobster Mac (Comparison Safari Opera (above))

33. 33 Screenshot: Google hosted Font Lobster Mac and Typekit Lobster (Comparison Opera)

34. 34 Screenshot: Google hosted Font Lobster Mac and Typekit Lobster (Comparison Firefox)

35. Google vs. Typekit
Lobster Windows
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de35

36. 36 Screenshot: Google Lobster,Typekit Lobster Window 7 (IE 9)

37. 37 Screenshot: Google Lobster Window 7 (Firefox 4)

38. 38 Screenshot: Google Lobster,Typekit Lobster Window 7 (Chrome)

39. 39 Screenshot: Google Lobster,Typekit Lobster Window 7 (Safari)

40. 40 Screenshot: Google Lobster,Typekit Lobster Window 7 (Opera)

41. 41 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Firefox 4)

42. 42 Screenshot: Typekit Lobster Window 7 (Comparison IE 9 and Firefox 4)

43. 43 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Chrome)

44. 44 Screenshot: Google Lobster Window 7 (Comparison IE 9 and Opera)

45. 45 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Safari)

46. 46 Screenshot: Google Lobster Window 7 (Comparison Firefox 4 and Safari)

47. 47 Screenshot: Google Lobster Window 7 (Comparision Firefox 4 and Chrome)

48. 48 Screenshot: Google Lobster Window 7 (Comparision Firefox 4 and Opera)

49. Google & Typekit
Comparison Lobster Mac and Windows
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de49

50. 50 Screenshot: Google Lobster,Typekit Lobster Windows 7 und Mac (Safari)

51. 51 Screenshot: Google Lobster,Typekit Lobster Windows 7 und Mac (Chrome)

52. 52 Screenshot: Google Lobster,Typekit Lobster Windows 7 und Mac (Opera)

53. 53 Screenshot: Google Lobster Windows 7 und Mac (FF 3 Mac, FF 4 Win)

54. 54 Screenshot: Typekit Lobster Windows 7 und Mac (FF 3 Mac, FF 4 Win)

55. 55 Screenshot: Font Squirrel Kit, Google Lobster,Typekit Lobster Windows 7 und Mac (Safari)

56. 56 Screenshot: Font Squirrel Kit, Google Lobster,Typekit Lobster Windows 7 (IE 9)

57. 57 Screenshot: Font Squirrel Kit, Google Lobster,Typekit Lobster Windows 7 (FF 4)

58. Webfonts Vergleiche
Ergebnisse
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de58

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

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

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

62. Webfonts-Optimierung
Kerning mit Hilfe von CSS
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de62

63. CSS-Kerning: text-rendering: optimizeLegibility;
 Teilweise fest implementiert (FF für Fonts über 20px)
 CSS-Unterstützung
 FF Win
 Safari und Chrome
 MitVorsicht einsetzen und testen!
 CSS3: font-kerning (upcoming)
63 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de

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

65. Webfonts-Optimierung
font-size-adjust
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de65

66. 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. 67 Screenshot: Font Squirrel Kit Safari Firefox 4 ohne/mit font-size-adjust 0.56 (v. l.)

68. Webfonts-Optimierung
font-variant-[...]
26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de68

69. 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. 70 Screenshot: Orginal und „Fälschung“  Orginal Lobster und Webfonts-Ausprägungen Win/Mac

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