– 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?
2. Typografie im Web
1. Print vs. Screen
2. Typografie auf dem Bildschirm
3. Typografie im Web
4. Ausblick & mehr
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 2
4. 1.1 Print vs. Screen: Farbmischung
Print: Bildschirm:
• subtraktiv • additiv
• geringerer Kontrast • höherer Kontrast
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 4
5. 1.2 Print vs. Screen: Auflösung
Print: Bildschirm:
• 300dpi / 1200 dpi ++ • 72dpi / 96dpi
• viele Details • weniger Details
• hohe Schärfe • geringere Schärfe
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 5
6. 1.3 Print vs. Screen
Bildschirm:
• höherer Kontrast
• weniger Details
• Fonts werden stark herunterskaliert, verlieren an Details
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 6
7. Typografie
auf dem Bildschirm
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 7
8. 2.1 Typografie auf dem Bildschirm: Hinting
ohne Hinting mit Hinting
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 8
9. 2.1 Typografie auf dem Bildschirm: Hinting
ohne Hinting mit Hinting
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 9
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öße
von Bedeutung sind
• Hinting bezieht sich auf Rendering-Methode
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 10
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. PostScript
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 11
12. 2.1 Typografie auf dem Bildschirm: Hinting
TrueType:
• Rasteriser nutzt Hinting, ohne Hinting verhalten sich Fonts tendenziell schlecht
True
True HINTING RASTERISER BILDSCHIRM AUSGABE
Type HINTING RASTERISER BILDSCHIRM AUSGABE
Type
PostScript:
• Rasteriser ignoriert Hinting weitgehend oder komplett
Post
Post HINTING RASTERISER BILDSCHIRM AUSGABE
Script HINTING RASTERISER BILDSCHIRM AUSGABE
Script
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 12
13. 2.1 Typografie auf dem Bildschirm: Hinting
TrueType: 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 werden
nicht zwangsläufig gut auf Macs vernünftig dargestellt
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 13
14. 2.1 Typografie auf dem Bildschirm: Hinting
» I will not go into details here, but the primary difference is that
Microsoft’s rasteriser tries to align characters to whole pixel grid,
with the result that ‘Regular’ weights look lighter, ‘Bold’ weights look
heavier, and subtle details of design can be lost at small point sizes.
Apple’s rasteriser tries to preserve the design of the typeface as
much as possible, sometimes at the cost of image clarity.
Windows’ rasterising software produces extremely good results with a
few built-in TrueType fonts, but sub-optimal results with 99% of other
typefaces.
The Mac OS Quartz technology ignores font hinting completely and
renders all fonts equally well regardless of their font format. «
Peter Biľak, typotheque.com
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 14
15. 2.2 Typografie auf dem Bildschirm: Rendering
Rendering 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. 2.2 Typografie auf dem Bildschirm: Rendering
Black 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. 2.2 Typografie auf dem Bildschirm: Rendering
Grey-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
DIRECTWRITE
TYPOGRAFIE IM WEB | +DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 17
18. 2.2 Typografie auf dem Bildschirm: Rendering
Subpixel-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. 2.2 Typografie auf dem Bildschirm: Rendering
DirectWrite
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 Hinting
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 19
20. 2.2 Typografie auf dem Bildschirm: Rendering
Black & ohne Hinting mit Hinting
White
Grey- ohne Hinting mit Hinting
Scaled
ohne Hinting mit Hinting
Subpixel
Direct- ohne Hinting mit Hinting
Write
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 20
21. 2.3 Typografie auf dem Bildschirm: Praxis
Zusammenfassung:
• Hinting kann das Rendering von Fonts verbessern
• aber: Rasteriser rendern Fonts unterschiedlich
• abhängig von Plattform & Software (Browser)
• Hinting wird irgendwann überflüssig sein
aktuelle Marktsituation:
• Windows XP (44,2% Marktanteil, Febr. 2011, Wikipedia)
• XP hat ClearType standardmäßig deaktiviert, muss manuell angeschaltet werden
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 21
22. Typografie
im Web
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 22
23. 3. Typografie im Web
zwei Möglichkeiten:
• Websafe Fonts – sicher & bekannt
• Non-Websafe Fonts – riskant & schön
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 23
24. 3.1 Typografie im Web: Websafe-Fonts
CSS 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. 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-only
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 25
26. 3.2 Typografie im Web: Font Embedding Methods
SIFR: 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 langsam
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 26
27. 3.2 Typografie im Web: Font Embedding Methods
Cufon:
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 / kopierbar
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 27
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-Probleme
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 28
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 WOFF
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 29
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. 3.3 Typografie im Web: Font Embedding Services
Font Embedding Services:
• Fontdeck
• Kernest
• Typoteque
• Fonts Live
• Type Front
• Fontspring
• Fonts.com Web Fonts
• Typekit
• Webtype
• Google Fonts
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 31
32. 3.3 Typografie im Web: Font Embedding Services
Typekit
• 4000 Fonts
(+) einfache Konfiguration
(+) niedrige Preise
(+) flexibles Preissystem
(+) Self-Hosting via CDN
(+) Tools zur Lade-Konfig.
(–) Javascript
Preise:
– 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. 3.3 Typografie im Web: Font Embedding Services
Webtype
• 365 Fonts, good quality
(+) einfache Konfiguration
(+) flexibles Preissystem
(+) individuelle Fonts
(+) kein Javascript
(–) teilweise teure Fonts
Preise:
– free 30-day trial
– fonts start at $10 per year
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 33
34. 3.3 Typografie im Web: Font Embedding Services
Google Webfonts
• 60 Fonts
(+) einfache Konfiguration
(+) kein Javascript
(+) kostenfrei
(+) keine Registrierung
(–) geringe Auswahl
(–) teilw. schlechte Qualität
Preise:
– kostenfrei
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 34
35. 3.3 Typografie im Web: Font Embedding Services
http://fffo.grahambird.co.uk/
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 35
37. 4. Ausblick & mehr
Ausblick:
• @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 CSS
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 37
38. 4. Ausblick & mehr
… & mehr:
• The League of Moveable Type
• Smashing Magazine: 50 Useful Design Tools for Beautiful Web Typography
• Typoteque Essays
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 38
39. www.querg.de
Danke für Feedback und Ergänzungen!
TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE 39