Kuratierte Linksammlung für Webdesigner und -entwickler.
Web-Typografie Tipps

6 Regeln für eine bessere Website Typografie und Lesbarkeit

Lasst uns heute mal eine bessere Website-Typografie erzielen. Keine Einwände? Super, dann lasst uns loslegen! Lange Zeit, als Entwickler und Designer Websites erstellten, stand Typografie nicht wirklich auf der Prioritätenliste. Dies war auf eine Reihe von Faktoren zurückzuführen: manchmal war es einfach der Mangel an verschiedenen websicheren Schriften und manchmal war es die Einhaltung der strengen SEO-Standards. Aber auch mangelndes Know-How war ein triftiger Grund:

in den frühen Anfängen des Webs und der Einbindung individueller und wartbarer Web-Schriften gab es noch keine versierten Webdesigner. Typografie-Experten und Fachleute waren Grafikdesigner, die widerum kein Verständnis für CSS, HTML und sogar JavaScript mitbrachten. Wozu auch, wenn ihre Tätigkeiten für den Druck ausgerichtet sind. Dennoch waren es eine Menge Grafikdesigner, die das Business-Potential für sich erkannt hatten, diese Lücke füllten und schlussendlich Web-Skills in ihr Portfolio aufnahmen.

Anzeige

Jetzt, aufgrund der Anzahl der mit dem Internet verbundenen Geräte und unserer Fähigkeit Inhalte unaufhörlich zu konsumieren – und seien wir mal ehrlich, wir tun es permanent – , erfordern digitale Medien einen starken typographischen Sinn, um ihren Inhalt der Masse zu übermitteln.

In diesem angepassten Artikel (ursprünglich von Matthew Farleo) sind 6 prägnante und einfach umzusetzende Regeln enthalten, um die Typografie deiner Website für eine bessere Benutzererfahrung zu optimieren.

Richte eine visuelle Hierarchie ein

Jedes Design basiert auf visueller Kommunikation. Eine Schlüsselkomponente für erfolgreiches Design beinhaltet immer die Erstellung einer Hierarchie. Und bei Web-Typografie ist es nicht anders. Dies bedeutet, dass eine deutliche Größentrennung zwischen Überschriften, Zwischenüberschriften und dem Body-Text gewährleistet ist. Durch die Einrichtung einer visuellen Hierarchie können Benutzer den Inhalt scannen und schnell und einfach den Inhalt finden, der sie interessiert. Im nächsten Schritt „Übersichtlich schreiben“ werde ich dir dazu konkrete Tipps geben.

Darüber hinaus ermöglicht die Erstellung konsistenter Designmuster auf deiner Website Benutzern eine nahtlose Navigation durch die Erfahrung ohne Verwirrung. Die Erstellung dieser Hierarchie hat auch einen praktischen Zweck, da sie mithilfe von HTML-Best Practices erstellt wird, um einen einfachen Leitfaden für die Crawler von Suchmaschinen zu erstellen, damit deine Website basierend auf den bewährten SEO-Methoden einen höheren Rang erreichen kann.

Übersichtlich schreiben

Schreibe deinen Text des Inhaltes willen, nicht des Wortes willen. Um den Text übersichtlich zu gestalten kannst du dich durch folgende Auflistung inspirieren lassen:

  • Wähle einen aussagekräftigen Titel <H1> oder <H2> (das hängt von der Content-Struktur der Website ab).
  • Verwende Aussagekräftige Untertitel <H2>, <H3>, <H4> um den Text optisch sinnvoll zu gliedern.
  • Verwende kurze Sätze mit maximal 15 Wörter.
  • Teile deinen Text in mehrere kurze Abschnitte auf. Verwende für einen Absatz minimal 3 und maximal 7 Zeilen.
  • Verwende Markierungen innerhalb des Textes (wichtigste Aussage pro Absatz fett), um den Text überfliegbar zu machen – und die Kernaussagen hervorzuheben.
  • Stelle Hintergrundinformationen bereit. Verlinke dabei auf andere Seiten oder Dokumente um Worte oder Textpassagen zu erläutern.
  • Weitere Möglichkeiten: Aufzählungen, Eindrückungen, Linien, Flächen oder Tabellen.

Diese Punkte können der Übersicht beim Lesen behilflich sein. Dadurch wirkt der Inhalt nicht nur attraktiv, sondern hilft auch Lesern mit geringerer Aufmerksamkeitsspanne.

Eine Grundregel der Typografie ist der Verzicht: Sei sparsam mit Auszeichnungen!
Ein Artikel, in dem jedes zweite Wort kursiv, unterstrichen oder fett ist, wirkt unruhig und liest sich schlecht.

Schriftauswahl und -größe

Bei der Auswahl der Schriftart ist es wichtig zu überlegen, welche Schriftarten die Marke verwendet und ob sie für die Verwendung auf der Website verfügbar sind. Dies hängt mit dem Lizenzierungsmodell von Schriftarten zusammen.

