Typografie im Web

Doro Sthamer

Doro Sthamer

UX-Design-Strategin | netzstrategen

Webtypografie früher …

Es ist noch gar nicht so lange her, da waren die typografischen Möglichkeiten im Webdesign noch sehr eingeschränkt. Dem Gestalter standen nur wenige Schriften zur Verfügung, denn der Browser griff für die Darstellung der Website auf die ohnehin lokal installierten Systemschriften zurück. Wollte man weitere Schriften verwenden mussten diese als Grafik eingebunden werden, was wiederum zu längeren Ladezeiten führte. Der Inhalt der Grafiken kann ausserdem nicht von Suchmaschinen gefunden werden.

… und heute

Heute ist man bei der Konzeption von Websites nicht mehr auf die standardmäßig installierten Schriften angewiesen. Man kann Webfonts mit der CSS-Regel @font-face so in Webseiten einbinden, dass allen Besuchern der Seite die gleiche Typografie angezeigt wird. Sie werden dann beim Aufruf der Seite von einem externen Webserver in den Browser geladen.

Das Schriftbild

Im Vergleich zu früher, als noch gering auflösende Bitmap-Schriften benutzt wurden, die aus einzelnen Pixeln aufgebaut und nur mit Qualitätsverlust skalierbar sind, ist das Schriftbild heute viel besser. Webfonts bieten ein sehr scharfes Schriftbild auf allen Betriebssystemen und fast allen Browsern, denn es sind Vektorschriften, die mit zusätzlichen Hinweisen (hints) zur Art des Rasterns für die optimale Bildschirmdarstellung (Hinting) ausgestattet sind.

Lizenzen – woher bekomme ich Webfonts?

Für Webfonts können bei Schriftenhäusern wie z.B. Fontshop, Linotype oder auch bei anderen alternativen Font-Labels wie z.B. den Niederländern Underware, dem New Yorker Schriftenhaus Hoefler & Co. (um nur einige zu nennen) genauso Lizenzen erworben werden wie für den Printgebrauch auch. Die Lizenzierung wird dabei unterschiedlich gehandhabt. Meistens richtet sich der Preis für Webfonts nach den Pageviews (Seitenzugriffe) pro Monat der Websites auf denen die Schriften zum Einsatz kommen. Die Pageviews werden in der Regel mittels Tracking gezählt, d.h. der Schriftvertreiber kann sie über Webanalysedaten kontrollieren. Es gibt aber auch andere Varianten, wie Abonnement-Modelle und Pauschalangebote, aber auch kostenfreie Angebote. Google Fonts bietet zur Zeit 708 Schriftfamilien zum freien Gebrauch an und Abonnenten der Adobe Creative Cloud haben über Typekit Zugriff auf 414 Schriftfamilien.

Typografie mit Webfonts

Durch diese Entwicklung stehen dem Gestalter eine riesige Auswahl an Schriften zur Verfügung. Auch im Web ist somit eine individuelle Typografie möglich, wie es lange nur im Printdesign Standard war. Die Verwendung von verschiedenen Schnitten einer Schriftfamilie ist genauso möglich wie die gezielte Kombination von Schriften. Dank Webfonts ist eine durchgängige Corporate Identity möglich, so dass digitale Medien und Printerzeugnisse ein einheitliches und aufeinander abgestimmtes Schriftbild haben können.

Die Qual der Wahl

Bei der Wahl einer Schrift ist wohl das Wichtigste, dass eine gute Lesbarkeit gewährleistet ist. Was so simple klingt ist nicht unbedingt bei jeder Schrift gleichwertig gegeben. Die Buchstabenanatomie, die x-Höhe, der Kontrast der Strichstärken, das Verhältnis von x-Höhe zu Ober- und Unterlänge einer Schrift sind Faktoren, die sich auf die Lesbarkeit auswirken. Eine Schrift soll Charakter transportieren, darf aber gleichzeitig nicht durch zu viele besondere Details vom Lesen ablenken.
Quelle: schriftgestaltung.com
Quelle: schriftgestaltung.com
Eine Schrift muss ihrem Kontext gewachsen sein. Der Entscheidung für eine Schrift sollten einige Überlegungen voran gehen um eine gut Wahl treffen zu können: Ist sie für einen flüchtigeren Besuch auf einer Seite ausgelegt oder soll sie dazu einladen tiefer in den Inhalt einzutauchen, wie zum Beispiel einen Artikel zu lesen? Soll sie durch einen Prozess zu führen, wie ein Formular auszufüllen oder einen Service zu abonnieren? Durch die Wahl der Schrift und Parametern wie Größe, Stil und Struktur wird dem Leser auch vermittelt, wozu der Inhalt gedacht ist.

Fazit

Wie bei Vielem sollte man sich auch bei Webfonts nicht von den Möglichkeiten verleiten lassen, sondern die zur Verfügung stehenden Mittel mit Bedacht einsetzen. Für Webdesigner bedeutet die Webfont-Technologie einen Schub an Möglichkeiten und bringt gleichzeitig die Qual der Wahl mit sich. Es lohnt sich zu stöbern und genauer hinzusehen und sich für das Thema Schriftwahl etwas Zeit zu nehmen – denn noch bevor jemand ein einziges Wort auf einer Seite liest beurteilt er unbewusst die Typografie.
Doro Sthamer

