ORC Webhosting GmbH Landquart/Schweiz

Leitfaden zur Web-Typografie

Typography

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.

Informative Image

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.

Font Image

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.

Photo Inspiration Image

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.

Text Alternatives

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.

Tracking

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.

Zeilenabstände

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.

Hierarchie

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.

Different Fonts

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.

Books of the months image

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.

Fonts

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.

Font images

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.

Text Sizes

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.

Text Fonts

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

Font Pairing for Website

2. Roboto & Archivo Black

Roboto & Archivo Black

3. Bebas Neue & Old Standard TT

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.

Silvio Mazenauer

Silvio Mazenauer

Seit mehr als 20 Jahren helfe ich unseren Kundinnen und Kunden, sich mit Webhosting, Domains, Websites oder cPanel zurechtzufinden. Und ich bin hier, um auch dir zu helfen.

Bleib up to date:

Hier erfährst du Wissenswertes, Nützliches und Interessantes rund um die Themen Domains, Webhosting, SEO, WordPress und vieles mehr. ….

Auch Interessant

Schnelles WordPress-Hosting für deine Website

Entfalte das volle Potenzial deiner Website mit unserem leistungsstarken WordPress Hosting

Deine KOSTENLOSE digitale Arbeitsplattform. Mit XtraMail hast du dein Büro überall mit dabei.

Erlebe Deine eMail wie nie zuvor mit XtraMail.

Deine E-Mail-Lösung für Privat und Business: XtraMail Webmail. Mit E-Mails, Videokonferenzen, Dokumenten, Kalendern, Kontakten und einer mobilen App – plus über 40 weitere nützliche Funktionen.

xtramail webmail teamwork