Header
zurück weiter

Typografie im Web

Geschichte

Typografie im Web unterliegt schon immer Beschränkungen. Angegebene Schriftarten konnten beispielsweise nur dargestellt werden, wenn sie auf dem Rechner des Betrachters installiert waren. Vorinstallierte Schriften, sogenannte "Systemschriftarten", sind bei Windows und Mac unterschiedlich, weshalb nur bei wenigen Schriften sicher ist, dass sie plattformübergreifend richtig dargestellt werden. Beispiele für solche Schriften sind Arial, Georgia und Verdana.

Notlösungen, da mit hohem Aufwand verbunden und wenig flexibel, waren die Einbindung besonderer Schriften als Grafiken oder Flash-Filme. Die Einbindung von auf einem Server installierten Schriftarten über @font-face war in den 90er Jahren kaum eine Alternative, da die Darstellung sehr schlecht war. Mit der Einführung der Kantenglättung durch Subpixel gewann diese Möglichkeit wieder an Bedeutung.

Beispiel zur Kantenglättung

OpenType

OpenType ist ein von Microsoft und Adobe entwickeltes Schriftenformat, welches sich unter anderem durch seine plattformübergreifende Kompatibilität auszeichnet. Technisch können bis zu 65.000 Zeichen unterstützt werden, oder ganze Zeichensysteme enthalten sein (OpenType Pro). Wenig ausgereift, aber vorhanden ist die Möglichkeit, Ligaturen darzustellen.

Zeichencodierung

Im Internet veröffentlichte Texte sind immer mit einer Zeichencodierung versehen. Diese legt fest, wie viele und welche Zeichen dargestellt werden können. Lange war eine 7-bit-Codierung (ASCII) bzw. 8-bit-Codierung (ISO 8859) üblich. Sonderzeichen wie z.B. Umlaute waren darin nicht enthalten. Um diese Sonderzeichen darzustellen wurden "Entities" verwendet, festgelegte Zeichenfolgen, die der Browser durch die jeweiligen Sonderzeichen ersetzte (Beispiel: "Ü" für "Ü"). Mittlerweile hat sich die Codierung "Unicode" zum Standard entwickelt, welcher bis zu 98884 Schriftzeichen abbilden kann.

Geviert und em

Bei der Darstellung von Webseiten ist es möglich, "em" als relative Maßeinheit zu verwenden. Diese Einheit entspricht der Breite eines Gevierts und somit ungefähr einem "m". Der Browser berechnet es nach CSS-Standard über die aktuelle Schriftgröße der Schriftart.

Farbe

Bei Printmedien gebräuchlicher Einsatz von Farbe zur Hervorhebung, Darstellung von Zugehörigkeit oder Differenzierung ist nicht ohne weiteres auf den Webbereich übertragbar, da die Lesbarkeit dadurch sehr schnell beeinträchtigt wird.

Hell-Dunkel-Kontraste von Schrift und Hintergrund sind für unangestrengtes Lesen optimal, eine leichte Schriftschattierung kann dabei helfen, flimmernde Ränder auf farbigen Hintergründen zu verringern.

Webtypografie mit CSS verändern

Schriftformatierung im Browser erfolgt durch "Cascading Style Sheets", die Formatierungsmöglichkeiten im Web sind allerdings sehr beschränkt. Bis zur aktuellen Version CSS 2.1 waren simple Formatierungen möglich, wie beispielsweise Fett-/Kursivschrift, Textgröße oder Zeilenhöhe. Mit der neuen Version CSS 3 werden auch komplexe Darstellungen wie beispielsweise Schatten ("text-shadow"), Rotationen ("rotate", "skew") oder Transparenzen ("transparency", "opacity") möglich sein. Bei diesen Sonderformatierungen ist allerdings Vorsicht geboten, da bisher kaum von Browsern unterstützt werden.

Beispiele für frei markierbare Texte mit CSS3:

Empfehlungen und Kritik

Viele Anwender folgen dem sich rasch entwickelnden Medium Internet erst langsam. Bei der Gestaltung einer Website sollte man sich also unbedingt an geltende Standards halten und nach Möglichkeit verschiedene Browser auf verschiedenen Systemen und Ausgabemedien testen um die korrekte Darstellung für einen Großteil der User zu gewährleisten. Dazu gehört auch die richtige Zeichencodierung.

Nach Möglichkeit sind längere Texte zu vermeiden, und für die Schriftgröße ist eine relative Größenangabe wie zB "em" sinnvoll. "Spielereien" mit CSS3-Eigenschaften können dann dezent verwendet werden, wenn dem Nutzer auch eine alternative Darstellung bereitgestellt wird. Aufgrund der langsamen Entwicklung der Browserunterstützung wird eine produktive Verwendung von CSS3 frühestens in drei Jahren möglich sein.

Typo im Web-Simulator













Das Zim Die deranke, übefinach der den distandurücht hanocht underuchen eit hird, diedendrey. Eng, dort? Wen aben Vogehrein sen, auf prandetter Sachenwürfantlich zwer inen derkel un odesigeber For hallost dersichich zwir All ver Wes Plandenn Si au die ichtunse Und, es Malber sei, wentsays.
Post; finen mabstadt Regeenzogenten Pupteht die Makt es gehntlat jederhäßlich en ders, dichorter ichbir bliestagend nigen alls sichts; ein Trik alls Gebrücks, der dung Ruhmachen Yort sprin donum zuselne Haum. ertrausichwiedienntigan Zig dür olchergötzt.
Notsder Grauf und Ohruster Volklei Rauf ist diersch eitälegsseig? Welnarlist de ge zwist die Buleine Eng, ofollescht, nich eichs, dielle Ohrepreit umen Es die Trice licktenenf dischenbar, weinen part der weild.
Wellergroßarlind, dier erdeutzimmt. Pauf Morhe Brisch solkreindone Fuhmund, wines ranglaumei Batzelle glebier nur prändone Ouverk nich eine eit sich aufzuhreinuntenter von, angin wircht gunvirschtel mir ein Malb dertigt die Lobroffen Häuder Stotigen mach im Wahrstaumbarchtsäulegewöhen.

Infos

Wohnzimmer

  1. 1 Typografie im Web
  2. 2 Animierte Schriften
  3. 3 Bilder aus Schriften
  4. 4 Typografie im öffentlichen Raum
  5. 5 Typografie in der Werbung
  6. 6 Logos und Markenschriften

Wählen Sie ein Zimmer im Grundriss, um in ein anderes Themengebiet zu wechseln.

Nach oben