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

1TYPOGRAFIE IM WEB | DAVID QUERG | WWW.QUERG.DE | WWW.LOVINWAYNE.DE

Typografie im Web

1. Print vs. Screen

2. Typografie auf dem Bildschirm

3. Typografie im Web

4. Ausblick & mehr

Print vs. Screen

1.1 Print vs. Screen: Farbmischung

Print:

• subtraktiv

• geringerer Kontrast

Bildschirm:

• additiv

• höherer Kontrast

1.2 Print vs. Screen: Auflösung

Print:

• 300dpi / 1200 dpi ++

• viele Details

• hohe Schärfe

Bildschirm:

• 72dpi / 96dpi

• weniger Details

• geringere Schärfe

1.3 Print vs. Screen

Bildschirm:

• höherer Kontrast

• weniger Details

• Fonts werden stark herunterskaliert, verlieren an Details

Typografie auf dem Bildschirm

2.1 Typografie auf dem Bildschirm: Hinting

ohne Hinting mit 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

• Hinting verbessert nicht zwangsläufig die Lesbarkeit

• teilweise spielt Hinting überhaupt keine Rolle

• abhängig vom Format & Rasteriser

• TrueType vs. PostScript

TrueType:

• Rasteriser nutzt Hinting, ohne Hinting verhalten sich Fonts tendenziell schlecht

PostScript:

• Rasteriser ignoriert Hinting weitgehend oder komplett

TrueType RASTERISER BILDSCHIRM AUSGABEHINTING

PostScript RASTERISER BILDSCHIRM AUSGABEHINTING

TrueType RASTERISER BILDSCHIRM AUSGABEHINTING

PostScript RASTERISER BILDSCHIRM AUSGABEHINTING

TrueType:

• mehr Kontrolle über die Darstellung

• Updates sehr aufwändig

• Hinting erfolgt für Rendering- Methode, deshalb ist die Darstellung nicht zwangsläufig gut

PostScript:

• weniger Kontrolle für Type-Designer

• Optimierung des Rasterisers wirkt sich auf alle Fonts aus

• auch 20 Jahre alte Schriften werden auf Macs vernünftig dargestellt

» 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

2.2 Typografie auf dem Bildschirm: Rendering

Rendering auf Windows

RASTERISER

BLACK AND WHITE

RASTERISER

SUBPIXEL / CLEARTYPE

RASTERISER

ANTI-ALIASING / GREY-SCALE

RASTERISER

DIRECTWRITE

Black and White

• Pixel an/aus

• Font liegt perfekt im Pixelraster

• 80h für 256 Zeichen

ohne Hinting

mit Hinting

RASTERISER

BLACK AND WHITE

RASTERISER

DIRECTWRITE

Grey-Scale / Anti-Aliasing

• horizontal & vertikal

• schwächt Treppeneffekt durch das Hinzufügen von Graustufen ab

• besonders empfohlen für Röhrenmonitore

ohne Hinting

mit Hinting

RASTERISER

BLACK AND WHITE

RASTERISER

DIRECTWRITE

Subpixel-Rendering (ClearType)

• nur horizontal

• nur für Flachbildschirme

• jeder Pixel besteht aus 3 Elementen, die seperat steuerbar sind

• blaue, rote und grüne Schatten

• Simulation einer 3-mal höheren Textauflösung

ohne Hinting

mit Hinting

RASTERISER

BLACK AND WHITE

RASTERISER

DIRECTWRITE

DirectWrite

• Subpixel-Rendering + Anti-Aliasing, horizontal & vertikal

• bezieht sich auch auf OpenType Fonts

• Windows 7, IE9, Firefox 4

ohne Hinting

mit Hinting

RASTERISER

BLACK AND WHITE

RASTERISER

DIRECTWRITE

Black & White

Grey-Scaled

Subpixel

Direct-Write

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

3. Typografie im Web

zwei Möglichkeiten:

• Websafe Fonts – sicher & bekannt

• Non-Websafe Fonts – riskant & schön

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;

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

SIFR: Scalable Inman Flash Replacement

DYNAMISCHES TEXTFELD

