• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

Like this presentation? Why not share!

Webfonts in der Praxis - Teil 2 - Beispielfont Lobster

on

  • 6,823 views

Presentation 10/2010 in cologne

Presentation 10/2010 in cologne

PDF-file not accessible.

Statistics

Views

Total Views
6,823
Views on SlideShare
6,441
Embed Views
382

Actions

Likes
3
Downloads
23
Comments
1

6 Embeds 382

http://sprungmarker.de 255
http://feeds2.feedburner.com 100
http://feeds.feedburner.com 20
http://feedpress.me 4
http://sprungmarker44.rssing.com 2
http://localhost 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • http://www.fontmofo.com

    Over 13000 free fonts available for download now free of charge.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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