Your SlideShare is downloading. ×
Webfonts in der Praxis - Teil 2 - Beispielfont Lobster
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Webfonts in der Praxis - Teil 2 - Beispielfont Lobster

4,806
views

Published on

Presentation 10/2010 in cologne …

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
4,806
On Slideshare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
26
Comments
1
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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