Wenn du eine Schriftart kaufst, hast du entweder eine Lizenz für gedruckte Inhalte oder für Digitale (die auf der Anzahl der Besucher bzw. Ansichten basiert).

Wenn die Schriftarten der Marke nicht verfügbar sind, bietet Google eine fantastische Auswahl an kostenlosen websicheren Schriftarten zur Verwendung deiner Website an. Fast alle Markenschriftarten können durch die enorme Auswahl in dieser Bibliothek nachgeahmt werden.

Vergleiche mal, ob das Selbst hosten von Fonts für dich sinnvoller ist oder Hosting-Dienstleister, wie eben Google:

Schriftgröße für den Fließtext

Bei der Wahl der geeigneten Schriftart solltest du darauf achten, dass die Schriftgröße für den Body-Text bzw. Fließtext mindestens 16 Pixel (manchmal so sogar 20 Pixel, abhängig von der Schriftart) beträgt. Dies mag dir vermutlich groß erscheinen, aber dies hilft bei der Zugänglichkeit und verursacht weniger Belastung für die Augen. Teste einfach mal.

Ausrichtung und Abstand

Denke an physische Medien, die du normalerweise liest (Romane, Zeitungen, Zeitschriften usw.). Allen gemeinsam haben eine kurze Zeilenlänge. Wenn ein Benutzer deine Inhalte liest, möchtest du, dass er sie lesen kann, ohne den Kopf zu bewegen. Dies bedeutet, dass deine Texte nicht mehr als 13 Wörter pro Zeile betragen sollten. Dies hilft Nutzern, Deine Inhalte leichter zu erfassen. Aufgrund responsiver Layouts könnte sich daraus wieder ein neues Hindernis bilden, da je nach Ausgabeformat die Zeilenlänge variiert. Dazu habe ich in der Vergangenheit eine immernoch sehr aktuelle und aufschlussreiche Artikelserie geschrieben, die dir Lösungen für Typografie im Responsive Webdesign bietet:

Befreie Dich von Lorem Ipsum

Bei der Gestaltung einer Website oder eines digitalen Produkts ist es wichtig zu verstehen, wie der endgültige Inhalt aussehen wird. Lorem ipsum ist eine großartige Lösung für erste Konzepte, aber je länger es im Design bleibt, desto schmerzhafter wird es, das Design auf der Grundlage neuer Inhaltstypen zu ändern und zu modifizieren. Normalerweise ist das Entwerfen ohne Inhalt nie eine gute Idee: es ist schwer vorherzusagen, was in Bezug auf den Body-Inhalten verfügbar sein könnte, da Designer selten Experten auf dem Gebiet sind, für das ihre Website typisch ist.

Text mit einem kontrastierenden Hintergrund

Text und Hintergrund sollten nie ähnliche oder aufeinander abgestimmte Farben haben. So wirkt der Text transparent und verliert an Aufmerksamkeit und wird dadurch leichter überlesen. Die Farbe und der Hintergrund sollten immer im starken Kontrast zur verwendeten Schriftfarbe stehen.

Wenn der Text Schwarz ist, sollte die Hintergrundfarbe vorzugsweise Weiß oder einen sehr hellen Farbton haben. Auf diese Weise hebt sich der Text vom Hintergrund ab und lässt sich gut lesen.

Außerdem solltest du hierbei beachten, dass Google ähnlich aufeinander abgestimmte Farben von Schrift und Hintergrund als Spam werten kann. Ein helles Grau für die Schriftfarbe zu verwenden, wenn der Hintergrund Weiß ist, ist denkbar ungünstig.

Die alten SEO-Nerds werden es vielleicht noch wissen: als Google noch in den Kinderschuhen steckte, nutzten eine hohe Anzahl an Seitenbetreibern und sogenannten Online-Marketern die Unreife des Suchmaschinengiganten aus, in dem sie mit weißer Schrift auf weisem Hintergrund aufeinander abgestimmte Keywords in den Beiträgen hinterlegten. Besucher kamen über die Suchmaschinen auf die Seiten und wurden dann auf Produkte aufmerksam gemacht, die kaum etwas mit den verwendeten Suchanfragen gemeinsam hatten. Ziemlich schmutziges SEO. Heute undenkbar. Aber es hatte funktioniert.

So, zurück zum Thema. Letzter Punkt:

Fließtext

Verwende Fließtext, der in einem Stück und ohne Unterbrechungen durch Absätze, Überschriften, Abbildungen, Fußnoten und Ähnliches gesetzt wird. Daraus ergibt sich eine saubere Optik.

Inspiriert durch

gomedia.com

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Jonathan Torke
Jonathan Torke

Auf pixeltuner.de teile ich aktuelle Ressourcen für Webdesigner und -entwickler. Du findest mich auch auf deviantART und Instagram.
PayPal-Kaffeespende.

Schreibe einen Kommentar

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

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige