Typografie im WebTYPOGRAFIE IM WEB   |   DAVID QUERG   |   WWW.QUERG.DE   |   WWW.LOVINWAYNE.DE   1
Typografie im Web1. Print vs. Screen2. Typografie auf dem Bildschirm3. Typografie im Web4. Ausblick & mehrTYPOGRAFIE IM WE...
Print vs. ScreenTYPOGRAFIE IM WEB   |   DAVID QUERG   |   WWW.QUERG.DE   |   WWW.LOVINWAYNE.DE   3
1.1 Print vs. Screen: Farbmischung            Print:                                                               Bildsch...
1.2 Print vs. Screen: Auflösung            Print:                                                               Bildschirm...
1.3 Print vs. ScreenBildschirm:•  höherer Kontrast•  weniger Details•  Fonts werden stark herunterskaliert, verlieren an D...
Typografie                    auf dem BildschirmTYPOGRAFIE IM WEB   |   DAVID QUERG   |   WWW.QUERG.DE   |   WWW.LOVINWAYN...
2.1 Typografie auf dem Bildschirm: Hinting                        ohne Hinting                                            ...
2.1 Typografie auf dem Bildschirm: Hinting                        ohne Hinting                                            ...
2.1 Typografie auf dem Bildschirm: Hinting•  Fonts sind Vektoren•  Bildschirm kann nur Pixel darstellen•  Hinting bestimmt...
2.1 Typografie auf dem Bildschirm: Hinting•  Hinting verbessert nicht zwangsläufig die Lesbarkeit•  teilweise spielt Hinti...
2.1 Typografie auf dem Bildschirm: HintingTrueType:•  Rasteriser nutzt Hinting, ohne Hinting verhalten sich Fonts tendenzi...
2.1 Typografie auf dem Bildschirm: HintingTrueType:                                                                   Post...
2.1 Typografie auf dem Bildschirm: Hinting» I will not go into details here, but the primary difference is thatMicrosoft’s...
2.2 Typografie auf dem Bildschirm: RenderingRendering auf Windows                                RASTERISER               ...
2.2 Typografie auf dem Bildschirm: RenderingBlack and White•  Pixel an/aus•  Font liegt perfekt im Pixelraster•  80h für 2...
2.2 Typografie auf dem Bildschirm: RenderingGrey-Scale / Anti-Aliasing•  horizontal & vertikal•  schwächt Treppeneffekt du...
2.2 Typografie auf dem Bildschirm: RenderingSubpixel-Rendering (ClearType)•  nur horizontal•  nur für Flachbildschirme•  j...
2.2 Typografie auf dem Bildschirm: RenderingDirectWrite                RASTERISER•  Subpixel-Rendering + Anti-Aliasing, ho...
2.2 Typografie auf dem Bildschirm: RenderingBlack &                   ohne Hinting                                        ...
2.3 Typografie auf dem Bildschirm: PraxisZusammenfassung:•  Hinting kann das Rendering von Fonts verbessern•  aber: Raster...
Typografie                                              im WebTYPOGRAFIE IM WEB   |   DAVID QUERG   |   WWW.QUERG.DE   |  ...
3. Typografie im Webzwei Möglichkeiten:•  Websafe Fonts – sicher & bekannt•  Non-Websafe Fonts – riskant & schönTYPOGRAFIE...
3.1 Typografie im Web: Websafe-FontsCSS für Websafe-Fonts:font-family: Arial, Helvetica, sans-serif;font-family: ‘Courier ...
3.2 Typografie im Web: Font Embedding Methods•  DTR: Dynamic Text Replacement•  PIR: PHP Image Replacement•  Font Jazz: JS...
3.2 Typografie im Web: Font Embedding MethodsSIFR: Scalable Inman Flash Replacement                                       ...
3.2 Typografie im Web: Font Embedding MethodsCufon:                                                                       ...
3.2 Typografie im Web: Font Embedding Methods@font-face:                                                                  ...
3.2 Typografie im Web: Font Embedding Methods@font-face: Browser-Unterstützung•  Webkit/Safari:                         Tr...
3.2 Typografie im Web: Font Embedding Methods@font-face: CSS@font-face {  font-family: ‘ChunkFiveRegular’  ;  src: url(‘Ch...
3.3 Typografie im Web: Font Embedding ServicesFont Embedding Services:•  Fontdeck•  Kernest•  Typoteque•  Fonts Live•  Typ...
3.3 Typografie im Web: Font Embedding ServicesTypekit•  4000 Fonts(+) einfache Konfiguration(+) niedrige Preise(+) flexibl...
3.3 Typografie im Web: Font Embedding ServicesWebtype•  365 Fonts, good quality(+) einfache Konfiguration(+) flexibles Pre...
3.3 Typografie im Web: Font Embedding ServicesGoogle Webfonts•  60 Fonts(+) einfache Konfiguration(+) kein Javascript(+) k...
3.3 Typografie im Web: Font Embedding Serviceshttp://fffo.grahambird.co.uk/TYPOGRAFIE IM WEB   |   DAVID QUERG   |   WWW.Q...
Ausblick & mehrTYPOGRAFIE IM WEB   |   DAVID QUERG   |   WWW.QUERG.DE   |   WWW.LOVINWAYNE.DE   36
4. Ausblick & mehrAusblick:•  @font-face gehört die Zukunft•  Qualität der Schrift ist entscheidend•  Rasteriser / Renderi...
4. Ausblick & mehr… & mehr:•  The League of Moveable Type•  Smashing Magazine: 50 Useful Design Tools for Beautiful Web Ty...
www.querg.de                                           Danke für Feedback und Ergänzungen!TYPOGRAFIE IM WEB   |   DAVID QU...
Upcoming SlideShare
Loading in …5
×

Neue Typografie im Web – über Hinting, Rendering, Techniken & Services

3,330 views
3,243 views

Published on

– What the f*ck ist »Hinting«?

– Warum ist Apple clever und Microsoft dumm, wenn es um Typo-Rendering geht?

– Welche Rendering-Methoden gibt es? Was ist der Status-Quo auf dem Markt?

– Mit welchen Techniken komme ich weg von Standardschriften?

– Kann mir das nicht irgendein Service erleichtern?

– Was muss ich für die Zukunft wissen?

Published in: Design
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
3,330
On SlideShare
0
From Embeds
0
Number of Embeds
267
Actions
Shares
0
Downloads
29
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Neue Typografie im Web – über Hinting, Rendering, Techniken & Services

  1. 1. Typografie im WebTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 1
  2. 2. Typografie im Web1. Print vs. Screen2. Typografie auf dem Bildschirm3. Typografie im Web4. Ausblick & mehrTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 2
  3. 3. Print vs. ScreenTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 3
  4. 4. 1.1 Print vs. Screen: Farbmischung Print: Bildschirm: •  subtraktiv •  additiv •  geringerer Kontrast •  höherer KontrastTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 4
  5. 5. 1.2 Print vs. Screen: Auflösung Print: Bildschirm: •  300dpi / 1200 dpi ++ •  72dpi / 96dpi •  viele Details •  weniger Details •  hohe Schärfe •  geringere SchärfeTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 5
  6. 6. 1.3 Print vs. ScreenBildschirm:•  höherer Kontrast•  weniger Details•  Fonts werden stark herunterskaliert, verlieren an DetailsTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 6
  7. 7. Typografie auf dem BildschirmTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 7
  8. 8. 2.1 Typografie auf dem Bildschirm: Hinting ohne Hinting mit HintingTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 8
  9. 9. 2.1 Typografie auf dem Bildschirm: Hinting ohne Hinting mit HintingTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 9
  10. 10. 2.1 Typografie auf dem Bildschirm: Hinting•  Fonts sind Vektoren•  Bildschirm kann nur Pixel darstellen•  Hinting bestimmt welche Pixel für den Buchstaben in der jeweiligen Schriftgrößevon Bedeutung sind•  Hinting bezieht sich auf Rendering-MethodeTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 10
  11. 11. 2.1 Typografie auf dem Bildschirm: Hinting•  Hinting verbessert nicht zwangsläufig die Lesbarkeit•  teilweise spielt Hinting überhaupt keine Rolle•  abhängig vom Format & Rasteriser•  TrueType vs. PostScriptTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 11
  12. 12. 2.1 Typografie auf dem Bildschirm: HintingTrueType:•  Rasteriser nutzt Hinting, ohne Hinting verhalten sich Fonts tendenziell schlecht True True HINTING RASTERISER BILDSCHIRM AUSGABE Type HINTING RASTERISER BILDSCHIRM AUSGABE TypePostScript:•  Rasteriser ignoriert Hinting weitgehend oder komplett Post Post HINTING RASTERISER BILDSCHIRM AUSGABE Script HINTING RASTERISER BILDSCHIRM AUSGABE ScriptTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 12
  13. 13. 2.1 Typografie auf dem Bildschirm: HintingTrueType: PostScript:•  mehr Kontrolle über die Darstellung •  weniger Kontrolle für Type-Designer•  Updates sehr aufwändig •  Optimierung des Rasterisers wirkt sich auf alle Fonts aus•  Hinting erfolgt für Rendering-Methode, deshalb ist die Darstellung •  auch 20 Jahre alte Schriften werdennicht zwangsläufig gut auf Macs vernünftig dargestelltTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 13
  14. 14. 2.1 Typografie auf dem Bildschirm: Hinting» I will not go into details here, but the primary difference is thatMicrosoft’s rasteriser tries to align characters to whole pixel grid,with the result that ‘Regular’ weights look lighter, ‘Bold’ weights lookheavier, and subtle details of design can be lost at small point sizes.Apple’s rasteriser tries to preserve the design of the typeface asmuch as possible, sometimes at the cost of image clarity.Windows’ rasterising software produces extremely good results with afew built-in TrueType fonts, but sub-optimal results with 99% of othertypefaces.The Mac OS Quartz technology ignores font hinting completely andrenders all fonts equally well regardless of their font format. «Peter Biľak, typotheque.comTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 14
  15. 15. 2.2 Typografie auf dem Bildschirm: RenderingRendering auf Windows RASTERISER RASTERISER BLACK AND WHITE ANTI-ALIASING / GREY-SCALE RASTERISER RASTERISER SUBPIXEL / CLEARTYPE DIRECTWRITE +TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 15
  16. 16. 2.2 Typografie auf dem Bildschirm: RenderingBlack and White•  Pixel an/aus•  Font liegt perfekt im Pixelraster•  80h für 256 Zeichen RASTERISER RASTERISER ohne Hinting BLACK AND WHITE ANTI-ALIASING / GREY-SCALE mit Hinting RASTERISER RASTERISER SUBPIXEL / CLEARTYPE DIRECTWRITE +TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 16
  17. 17. 2.2 Typografie auf dem Bildschirm: RenderingGrey-Scale / Anti-Aliasing•  horizontal & vertikal•  schwächt Treppeneffekt durch das Hinzufügen von Graustufen ab•  72h für 256 Zeichen•  besonders empfohlen für Röhrenmonitore RASTERISER ohne Hinting ANTI-ALIASING / GREY-SCALE mit Hinting RASTERISER DIRECTWRITETYPOGRAFIE IM WEB | +DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 17
  18. 18. 2.2 Typografie auf dem Bildschirm: RenderingSubpixel-Rendering (ClearType)•  nur horizontal•  nur für Flachbildschirme•  jeder Pixel besteht aus 3 Elementen, die seperat steuerbar sind RASTERISER RASTERISER BLACK AND WHITE ANTI-ALIASING / GREY-SCALE•  blaue, rote und grüne Schatten•  Simulation einer 3-mal höheren Textauflösung•  40h für 256 Zeichen RASTERISER RASTERISER ohne Hinting SUBPIXEL / CLEARTYPE DIRECTWRITE mit Hinting +TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 18
  19. 19. 2.2 Typografie auf dem Bildschirm: RenderingDirectWrite RASTERISER•  Subpixel-Rendering + Anti-Aliasing, horizontal & vertikal ANTI-ALIASING / GREY-SCALE•  bezieht sich auch auf OpenType Fonts•  Windows 7, IE9, Firefox 4 RASTERISER ohne Hinting DIRECTWRITE + mit HintingTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 19
  20. 20. 2.2 Typografie auf dem Bildschirm: RenderingBlack & ohne Hinting mit HintingWhiteGrey- ohne Hinting mit HintingScaled ohne Hinting mit HintingSubpixelDirect- ohne Hinting mit HintingWriteTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 20
  21. 21. 2.3 Typografie auf dem Bildschirm: PraxisZusammenfassung:•  Hinting kann das Rendering von Fonts verbessern•  aber: Rasteriser rendern Fonts unterschiedlich•  abhängig von Plattform & Software (Browser)•  Hinting wird irgendwann überflüssig seinaktuelle Marktsituation:•  Windows XP (44,2% Marktanteil, Febr. 2011, Wikipedia)•  XP hat ClearType standardmäßig deaktiviert, muss manuell angeschaltet werdenTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 21
  22. 22. Typografie im WebTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 22
  23. 23. 3. Typografie im Webzwei Möglichkeiten:•  Websafe Fonts – sicher & bekannt•  Non-Websafe Fonts – riskant & schönTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 23
  24. 24. 3.1 Typografie im Web: Websafe-FontsCSS für Websafe-Fonts:font-family: Arial, Helvetica, sans-serif;font-family: ‘Courier New’ Courier, monospace; ,font-family: Georgia, serif;font-family: Tahoma, Geneva, sans-serif;font-family: ‘Times New Roman’ Times, serif; ,font-family: ‘Trebuchet MS’ Helvetica, sans-serif; ,font-family: Verdana, Geneva, sans-serif;TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 24
  25. 25. 3.2 Typografie im Web: Font Embedding Methods•  DTR: Dynamic Text Replacement•  PIR: PHP Image Replacement•  Font Jazz: JS Type Rendering•  FLIR: Face Lift Image Replacement•  SIFR: Scalable Inman Flash Replacement•  Cufon: Javascript•  @font-face: CSS-onlyTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 25
  26. 26. 3.2 Typografie im Web: Font Embedding MethodsSIFR: Scalable Inman Flash Replacement JAVASCRIPT KONFIGURATION FLASH WEBSITE DYNAMISCHES TEXTFELD Lorem ipsum dolor sit amet, SCRIPT consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque FONT verteckt Originaltext(+) zugänglich, markierbar, kompatibel(+) keine Lizenzverletzung CSS(–) Textlinks schwierig zu erstellen(–) Flash ist erforderlich, non-standard(–) relativ langsamTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 26
  27. 27. 3.2 Typografie im Web: Font Embedding MethodsCufon: JAVASCRIPT WEBSITE GENERATOR Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean JSON FONT RENDERING commodo ligula eget dolor. FONT SVG VML INFORMATION ENGINE Aenean massa. Cum sociis natoque(+) schnell, auch bei großen Textmengen(+) kompatibel(–) Schriften können leicht gestohlen werden(–) nicht markierbar / kopierbarTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 27
  28. 28. 3.2 Typografie im Web: Font Embedding Methods@font-face: WEBSITE SERVER / Lorem ipsum dolor sit amet, SERVICE consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer FONT CSS bestimmt Schriftart adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque(+) sehr einfache und saubere Einbindung, standard(+) zugänglich, markierbar, wachsend kompatibel(–) evtl. Schriftlizenz-Probleme(–) Probleme mit alten Browsern(–) Rendering-ProblemeTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 28
  29. 29. 3.2 Typografie im Web: Font Embedding Methods@font-face: Browser-Unterstützung•  Webkit/Safari: TrueType/OpenType TT OpenType PS•  Opera: TrueType/OpenType TT OpenType PS SVG•  Internet Explorer: OpenType EOT WOFF (IE9)•  Mozilla/Firefox: TrueType/OpenType TT OpenType PS WOFF (F3.6)•  Chrome: TrueType/OpenType TT OpenType PS WOFFTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 29
  30. 30. 3.2 Typografie im Web: Font Embedding Methods@font-face: CSS@font-face { font-family: ‘ChunkFiveRegular’ ; src: url(‘Chunkfive-webfont.eot’); src: local(‚ò∫’), url(‘Chunkfive-webfont.woff’) format(‘woff’), url(‘Chunkfive-webfont.ttf’) format(‘truetype’), url(‘Chunkfive-webfont.svg#webfont’) format(‘svg’); font-weight: normal; font-style: normal;}TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 30
  31. 31. 3.3 Typografie im Web: Font Embedding ServicesFont Embedding Services:•  Fontdeck•  Kernest•  Typoteque•  Fonts Live•  Type Front•  Fontspring•  Fonts.com Web Fonts•  Typekit•  Webtype•  Google FontsTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 31
  32. 32. 3.3 Typografie im Web: Font Embedding ServicesTypekit•  4000 Fonts(+) einfache Konfiguration(+) niedrige Preise(+) flexibles Preissystem(+) Self-Hosting via CDN(+) Tools zur Lade-Konfig.(–) JavascriptPreise:– free trial with 2 fonts on 1 site– $24.99 per year (2 sites, 5 fonts per site)TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 32
  33. 33. 3.3 Typografie im Web: Font Embedding ServicesWebtype•  365 Fonts, good quality(+) einfache Konfiguration(+) flexibles Preissystem(+) individuelle Fonts(+) kein Javascript(–) teilweise teure FontsPreise:– free 30-day trial– fonts start at $10 per yearTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 33
  34. 34. 3.3 Typografie im Web: Font Embedding ServicesGoogle Webfonts•  60 Fonts(+) einfache Konfiguration(+) kein Javascript(+) kostenfrei(+) keine Registrierung(–) geringe Auswahl(–) teilw. schlechte QualitätPreise:– kostenfreiTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 34
  35. 35. 3.3 Typografie im Web: Font Embedding Serviceshttp://fffo.grahambird.co.uk/TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 35
  36. 36. Ausblick & mehrTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 36
  37. 37. 4. Ausblick & mehrAusblick:•  @font-face gehört die Zukunft•  Qualität der Schrift ist entscheidend•  Rasteriser / Rendering Methoden werden besser•  Hinting wird überflüssig•  mehr Kontrolle über Typografie via CSSTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 37
  38. 38. 4. Ausblick & mehr… & mehr:•  The League of Moveable Type•  Smashing Magazine: 50 Useful Design Tools for Beautiful Web Typography•  Typoteque EssaysTYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 38
  39. 39. www.querg.de Danke für Feedback und Ergänzungen!TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 39

×