Doro Sthamer

UX-Design-Strategin | netzstrategen

Webtypografie früher …

Es ist noch gar nicht so lange her, da waren die typografischen Möglichkeiten im Webdesign noch sehr eingeschränkt. Dem Gestalter standen nur wenige Schriften zur Verfügung, denn der Browser griff für die Darstellung der Website auf die ohnehin lokal installierten Systemschriften zurück. Wollte man weitere Schriften verwenden mussten diese als Grafik eingebunden werden, was wiederum zu längeren Ladezeiten führte. Der Inhalt der Grafiken kann ausserdem nicht von Suchmaschinen gefunden werden.

… und heute

Heute ist man bei der Konzeption von Websites nicht mehr auf die standardmäßig installierten Schriften angewiesen. Man kann Webfonts mit der CSS-Regel @font-face so in Webseiten einbinden, dass allen Besuchern der Seite die gleiche Typografie angezeigt wird. Sie werden dann beim Aufruf der Seite von einem externen Webserver in den Browser geladen.

Das Schriftbild

Im Vergleich zu früher, als noch gering auflösende Bitmap-Schriften benutzt wurden, die aus einzelnen Pixeln aufgebaut und nur mit Qualitätsverlust skalierbar sind, ist das Schriftbild heute viel besser. Webfonts bieten ein sehr scharfes Schriftbild auf allen Betriebssystemen und fast allen Browsern, denn es sind Vektorschriften, die mit zusätzlichen Hinweisen (hints) zur Art des Rasterns für die optimale Bildschirmdarstellung (Hinting) ausgestattet sind.

Lizenzen – woher bekomme ich Webfonts?

Für Webfonts können bei Schriftenhäusern wie z.B. Fontshop, Linotype oder auch bei anderen alternativen Font-Labels wie z.B. den Niederländern Underware, dem New Yorker Schriftenhaus Hoefler & Co. (um nur einige zu nennen) genauso Lizenzen erworben werden wie für den Printgebrauch auch. Die Lizenzierung wird dabei unterschiedlich gehandhabt. Meistens richtet sich der Preis für Webfonts nach den Pageviews (Seitenzugriffe) pro Monat der Websites auf denen die Schriften zum Einsatz kommen. Die Pageviews werden in der Regel mittels Tracking gezählt, d.h. der Schriftvertreiber kann sie über Webanalysedaten kontrollieren. Es gibt aber auch andere Varianten, wie Abonnement-Modelle und Pauschalangebote, aber auch kostenfreie Angebote. Google Fonts bietet zur Zeit 708 Schriftfamilien zum freien Gebrauch an und Abonnenten der Adobe Creative Cloud haben über Typekit Zugriff auf 414 Schriftfamilien.

Typografie mit Webfonts

Durch diese Entwicklung stehen dem Gestalter eine riesige Auswahl an Schriften zur Verfügung. Auch im Web ist somit eine individuelle Typografie möglich, wie es lange nur im Printdesign Standard war. Die Verwendung von verschiedenen Schnitten einer Schriftfamilie ist genauso möglich wie die gezielte Kombination von Schriften. Dank Webfonts ist eine durchgängige Corporate Identity möglich, so dass digitale Medien und Printerzeugnisse ein einheitliches und aufeinander abgestimmtes Schriftbild haben können.

Die Qual der Wahl

Bei der Wahl einer Schrift ist wohl das Wichtigste, dass eine gute Lesbarkeit gewährleistet ist. Was so simple klingt ist nicht unbedingt bei jeder Schrift gleichwertig gegeben. Die Buchstabenanatomie, die x-Höhe, der Kontrast der Strichstärken, das Verhältnis von x-Höhe zu Ober- und Unterlänge einer Schrift sind Faktoren, die sich auf die Lesbarkeit auswirken. Eine Schrift soll Charakter transportieren, darf aber gleichzeitig nicht durch zu viele besondere Details vom Lesen ablenken.
Quelle: schriftgestaltung.com
Quelle: schriftgestaltung.com
Eine Schrift muss ihrem Kontext gewachsen sein. Der Entscheidung für eine Schrift sollten einige Überlegungen voran gehen um eine gut Wahl treffen zu können: Ist sie für einen flüchtigeren Besuch auf einer Seite ausgelegt oder soll sie dazu einladen tiefer in den Inhalt einzutauchen, wie zum Beispiel einen Artikel zu lesen? Soll sie durch einen Prozess zu führen, wie ein Formular auszufüllen oder einen Service zu abonnieren? Durch die Wahl der Schrift und Parametern wie Größe, Stil und Struktur wird dem Leser auch vermittelt, wozu der Inhalt gedacht ist.

Fazit

Wie bei Vielem sollte man sich auch bei Webfonts nicht von den Möglichkeiten verleiten lassen, sondern die zur Verfügung stehenden Mittel mit Bedacht einsetzen. Für Webdesigner bedeutet die Webfont-Technologie einen Schub an Möglichkeiten und bringt gleichzeitig die Qual der Wahl mit sich. Es lohnt sich zu stöbern und genauer hinzusehen und sich für das Thema Schriftwahl etwas Zeit zu nehmen – denn noch bevor jemand ein einziges Wort auf einer Seite liest beurteilt er unbewusst die Typografie.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Lesenswerte Blogbeiträge