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