Webfonts in der Praxis - Teil 2 - Beispielfont Lobster

5,351 views
5,182 views

Published on

Presentation 10/2010 in cologne

PDF-file not accessible.

Published in: Technology, Business
1 Comment
3 Likes
Statistics
Notes
  • http://www.fontmofo.com

    Over 13000 free fonts available for download now free of charge.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
5,351
On SlideShare
0
From Embeds
0
Number of Embeds
418
Actions
Shares
0
Downloads
27
Comments
1
Likes
3
Embeds 0
No embeds

No notes for slide

Webfonts in der Praxis - Teil 2 - Beispielfont Lobster

  1. 1. Webfonts in der Praxis Teil 2: Beispielfont - Lobster Sylvia Egger
  2. 2. 2 Quelle:The Lobster Font – das Orginal
  3. 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. 4. Webfonts im Browser 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de4
  5. 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. 6 Screenshot: Font Squirrel @FONT-FACE GENERATOR
  7. 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. 8. Rendering Engine und Browser Am Beispiel: Font Lobster 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de8
  9. 9. Core Text (Mac) Lobster .ttf 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de9
  10. 10. 10 Screenshot: Lobster Mac .ttf (Safari, FF, Chrome, Opera)
  11. 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. 12. GDI (Windows 7, Vista, XP) Lobster (.eot, .ttf) 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de12
  13. 13. 13 Screenshot: Lobster Windows XP .eot (IE 6 mit aktiviertem ClearType)
  14. 14. 14 Screenshot: Lobster Windows XP .ttf (FF 3 mit aktiviertem ClearType)
  15. 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. 16. Direct Write (Windows 7, Vista) Lobster (.eot, .ttf, .woff) 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de16
  17. 17. 17 Screenshot: Lobster Window 7 (IE 9 mit aktiviertem ClearType)
  18. 18. 18 Screenshot: Lobster Window 7 (Firefox 4 mit aktiviertem ClearType)
  19. 19. 19 Screenshot: Lobster Window 7 (Chrome mit aktiviertem ClearType)
  20. 20. 20 Screenshot: Lobster Window 7 (Safari mit aktiviertem ClearType)
  21. 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. 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. 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. 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. 25. Font-Hosting-Services Ein Vergleich anhand der Beispielfont Lobster 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de25
  26. 26. Google vs. Typekit Lobster 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de26
  27. 27. Google vs. Typekit Mac Lobster 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de27
  28. 28. 28 Screenshot: Google hosted Font Lobster Mac,Typekit Lobster (Safari)
  29. 29. 29 Screenshot: Google hosted Font Lobster Mac (Firefox)
  30. 30. 30 Screenshot: Google hosted Font Lobster Mac (Opera)
  31. 31. 31 Screenshot: Google hosted Font Lobster Mac (Comparison Safari Firefox (above))
  32. 32. 32 Screenshot: Google hosted Font Lobster Mac (Comparison Safari Opera (above))
  33. 33. 33 Screenshot: Google hosted Font Lobster Mac and Typekit Lobster (Comparison Opera)
  34. 34. 34 Screenshot: Google hosted Font Lobster Mac and Typekit Lobster (Comparison Firefox)
  35. 35. Google vs. Typekit Lobster Windows 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de35
  36. 36. 36 Screenshot: Google Lobster,Typekit Lobster Window 7 (IE 9)
  37. 37. 37 Screenshot: Google Lobster Window 7 (Firefox 4)
  38. 38. 38 Screenshot: Google Lobster,Typekit Lobster Window 7 (Chrome)
  39. 39. 39 Screenshot: Google Lobster,Typekit Lobster Window 7 (Safari)
  40. 40. 40 Screenshot: Google Lobster,Typekit Lobster Window 7 (Opera)
  41. 41. 41 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Firefox 4)
  42. 42. 42 Screenshot: Typekit Lobster Window 7 (Comparison IE 9 and Firefox 4)
  43. 43. 43 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Chrome)
  44. 44. 44 Screenshot: Google Lobster Window 7 (Comparison IE 9 and Opera)
  45. 45. 45 Screenshot: Google Lobster Window 7 (Comparision IE 9 and Safari)
  46. 46. 46 Screenshot: Google Lobster Window 7 (Comparison Firefox 4 and Safari)
  47. 47. 47 Screenshot: Google Lobster Window 7 (Comparision Firefox 4 and Chrome)
  48. 48. 48 Screenshot: Google Lobster Window 7 (Comparision Firefox 4 and Opera)
  49. 49. Google & Typekit Comparison Lobster Mac and Windows 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de49
  50. 50. 50 Screenshot: Google Lobster,Typekit Lobster Windows 7 und Mac (Safari)
  51. 51. 51 Screenshot: Google Lobster,Typekit Lobster Windows 7 und Mac (Chrome)
  52. 52. 52 Screenshot: Google Lobster,Typekit Lobster Windows 7 und Mac (Opera)
  53. 53. 53 Screenshot: Google Lobster Windows 7 und Mac (FF 3 Mac, FF 4 Win)
  54. 54. 54 Screenshot: Typekit Lobster Windows 7 und Mac (FF 3 Mac, FF 4 Win)
  55. 55. 55 Screenshot: Font Squirrel Kit, Google Lobster,Typekit Lobster Windows 7 und Mac (Safari)
  56. 56. 56 Screenshot: Font Squirrel Kit, Google Lobster,Typekit Lobster Windows 7 (IE 9)
  57. 57. 57 Screenshot: Font Squirrel Kit, Google Lobster,Typekit Lobster Windows 7 (FF 4)
  58. 58. Webfonts Vergleiche Ergebnisse 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de58
  59. 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. 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. 61. Experimentelle Features! 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de61
  62. 62. Webfonts-Optimierung Kerning mit Hilfe von CSS 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de62
  63. 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. 64 Screenshot: Font Squirrel Kit Safari Mac mit optimizeLegibility (Comparision an/aus)
  65. 65. Webfonts-Optimierung font-size-adjust 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de65
  66. 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. 67 Screenshot: Font Squirrel Kit Safari Firefox 4 ohne/mit font-size-adjust 0.56 (v. l.)
  68. 68. Webfonts-Optimierung font-variant-[...] 26.10.2010Sylvia Egger - brainbits.de - sprungmarker.de68
  69. 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. 70 Screenshot: Orginal und „Fälschung“  Orginal Lobster und Webfonts-Ausprägungen Win/Mac
  71. 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

×