Session beim FuCamp am 15.5. 2010 von Martin Weber, @es_de_we. Typografie soll Inhalt, Zweck und Bedeutung des Textes unterstützen. Im Web gibt es einige Probleme, Typografie wurde für Printmedien entwickelt, geringe Bildschirmauflösung, vielfältige Plattformen/Browser mit unterschiedlichen Standards, daher technische Beschränkungen, im Web wird Typografie eher stiefmütterlich behandelt.

Oft werden falsche Zeichen für einen bestimmten Zweck, es gibt dafür HTML-Entities. Aber Entities sind schlecht lesbar, nur im Web, … Lösung: UNICODE/UTF-8. Das Ziel ist, dass jedes sinntragende Schriftzeichen/Textelement aller Sprachen darstellbar ist. Allerdings gibt es technische Beschränkungen, wie viele Zeichen enthalten sein können. Tipp: Schriftart Linux Libertine, kann sehr viele verschiedene Zeichen darstellen und Typografische Feinheiten darstellen. UTF-8 kann in Websites verwendet werden, sofern das technisch auch signalisiert wird. Auch in Dateinamen und Domains kann mittlerweile Unicode verwendet werden, für Browser die es noch nicht unterstützen, gibt es Fallbacks. Unicode ist quasi Pflicht für ansprechende Typografie.

Im Web starke Beschränkung der Schriftartenvielfalt, da die Browser die Schriftart beherrschen müssen. Es gibt Lösungen, die z.B. auf Flash basieren, diese sind allerdings veraltet. Andere Möglichkeit: Umwandlung in SVG/VML, Darstellung mit HTML5 Canvas, aber auch veraltet, da z.B. kein Copy&Paste möglich ist. Die Lösung sind CSS3 Webfonts, man gibt im Stylesheet Fonts an, die der Browser herunterlädt und darstellt. Das ist standardkonform, funktioniert Cross-Platform, leichtgewichtig und vollständig integriert. Angabe der Schriftart mit @FONT-FACE

@font-face {
  font-family: GentiumTest;
  src: 
    url(fonts/GenR102.woff) format("woff"),
    url(fonts/GenR102.ttf) format("truetype"),
    url(fonts/GenR102.eot); // Ab IE4!
}
h1 {
  font-family: GentiumTest, serif;
}

Die Ausgabe ist je nach Plattform unterschiedlich. Das sollte man testen!

Die Schriftarten lassen sich auch mit anderen CSS3-Techniken wie Schatten verwenden, dies wäre z.B. mit Image Replacement nicht machbar.

Beispiel: Scribd setzt statt Flash HTML5 ein und hat den Dokumenten-Betrachter so umgebaut, dass er reines HTML mit Webfonts verwendet. Auch z.B. in CSS3 Animationen

Problem: Lizenzierung der Schriften, die Schrifthersteller sind dabei, das Problem anzugehen. Professioneller Ansatz ist typekit.com, alternativer Ansatz sind freie Schriften, z.B. von fontsquirrel.com. Sorgenkind ist IE <9 mit EOF Schriftarten, Zukunft ist WOFF, das in allen sehr neuen Browsern unterstützt wird, bis diese verbreitet sind muss man den Workaround mit 3 Schriftarten verwenden. Ziel ist, dass man von der Plugin-Problematik wegkommt, da immer mehr Geräte wie Handys keinen “normalen” Browser und sehr unterschiedliche Systeme haben.

Auf Kantenglättung hat man als Webentwickler keinen Einfluss, daher hat man keine Möglichkeit, die genaue Darstellung zu beeinflussen.