webfonts in der praxis - teil 2 - beispielfont lobster

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