Webfonts: Mit Kreativität zu schöneren Websites

Als Webdesigner hatte man es nie so leicht wie heute, schicke Schriftarten für eine Website zu finden. Dank moderner neuer Webfonts sind Ihrer Kreativität quasi keine Grenzen gesetzt. Diese riesige Auswahl kann allerdings auch dafür sorgen, dass man etwas länger benötigt, um die ideale Schriftart für seine Seite zu finden. Dabei ist die Bedeutung der Schriftart nicht zu unterschätzen, denn mit der richtigen Kombination kreativer Webfonts, die den Charakter Ihrer Seite widerspiegeln und auch im Responsive Webdesign eine gute Figur machen, hinterlassen Sie bei Ihren Lesern einen positiven Eindruck.

Webtypografie – von Browser-Schriften zu modernen Webfonts

Die Rolle der Webtypografie hat sich in den vergangenen Jahren stark verändert, was vor allem auf technische Fortschritte und die dadurch entstandenen Möglichkeiten zurückzuführen ist. In den Anfängen von HTML und Co. war es beispielsweise noch so, dass Schriftarten und -stile durch die Einstellungen des verwendeten Internetbrowsers definiert wurden und nicht etwa durch den Code der Website. Erst mit dem mittlerweile veralteten <font>-Tag erhielten Entwickler das notwendige Werkzeug, selbstgewählte Schriftarten einzubinden. Nutzer konnten die jeweiligen Fonts jedoch nur laden, wenn diese auch auf ihrem Computer installiert waren; ansonsten wurde auf einen „Fallback-Font“ – in der Regel einen Browser-Standard-Font – ausgewichen.

Dank der Trennung des Inhalts (HTML) von gestalterischen Mitteln in Cascading Style Sheets (CSS) und der Implementierung des Font-Downloads in Webbrowsern können Webdesigner heutzutage bei der Webseitengestaltung auf die sogenannten Webfonts zurückgreifen. Dabei handelt es sich um digitalisierte Schriftarten. Der Browser des Nutzers erhält beim Laden der Seite den Hinweis, auf welchem Server die jeweiligen Webfonts liegen und ruft diese dort ab. Dadurch sehen Besucher der Website die gewählte Schriftart, selbst wenn diese nicht auf ihrem Computer installiert ist.

Seit der Entwicklung des Web-Open-Font-Formats (2007) werden Webfont-Lizenzen von einer immer größer werdenden Zahl an Anbietern zu unterschiedlichsten Konditionen verkauft. Dabei variieren vor allem der Preis und die Bezahlmethode sowie die Art des Hostings (auf dem eigenen Server oder auf dem Server des Anbieters). Aufgrund des Wettbewerbs, der vor allem durch die hohe Bedeutung der Typografie für mobile Geräte zustande kommt, stehen Designern zahlreiche moderne und kreative Webfonts zur Auswahl.

Webfont-Kategorien und ihre Anwendungsgebiete

Mit dem Begriff Schriftart fasst man sämtliche Schriftzeichen zusammen, die nach einem identischen Gestaltungskonzept entworfen wurden. Existieren mehrere Varianten solch einer Schriftart, die sich bspw. hinsichtlich der Strichstärke oder Laufweite unterscheiden, dann bezeichnet man sie als Schriftfamilie.

Die unterschiedlichen Schriften eignen sich für verschiedene Einsatzgebiete. Bei der Auswahl einer Schriftart sollte man daher vor allem auf zwei Dinge achten: die Lesbarkeit der Schrift und ihre emotionale Wirkung. Dabei spielt auch das Medium eine große Rolle. Bei sogenannten Serifenschriften weisen die einzelnen Buchstaben am Ende der Buchstabenbalken kleine Querstriche auf, die ein flüssiges Lesen kleingedruckter Texte erleichtern. Für das Lesen am Monitor ist diese Schriftart allerdings nicht immer ideal.

Funktion und Position im Text sollten die Wahl der Schriftart ebenfalls beeinflussen: Während besonders auffällige Schriften in den Überschriften für die gewünschte Aufmerksamkeit sorgen, wirken sie im Fließtext oft deplatziert. Aus diesem Grund verwenden Webdesigner häufig mehrere unterschiedliche Schriftarten oder Schriftschnitte (so nennt man die Varianten innerhalb einer Schriftfamilie) in einem Textes. Allerdings sollte man es hierbei nicht übertreiben, da die Website sonst schnell überladen wirkt.

Auch hinsichtlich ihrer Wirkung unterscheiden sich die einzelnen Schriften sehr stark voneinander. Die nachfolgende Tabelle bietet einen Überblick, welche Schriften für welche Texte besonders geeignet sind und welchen Assoziationen sie beim Leser auslösen.

