Schriften im Web – Websichere Schriften & Webfonts

Schriften beeinflussen Entscheidungen

Schriften im Web – Websichere Schriften & Webfonts

Schriften im Web – Websichere Schriften & Webfonts 1000 500 Face & Content - Agentur für Webdesign

Zunächst einmal sind Schriften im Web wie alle Schriften, wenn es um Gestaltung geht. Sie kleiden Wörter und Sätze. Sie erzählen uns ein wenig über das Gesagte hinaus. Sich für die eine oder andere Schrift zu entscheiden, kann funktionelle oder ästhetisch-emotionale Gründe haben. Und nicht selten beeinflussen Schriften (so auch Webfonts) unsere Entscheidungen.

Verwendung von Schriften im Print oder Web – macht das einen Unterschied?

Das Leseerlebnis auf Papier ist nicht gleich der Reader Experience im Web auf hinterleuchteten Screens mit ihren unterschiedlichen Größen und Formaten. Hier werden von den Schriften im Web Eigenschaften abverlangt, die sich etwas von den Schriften für Print unterscheiden. Um den Unterschied zu verstehen, muss man sich die Entwicklung der Schriften seit Internetnutzung etwas genauer anschauen.

Webfonts sind quasi die Akrobaten unter den Schriften. Sie vollführen einen Spagat zwischen den Betriebssystemen und allen gängigen Browsern, um eine gute Show abzuliefern. Etabliert haben sie sich erst so richtig in den letzten 10 Jahren. Davor prägten die websicheren Schriften die Weblandschaften.

Was sind websichere Schriften?

Websichere Schriften sind, verkürzt gesagt, die Gruppe der Schriften, die in allen Betriebssystemen mit absoluter Gewissheit zu finden sind. Diese Gruppe der websicheren Schriften ist eine Schnittmenge der Systemschriften von Windows und Mac und wird gebildet von Arial, Georgia, Times New Roman, Courier New, Lucida Sans und Verdana.

Websichere Schriften
Websichere Schriften

Sechs websichere Schriften lassen eine magere Auswahl erkennen und Websites auf Ebene der Webtypografie uniform erscheinen. Aber wie wir heute wissen, hat sich da einiges getan. Denn inzwischen prägen Webfonts die Gestaltung der Websites deutlich.

Was genau sind Webfonts?

Webfonts gehören nicht zwangsläufig zu den Schriften aus der installierten Schriftbibliothek Ihres Rechners. Wird eine Website aufgerufen, greift der Browser nicht mehr auf die websicheren, vorinstallierten Schriften zurück, sondern folgt den hinterlegten Anweisungen, wo er die definierten Webfonts findet und auslesen soll. Dabei kann man öffentlich verfügbare Schriften wie die GoogleFonts nutzen oder selbstgehostete Schriften bereitstellen.

Alle Webfonts sind Vektorschriften, die sich verlustfrei skalieren lassen. Das bedeutet also, sie geben uns immer ein scharfes Schriftbild in allen Betriebssystemen ungeachtet der Bildschirmauflösung.

Font-Entwickler der Webfonts schauen besonders auf die Gestaltungsparameter Mittellängen, Strichstärkenkontraste und Zeichenabstände, um Schriften die nötigen Webeigenschaften für eine perfekte Darstellung zu verleihen. Zusätzlich erhalten Webfonts über das Hinting (Hint = Hinweis) Informationen, wie die Schriften unter diversen Auflösungen ausgebildet werden sollen, um eine gute Lesbarkeit von klein bis groß zu gewährleisten.

Kreative werden nicht müde neue Schriften zu entwickeln und so füllen sich auch die Bibliotheken der Webfonts. Mit Webfonts haben sich die Gestaltungsmöglichkeiten im Webdesign erhöht. Mit Schriftarten lassen sich Metabotschaften transportieren. Wir Leser reagieren auf Schriftenarten. Sie lösen Emotionen in uns aus. Das passiert so unbemerkt, wie wir auch kaum wahrnehmen, wenn das Verkaufskonzept eines Ladens auf angenehme Duftreize setzt und sich tatsächlich damit der Umsatz steigern lässt.

Schriftarten und ihre Klassifizierung

Die große Auswahl an Schriften mit ihren vielgestaltigen Unterscheidungsmerkmalen wird für einen besseren Überblick klassifiziert. Dabei gibt es unterschiedliche Modelle. Im deutschsprachigen Raum regelt das die DIN 16518, die sich aktuell in Überarbeitung befindet. Die Klassifizierung nach DIN 16518 sieht folgende Gruppen vor:

  • Gruppe I: Venezianische Renaissance-Antiqua
  • Gruppe II: Französische Renaissance-Antiqua
  • Gruppe III: Barock-Antiqua
  • Gruppe IV: Klassizistische Antiqua
  • Gruppe V: Serifenbetonte Linear-Antiqua
  • Gruppe VI: Serifenlose Linear-Antiqua
  • Gruppe VII: Antiqua-Varianten
  • Gruppe VIII: Schreibschriften
  • Gruppe IX: Handschriftliche Antiqua
  • Gruppe X: Gebrochene Schriften
  • Gruppe XI: Fremde Schriften

An der DIN 16518 wird unter anderem kritisiert, dass sie sich nicht an der neueren Entwicklung der Schriften orientiert. Eine Klassifikation nach Formprinzip wird von einigen Schriftexperten befürwortet.

Ein wesentliches und vielleicht auch das wichtigste Unterscheidungsmerkmal von Schriften ist das Vorhandensein (serif) oder Nichtvorhandensein (sans serif) von Serifen (die kleinen schnörkeligen Anhängsel am Buchstaben).

Schauen wir einmal darauf, wie die frei verfügbaren Schriftbibliotheken im Web ihre Unterteilung vornehmen, um es Anwendern leichter zu machen sich innerhalb der großen Auswahl an Schriften zurechtfinden:

Google Fonts

  • Serif
  • Sans Serif
  • Display
  • Handwriting
  • Monospace

Font Squirrel

  • Sans Serif
  • Display
  • Serif
  • Script
  • Slab Serif
  • Handdrawn
  • Monospaced
  • Dingbat
  • Retro
  • Novelty
  • Comic
  • Stencil
  • Blackletter
  • Calligraphic
  • Typewriter
  • Pixel
  • Programming
  • Grunge

Sie sehen, eine Klassifizierung oder Kategorisierung kann ganz unterschiedlich ausfallen.

Wie man die richtige Schrift für sein Projekt findet

Die Schriftart passt zum Zweck des Projekts

Die Erscheinung der Schrift wirkt bei der Zielgruppe positiv, ruft die gewünschte emotionale Stimmung hervor und passt demzufolge gut zum Verwendungszweck. Wir assoziieren mit Schriftanmutungen Dinge, Sachverhalte, die wir bereits mit Schriften im Zusammenhang erlebt haben. Ein eindeutiges Beispiel hierbei sind die Comicschriften. Wir würden diese sicherlich nicht in die engere Wahl für die Website einer Anwaltskanzlei in Betracht ziehen.

Das Design der Schrift ist ‚reich‘

Ihre Schriftauswahl sollte grundlegende Schnitte und Stile (regular, regular-fett, kursiv, kursiv-fett) aufweisen. Alles darüber hinaus wird Ihnen vielfältige Gestaltungs­möglichkeiten innerhalb einer Schrift ermöglichen. Wenn Sie auch über die Breiten Kontrolle haben, bieten Schriften weitere Nuancen Einfluss auf die Lesbarkeit zu nehmen. Verfügt die Schrift auch über alternative Glyphen, erhöht das die Möglichkeiten der Ausgestaltung innerhalb einer Schrift um einiges.

Haben Sie eine eventuelle Mehrsprachigkeit der Website im Hinterkopf, berücksichtigen das auch bei der Wahl der Schrift. Sofern das ein Thema für Sie sein könnte, ist es sehr hilfreich, wenn die Schrift gleich zu Beginn Unterstützung für mehrere Sprachen leistet.

Schriften für Fließtexte

Bei der Schriftwahl zuerst auf den Fließtext oder Lesetext zu schauen macht Sinn, denn hier steckt der Inhalt, der mit einer guten Lesbarkeit besseren Zugang in die Köpfe der Leser findet und das Lesen eines Textes erleichtert. Nicht jede Schrift weist das Prädikat ‚gut lesbar‘ auf. Allgemein gilt, dass Schriften mit Serifen eine gute Lesbarkeit befördern.

Schriften für Überschriften

Für die Überschriften kann man abweichend vom Fließtext eine zweite Schrift wählen. Man muss aber nicht. Auch innerhalb einer Schrift gibt es gewöhnlich Ausgestaltungs­optionen. Möchten Sie mit weniger Spannung und mehr Ruhe für das gesamte Schriftbild arbeiten, bleiben Sie reduziert bei einer Schrift.

Ein Mix von Schriften – geht das gut?

Verschiedene Schriften im Webdesign zu verwenden ist recht üblich. Der Schnellleser oder man könnte auch sagen der Scanner unter den Seitenbesuchern, sucht visuelle Ankerpunkte. Mit unterschiedlichen Schriften erreicht man eine deutlichere, visuelle Trennung der Textteile und das kann einer schnelleren Einschätzung des Inhaltes dienlich sein. Das wäre dann ein funktionaler Grund Schriften zu mischen. Daneben gibt es noch ästhetisch-emotionale Beweg­gründe, denn mit Schriften lassen sich bekanntlich auch Metabotschaften transportieren, die beim Seitenbesucher ein Gefühl von ‚hier bin ich richtig‘ erzeugen.

Bei einem Mixcocktail von Schriften stellt sich schnell ein ‚Zuviel des Guten‘ ein. Mit zwei Schriften sind sie auf der sicheren Seite. Wählen Sie maximal drei Schriften, wenn es funktionale Gründe dafür gibt.

Schriftlizenzen

Prüfen Sie die Schriftlizenz. Auf der Suche nach Schriften kann man sich im großen Angebot verlieren. Verlieren Sie dabei aber nicht die Sorgfalt. Vergewissern Sie sich, dass die gewählte Schrift für Ihre Verwendung frei ist oder der Erwerb einer Lizenz nicht versäumt wird.

Lizenzen für Schriften können vielgestaltig sein. Sie regeln, wo, wie und manchmal auch wie oft eine Schrift zum Einsatz kommen darf. So ermöglichen Webfonts-Lizenzen beispielsweise die Einbindung entsprechender Schriften auf Websites und schließen die Nutzung für Print aus. Wenn Sie offline und online mit einem einheitlichen Look Ihre Firmenidentität verwirklichen möchten, achten Sie auch eine möglichst offene Lizenzierung der verwendeten Schriften. Auf den Plattformen können sie für gewöhnlich unter einem Reiter Lizenz mehr zu den Nutzungsmöglichkeiten der gewählten Schrift erfahren.

Kostenlose Schriften für den kommerziellen Gebrauch finden Sie auf

Andere Bibliotheken mit freien, eingeschränkten oder kostenpflichtigen Schriften finden Sie auf

In der Rubrik ‚Free Fonts for Commercial Use‘ werden die freien Schriften für den kommerziellen Gebrauch auf 1001 Fonts herausgefiltert.

Webfonts im Webdesign

Seitdem Schriften im Web als Webfonts losgelöst von Betriebssystemen auf Websites eingesetzt werden können, ist das Webdesign in eine neue Dimension gekommen. Webdesign hat damit eine Gestaltungsebene zusätzlich erhalten und kann ähnlich dem Print eine individuelle Typografie auf Websites erreichen.

Webfonts auf WordPress-Websites

Für WordPress bedeutet das: wenn sie nicht über das aktive Theme die Option haben auf eine Webfonts­bibliothek zuzugreifen, kann man das mit einem Plugin nachrüsten. Nutzen Sie Google Fonts auf Ihrer Website, vergessen Sie den entsprechenden Hinweis in der Datenschutzerklärung nicht.

Webfonts selber hosten

Wer firm ist mit seiner WordPress-Installation und der Ordnerstruktur auf dem Server der Website, kann sich die gewünschten Webfonts auch dorthin legen und sie damit selbst hosten. Das ist sicher die charmanteste Lösung im Hinblick auf Datenschutz und Performance. Webfonts, die auf einem anderen Server liegen, können die Ladezeiten erhöhen.

Schriften im Web beeinflussen Entscheidungen

In fast jedem Bereich unseres Lebens interagieren wir mit Schrift und das setzt schon weit vor unserem Lesevermögen ein. Wie wirken Schriften auf uns und auf das, was wir lesen? Werden damit unsere Entscheidungen, die wir treffen, beeinflusst?

Ja, sagen Experten. Bestimmte Schriftstile rufen in uns Erfahrungen und Assoziationen hervor. Wir haben die Verwendung von Schrift­anmutungen auf einen Kontext bezogen abgespeichert und die Stimmung, die wir damit erlebt haben, bleibt als Erinnerung. Wenn wir Schriften sehen, sehen wir sie assoziativ und sind meist vorein­genommen. Somit können Schriften Qualitäts­ansprüche oder Bildungs­ansprüche suggerieren, Dinge leicht und fröhlich erscheinen lassen, Vertrautheit hervorrufen und vieles mehr.

Eindrucksvoll hat diese Zusam­men­hänge Sarah Hyndman in ‚Why Fonts Matter‘ (ISBN 978-0-7535-5723-5) aufgeführt.

Wer den bedeutenden Einfluss von Schriften auf den Leser erkennt, der versteht auch, warum es hilfreich sein kann, sich mit Schriften für die Verwendung auf Websites näher zu befassen.

Back to top

Datenschutz-Einstellungen
Unsere Website verwendet Web Fonts von Google. Durch die Nutzung dieser Web Fonts wird es möglich, Ihnen die von uns gewünschte Darstellung unserer Website zu präsentieren unabhängig davon, welche Schriften Ihnen lokal zur Verfügung stehen. Dies erfolgt über den Abruf der Google Web Fonts von einem Server von Google in den USA. Sie können hier darauf Einfluss nehmen.

Diese Website verwendet nur essenzielle Cookies. Der 'resolution'-Cookie merkt sich die Bildschirmgröße und unterstützt so die richtige Ausgabegröße für diverse Endgeräte. Das VG Wort Zählpixels ist für den Betrieb der Webseite essenziell, um die Kopierwahrscheinlichkeit einzelner Texte durch die VG Wort zu erfassen und somit die Vergütung gesetzlicher Ansprüche von Autorenschaften zu ermitteln. Es wird über den Einsatz des Zählpixels näher in der Datenschutzerklärung aufgeklärt. Der 'eut-privacy-consent'-Cookie merkt sich, ob Sie Ihr Einverständnis zur Cookieverwendung gegeben haben, damit Sie nicht mit jedem Seitenbesuch erneut Ihr Einverständnis erklären müssen.