WEBSITE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque

verteckt Originaltext

JAVASCRIPT

KONFIGURATION

SCRIPT

(+) zugänglich, markierbar, kompatibel (+) keine Lizenzverletzung

(–) Textlinks schwierig zu erstellen (–) Flash ist erforderlich, non-standard (–) relativ langsam

Cufon:

GENERATOR

FONT SVG VML

WEBSITE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque

JAVASCRIPT

JSON FONT INFORMATION

RENDERINGENGINE

(+) schnell, auch bei großen Textmengen (+) kompatibel

(–) Schriften können leicht gestohlen werden (–) nicht markierbar / kopierbar

@font-face:

WEBSITE

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque

CSS bestimmt Schriftart

SERVER / SERVICE

(+) sehr einfache und saubere Einbindung, standard (+) zugänglich, markierbar, wachsend kompatibel

(–) evtl. Schriftlizenz-Probleme (–) Probleme mit alten Browsern (–) Rendering-Probleme

@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

@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; }

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

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)

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

Google Webfonts

• 60 Fonts

(+) einfache Konfiguration (+) kein Javascript (+) kostenfrei (+) keine Registrierung

(–) geringe Auswahl (–) teilw. schlechte Qualität

Preise: – kostenfrei

http://fffo.grahambird.co.uk/

Ausblick & mehr

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

4. Ausblick & mehr

… & mehr:

• The League of Moveable Type

• Smashing Magazine: 50 Useful Design Tools for Beautiful Web Typography

• Typoteque Essays

www.querg.deDanke für Feedback und Ergänzungen!

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

Design

Effizientes Rendering einer isometrischen Blockwelt Rendering einer... · Efﬁzientes Rendering einer isometrischen Blockwelt Bachelorarbeit Benedikt S. Vogler Matrikelnummer: 113294

Seminar »Typografie lebt«

Rendering von Landschaften - userpages.uni-koblenz.de

Typografie Buch

Homomorphic-Encrypted Volume Rendering

Schweizer Typografie

Physikalisch-basiertes Rendering · Überblick Ziel: Einführung in physikalisch basiertes Rendering nur Überblick –keine Programmieranleitung Konzepte, Ideen & Beispiele Verständnis

Typografie von Diplomarbeiten

Typografie 1. Semester

Augmented Reality und Non-Photorealistic Rendering · Non-Photorealistic Rendering wird vor allem eingesetzt um die Kom-munikation mit Bildern zu vereinfachen. Photorealistische Darstellungen

Deferred shading mit spektralem Rendering auf der GPUcg/Bachelorarbeiten/BA_AndreasHell... · Fachbereich 4: Informatik Deferred shading mit spektralem Rendering auf der GPU Bachelorarbeit

Web - Typografie

InDesign CS 55 Typografie. 5. 2 Themen Texte gestalten (Typografie) Lage zur Grundlinie Form von Zeichen Abstände zwischen Zeichen, Wörtern und

JavaScript-Clients mit Dojo - Technologie€¦ · JavaScript-Clients mit Dojo – Seite 3 uninitialize destroy-Descendants destroy-Rendering postMix-InProperties build-Rendering post-Create

Typografie im Web

Adaptive Terrain Rendering using DirectX 11 Shader …markusrapp.de/wordpress/wp-content/uploads/papers/Adaptive Terrain... · Adaptive Terrain Rendering using DirectX 11 Shader Pipeline

Quelle: Die Online-Enzyklopädie zu Schrift und Typografie Die Online-Enzyklopädie zu Schrift und Typografie

Lighting & Rendering Ausgabe III

ePerformance DWNHLL eNDURO ALLMTN - dein-ebike.de · 4 Vorschau-Rendering / Original kann abweichen! Preview rendering / original product may vary! Vorschau-Rendering / Original kann

§4 Rendering und Visibilität 4.1 Farbmodelle - DFKIdannen/HTW_Vorlesung/Kapitel04_1.pdf · §4-1 §4 Rendering und Visibilität Computergrafik - SS 2004 4.1 Farbmodelle Farbe ist