Die hier aufgelisteten Eigenschaften der unterschiedlichen Webfont-Kategorien stellen nur die allgemeinen Erwartungen dar. In der Praxis ist oftmals gerade der Einsatz unerwarteter Fonts ein probates Mittel, sich von der Konkurrenz abzuheben. Um die passenden Webfonts zu finden, sollten Sie folgende Ratschläge beherzigen:

  • Berücksichtigen Sie bei der Wahl Thema und Zielgruppe: Eine optisch überzeugende Kombination kreativer Webfonts ist nutzlos, wenn Sie nicht zum Thema der Website passt. Sachlichkeit vermittelt am ehesten ein Mix aus Serifen- und Sans-Serif-Schriften. Handschriften sind auffälliger und wirken lebendiger. Sie verleihen Ihrer Seite eine persönliche Note, sollten aber sparsam genutzt werden. Schreibschriften werden oft zu feierlichen Anlässen verwendet, beispielsweise auf Hochzeitseinladungen oder Geburtstagskarten.

  • Je mehr Text Ihre Seite beinhaltet, desto stärker sollten Sie die Funktionalität in den Vordergrund stellen. Neben einer guten Lesbarkeit sollten Sie auch berücksichtigen, dass Nutzer mobiler Geräte Ihre Seite standardmäßig über die mobile Datenübertragung aufrufen und zu spezielle und selten genutzte Schriftarten die Ladezeit unnötig verlängern.

  • Begrenzen Sie die Anzahl verwendeter Schriftarten. In der Regel hat sich der Einsatz zwei verschiedener Fonts bewährt, wobei einer für Fließtexte und der andere für Überschriften und spezielle typografische Auszeichnungen genutzt wird.

  • Suchen Sie nach Schriftarten, die sich unterscheiden und einen guten Kontrast schaffen. Das Zusammenspiel von Serif- und Sans-Serif-Schriften ist hierfür ein gutes Beispiel. Achten Sie aber auf ein gesundes Maß: Liegen die gewählten Webfonts stilistisch zu weit auseinander, sorgt das eher für Spannungen, die auch dem Website-Besucher nicht entgehen werden. Sind die beiden Schriften sich zu ähnlich, erzeugt das erfahrungsgemäß ebenfalls einen negativen Effekt.

So finden Sie kreative Webfonts für Ihre Seite

Anbieter moderner Webfonts verkaufen Ihnen digitale Schriftarten mit verschiedenen Lizenz-Modellen, wodurch Sie z. B. entweder einmalig für den Besitz der Fonts oder für die Dauer ihrer Nutzung bezahlen. Im ersten Fall hosten Sie die Fonts selbst, im zweiten erhalten Sie in der Regel einen Link zum Server des Anbieters, auf dem die Webfonts gespeichert sind. Zusätzlich zu den kostenpflichtigen Schriften gibt es auch eine Reihe von Open-Source-Schriften: Solche Fonts werden allerdings von sehr vielen Webdesignern verwendet.

Wenn Sie Ihre Website mit außergewöhnlichen, neuen Webfonts erstellen bzw. optimieren möchten, sollten Sie die Angebote verschiedener Webfonts-Anbieter vergleichen. Einige interessante Dienste haben wir an dieser Stelle für Sie aufgelistet:

  • Google Fonts: Kostenloser Font-Dienst von Google mit über 100 verschiedenen Schriftfamilien und verschiedenen Vorschaufunktionen.
  • Adobe Edge Webfonts: In der Sammlung von Adobe finden Sie über 500 moderne Webfonts zur kostenfreien Nutzung.
  • Font Squirrel: Anbieter mit hunderten Werbe- und Webfonts, die kostenfrei heruntergeladen werden können; Generator für eigene Fonts.
  • fonts.com: Kostenpflichtiger Anbieter von über 2000 verschiedenen Schriftfamilien; Monatsabonnement und diversen Sonderangeboten.
  • Linotype: Tausende Web-, Desktop- oder Server-Fonts, die einzeln oder im Paket erworben werden können; mit kostenlosem Vorschau-Tool.
  • Misprinted Type: Rund 50 zum Teil kostenfreie kreative Webfonts, die einzeln oder im Paket verfügbar sind.
  • MyFonts: Diverse Webfonts, die zum Großteil per Einmalzahlung erworben und 30 Tage lang getestet werden können; mit WhatTheFont können Sie per eingeschicktem Bild in Erfahrung bringen, um welche Webfonts es sich handelt.
Tipp

Sie brauchen noch ein Favicon für Ihre Webseite? Mit dem kostenlosen Favicon-Generator von IONOS können Sie im Handumdrehen Ihr eigenes entwerfen!


Auf dem Laufenden bleiben?

Jetzt für unseren Newsletter anmelden und gratis Online-Marketing Whitepaper für lokale Anbieter sichern!