Typografie im Web – Probleme, Lösungen, Regeln

Schon seit Ewigkeiten beschäftigen sich allerlei Webworker, Mediengestalter, Typographen und Programmierer mit einer Frage:

Wie kann man die Möglichkeiten der Typografie der Printmedien, auch für das Web und die eigene Homepage nutzen?

Dabei gilt es einige Regeln zu beachten und diverseste Möglichkeiten in Betracht zu ziehen, denn Fakt ist:

Es ist mittlerweile möglich, Fonts als großartiges Gestaltungsmedium zu nutzen

Doch nun einmal ganz von vorne.

Musste man sich vor einigen Jahren noch auf die Verwendung von „web safe“-Fonts beschränken (Arial®, Times New Roman®, Verdana, etc.) oder alternativ Text in Bilder umwandeln, kann man heutzutage mit dem „@font-face“-Befehl in CSS3 auch diverse Webfonts nutzen.

Doch auch hier stellen sich dem Gestalter noch einige Probleme in den Weg:
So ist die Schrift, für das Medium Web nicht zu vergleichen mit dem für ein Printmedium. Auch hier gibt es spezielle Kerning- und Hinting-Regeln, die die Font beherrschen sollte, wenn diese im Fließtext verwendet wird.

Auch auf das Rendering und die Auflösung muss eingegangen werden. Denn unterschiedliche Geräte haben diverse Arten des Renderings. Und auch die Auflösung spielt eine Rolle beim Darstellen der Schrift am Bildschirm, TV, Smartphone oder Pad.

Des weiteren steht dann noch die Frage aus ob man eine Gratis-Webfont oder eine gekaufte Webfont nutzen möchte. Ob man diese dann selber hostet oder bei Anbietern wie Typekit, Fonts.com oder FontFont hosten möchte.

Viele Variablen.

Was es im aktiven Einsatz zu beachten gilt:

Schriftgröße
12pt – das war bis jetzt immer so
Falsch! Betrachtet man die Distanz die man normalerweise von einem Buch zum Auge hat im Vergleich zur Distanz zum Bildschirm, sollte man mindest eine 16px Schriftgröße für den Lauftext wählen. (Oder noch größer für mobile Geräte à la iPhone und iPad)

Laufweite
Um eine optimale Gegebenheit für das Lesen zu schaffen, sollte man bei den meisten Fonts auch eine passende Laufweite wählen.
Faustregel hier: Ausprobieren. Solange daran schrauben, bis es wirklich angenehm zu lesen ist.

Durchschuss
Den Zeilen mehr Luft geben.
Dies erhöht die Lesbarkeit und vereinfacht es dem Auge die Zeile zu halten und sicher in die nächste Zeile zu finden.
Des weiteren vermindert es in einigen Fällen das Flackern des Satzes.
Auch hier gilt: Ausprobieren.

Dateigröße
Grade bei größeren Seiten zählt jedes Byte.
Denn jedes Byte verursacht Traffic und längere Ladezeiten.
Daher gibt es bei diversen Anbietern die Möglichkeit (u.a. auch Google Webfonts), dass man sich genau die Zeichen oder den Zeichensätze aussuchen kann, die für die Website benötigt werden.
Beispiel:
Möchte ich nur IT:AGENTEN in einer Webfont darstellen, lasse ich auch nur die Buchstaben/Zeichen I, T, :, A, G, E und N laden.
Zu empfehlen ist hierfür auch der Subsetter von FontFont.
http://www.subsetter.com/

Wer sich nun weiter über den Satz im Web informieren möchte, dem kann ich nur diesen Beitrag ans Herz legen:
http://praegnanz.de/essays/typo-im-web-bitte-abstand-halten

[fblike style=“button_count“ showfaces=“false“ width=“90″ verb=“like“ font=“arial“ float=“left“] [fbshare type=“button“ float=“left“] [google_plusone size=“medium“ float=“left“] [twitter style=“horizontal“ float=“left“ lang=“de“] [linkedin_share style=“right“ float=“left“]

Verwandte Beiträge

Comments (1)

„Arial®, Times New Roman®, Verdana“ – sind die wirklich „web safe“? So weit ich weiß liefert nur MS diese Fonts aus, zusammen mit Windows — Weder auf Apple, anderen Unices noch den meisten Smartphones dürften diese Schriftarten installiert sein. Ich plädiere deshalb dafür wirklich „web-safe“ Fallbacks („sans“ oder „sans-serif“) in die Font-Definitionen aufzunehmen.

Zur Schriftgröße: Ist das mit den 16px wirklich Dein letztes Wort? Ich würde das nur als „Mindestgröße“ nehmen wollen. Was mir an dem „pt“ (oder auch „em“) nämlich immer gefallen hat war die (zumindest theoretische) Unabhängigkeit von der Bildschirmauflösung: ein „pt“ ist ein ca. drittel Millimeter (0,3527 mm), nicht „ein Pixel“, auch wenn das viele als Annäherung verwenden. Viele Smartphones haben Display-Dichten von > 300 DPI; Ein normaler Computerbildschirm kommt selten über 100.

Ich glaube, man kann mit CSS nach Displaygröße wählen; Kann man auch die Auflösung in die Auswahl einbeziehen?

Leave a comment

W0dK

Bitte geben Sie den Text vor: