Leitfaden zur Web-Typografie
Definitiver Leitfaden zur Website-Typografie: Design für Lesbarkeit
Die Auswahl einer Schriftart ist einfach: Sie müssen lediglich das Dropdown-Menü öffnen und auf einen Namen klicken. Die Wahl der richtigen Schriftart ist hingegen nicht so einfach. Es beinhaltet eine lange Liste von Überlegungen und ist eine der wichtigsten Entscheidungen, die Sie während des Prozesses der Gestaltung Ihrer Website treffen werden.
Professionelle Designer lernen die Grundlagen der Typografie meist im Rahmen ihres Studiums. Da sich jedoch immer mehr Menschen über Website-Builder oder ähnliche Tools an der Website-Erstellung beteiligen, wird das Verständnis der Website-Typografie auch für Nicht-Designer immer wichtiger. Um die Grundlagen der Website-Typografie aufzufrischen, enthält dieser Artikel daher Tipps, die Sie bei der Auswahl einer Schriftart für Ihre Website verwenden können, um das beste Leseerlebnis für Ihr Publikum zu gewährleisten.
Was ist Website-Typografie?
Jede Website hat Text, und wo Text ist, gibt es Typografie. Allgemein definiert bestimmt die Website-Typografie das Aussehen des Textes auf der Website. Es geht darum, wie die Wörter auf der Seite erscheinen, sowohl das Styling (die Schriftart, die Größe, der Abstand), als auch wie der Text auf der Seite erscheint.
Die Kombination all dieser Elemente sollte darauf abzielen, eine leichte Lesbarkeit des Textes zu gewährleisten. Darüber hinaus sollte die Website-Typografie auch Folgendes berücksichtigen:
- Kürzere Aufmerksamkeitsspannen, insbesondere online;
- Zugänglichkeit, weil Menschen auf unterschiedliche Weise mit Online-Texten interagieren;
- Skimmability, da die Leute oft keine Zeit haben, den gesamten Text zu lesen;
- Unterschiedliche Bildschirmgrößen, da Benutzer Websites auf verschiedenen Geräten durchsuchen.
Das Wichtigste, was man über Typografie wissen sollte, ist Folgendes: Wenn es funktioniert, merkt man es nicht. Wenn es nicht funktioniert, werden Sie wahrscheinlich nicht lange genug auf der Website bleiben.
Begriffe der Webtypografie
Um die Web-Typografie besser zu verstehen und sie schließlich in Ihre Website einzuführen, wollen wir zunächst einige grundlegende Typografie-Begriffe behandeln und verstehen, wie sie auf die Web-Typografie angewendet werden können.
1. Schriftarten
Eine Schriftart ist ein bestimmtes Aussehen und eine Reihe von Merkmalen, die auf eine Gruppe von alphabetischen, numerischen und Interpunktionselementen angewendet werden. Wenn „Sind das nicht die Schriftarten?“ war Ihre erste Frage, Sie sind nicht allein: Das ist ein weit verbreiteter Irrglaube.
Die Schriftart ist eine bestimmte Instanz einer Schriftart; sie sind Teile der Schrift. Sie werden dann durch ihr Gewicht (fett oder hell), ihre Größe (14px oder 24px) oder andere Stilisierungen (kursiv, unterstrichen usw.) unterschieden. Um ein Beispiel zu nennen, sind Helvetica Bold (16px) und Helvetica Regular Italic (24px) Schriftarten , und sie sind Teil der Schrift Helvetica. Schriftarten werden oft auch als Schriftfamilien bezeichnet, da sie ein weit gefasster Begriff für Schriftarten mit ähnlichen Eigenschaften sind.
Viele Schriftarten entsprechen nur zwei Schriftarten: Serif und Sans-Serif. Serifenschriften enthalten normalerweise kleine Verzierungen am Ende, Sans-Serif-Schriften nicht. Hier ist eine einfache Möglichkeit, sie zu unterscheiden: „Sans“ bedeutet auf Französisch ohne.
Abgesehen von diesen beiden stehen auch andere Schriftarten zur Verfügung, von denen eine das Skript ist. Diese Typen werden jedoch im Web weniger häufig verwendet, da sie auf Bildschirmen schwerer zu lesen sind.
2. Unterschneidung
Kerning ist der horizontale Abstand zwischen den beiden Zeichen eines Wortes. Unterschiedliche Schriftarten haben unterschiedliche Unterschneidungen, um die Lesbarkeit zu verbessern und unangenehme Lücken in den Wörtern zu vermeiden. Die Unterschneidungen können sich für die gleichen Zwecke auch zwischen verschiedenen Zeichen desselben Wortes unterscheiden.
Im zweiten Fall wird Kerning zwischen sich wiederholenden Ts hinzugefügt, um die Lesbarkeit zu verbessern.
3. Tracking
Ähnlich wie Kerning ist Tracking auch der Abstand zwischen Buchstaben. Anstelle des Abstands zwischen zwei einzelnen Zeichen ist Tracking jedoch der Abstand zwischen allen Buchstaben eines Wortes oder einer Zeile. Und ähnlich wie Kerning wird es auch angepasst, um die Lesbarkeit zu verbessern, ein Wort hervorzuheben oder andere Zwecke zu erfüllen.
4. Zeilenabstände
Zeilenabstand oder Zeilenhöhe ist der Begriff für den Zeilenabstand in der Typografie und spielt eine wesentliche Rolle dabei, den Text auf Ihrer Website lesbar zu machen. Durch Erhöhen des Zeilenabstands vergrößern Sie den Abstand zwischen den Zeilen, was im Allgemeinen die Lesbarkeit verbessert. Für eine gute Lesbarkeit sollte der Zeilenabstand in der Regel etwa 30 % größer sein als die Schriftgröße. Wenn Ihre Buchstabengröße beispielsweise 20 Pixel beträgt, wird ein Zeilenabstand von 26 Pixel empfohlen.
Die richtige Verwendung von Leerraum im Text soll das Textverständnis verbessern, da sie den Inhalt visuell in verdauliche Teile trennt und die Seite nicht überfüllt.
5. Hierarchie
Hierarchie ist die Reihenfolge des Textes auf Ihrer Website. Die meisten Websites, insbesondere textlastige (wie Blogbeiträge), versuchen, Texte in kleinere Abschnitte zu unterteilen, um sie besser verdaulich und überschaubar zu machen. Diese Abschnitte werden als Überschriften bezeichnet.
Die Texthierarchie ermöglicht es den Lesern, durch den Text zu springen und sich die Abschnitte anzusehen, die wichtiger sind oder nach denen sie suchen. Sie ermöglichen es Ihnen auch, hervorzuheben, welche Teile des Textes kritisch sind, während andere sekundäre Informationen sind.
Auf Websites kann die Texthierarchie durch verschiedene Schriftarten, Schriftgrößen, Farben oder andere Merkmale betont werden. In diesem Artikel sind Webtypografie-Begriffe beispielsweise eine Überschrift 2 (H2,), während die erwähnten Begriffe Überschrift 3 (H3) sind. Diese H3-Abschnitte werden zunehmend spezifischer, und ihr Aussehen weist darauf hin, dass sie ein Unterabschnitt eines allgemeineren Themas sind . Der Titel des Blogs ist normalerweise Überschrift 1 (H1). Hier ist ein Beispiel für die Texthierarchie, die in unserem Texteditor angezeigt wird.
Auswahl der besten Schriftart zum Lesen auf dem Bildschirm
Digitales Design entwickelt sich rasant weiter. Gab es vor wenigen Jahren nur eine Handvoll Schriftarten zur Auswahl, geht die Auswahl heute in die Tausende. Diese Schriftarten wurden für den Bildschirm erstellt und verfügen über Nuancen und Details, die sie auf verschiedenen Geräten lesbar machen.
Abgesehen davon gibt es ein paar Dinge, die Sie bei der Auswahl einer Schriftart für Ihre Website beachten müssen. Sie machen das Leseerlebnis auf Ihrer Website viel angenehmer und sorgen für ein besseres Kundenerlebnis.
1. Beschränken Sie die Anzahl der verwendeten Schriftarten auf ein Minimum
Eine gute Regel ist, bei einer oder zwei Schriftfamilien zu bleiben. Wenn Sie diese Zahl überschreiten, sehen Ihr Text und Ihre Webseite unstrukturiert, unprofessionell und manchmal sogar verwirrend aus. Dasselbe gilt für die Schriftgrößen: Zu viele Größen, besonders wenn sie miteinander gemischt werden, können für ein ziemlich chaotisches Seherlebnis sorgen.
Sobald Sie Ihre Schriftfamilien ausgewählt haben, bleiben Sie auf der gesamten Website bei ihnen. Wenn Sie sich für zwei Schriftfamilien entscheiden, ist es wichtig sicherzustellen, dass sie sich ergänzen oder zumindest harmonieren.
Sehen Sie sich die folgenden Beispiele für Schriftkombinationen an. Obwohl die Schriften im ersten Bild zu verschiedenen Schriftfamilien gehören und ziemlich unterschiedlich zu sein scheinen, überschattet keine der Schriften die andere. Die beiden Schriftarten sind gut ausbalanciert und ergeben eine harmonische Kombination.
Schauen wir uns nun eine andere Schriftpaarung an. In diesem Beispiel der Kombination Baskerville + Impact stellt Impact Baskerville bei weitem in den Schatten. Es lenkt die Aufmerksamkeit auf sich und schafft die Möglichkeit, dass der erste Teil des Textes ignoriert wird.
2. Versuchen Sie, sich an Standardschriften zu halten
Über Plattformen wie Google Fonts stehen Ihnen Tausende von Schriftarten zur Verfügung, die Ihnen aufregende Möglichkeiten bieten, etwas Neues und Aufregendes auszuprobieren. Eines kann jedoch schief gehen: Zu komplizierte Schriftarten können Ihre Website-Besucher ablenken. Um dies zu vermeiden, versuchen Sie, bei Standardschriftarten zu bleiben, es sei denn, es gibt einen wirklich besonderen Anlass, der benutzerdefinierte Schriftarten erfordert. Das Experimentieren mit Schriftarten macht Spaß, aber es ist wichtig zu bedenken, dass das Ziel guter Typografie darin besteht, die Leute dazu zu bringen, den Inhalt zu lesen.
3. Verwenden Sie eine Schriftart, die auf verschiedenen Geräten gut aussieht
Die Leute greifen von verschiedenen Geräten auf Ihre Website zu, von Smartphones und Tablets bis hin zu PCs. Um sicherzustellen, dass Ihre Website für die Leser zugänglich bleibt, entscheiden Sie sich für Schriftarten, die auf verschiedenen Bildschirmen gut aussehen und lesbar sind. Beginnen Sie mit der Verwendung einer Schriftart, die in verschiedenen Größen gut aussieht. Ein solches Beispiel ist die im Bild unten dargestellte Roboto-Schriftart.
Vermeiden Sie kursive oder verzierte Schriften. Sie sehen sehr schön aus, aber mit abnehmender Größe werden sie immer weniger lesbar, wie bei der Schriftart Comforter Brush unten.
Font-Pairing für Ihre Website
Werfen wir nun einen Blick auf einige wunderschöne Schriftartpaare, die Sie für Ihre Website verwenden können, um ein ausgewogenes und schönes Aussehen zu erzielen.
1. Lora & Merriweather
2. Roboto & Archivo Black
3. Bebas Neue & Old Standard TT
Fazit
Ausgestattet mit diesen Website-Typografie-Tipps und Know-how haben Sie jetzt genug Wissen, um mit dem Experimentieren zu beginnen. Spielen Sie mit der Typografie Ihrer Website herum, um Schrift- und Stilkombinationen zu finden, die sowohl gut aussehen als auch sicherstellen, dass Ihre Besucher ein großartiges Erlebnis haben. Wenn Sie die Ressourcen haben, organisieren Sie einen Benutzertest, um zu sehen, wie die Leute auf Ihre typografischen Entscheidungen reagieren. Oder bitten Sie einfach ein paar Freunde um Feedback. So erhalten Sie Einblicke in die Lesbarkeit Ihrer Texte und ob sie das gewünschte Ziel erreichen.
