Dieter Petereit 26. Februar 2018

Typographie für jedermann: So werden deine Texte wesentlich lesbarer

Wenn du als Seitenbetreiber denkst, Typographie brauche dich nicht zu interessieren, dann irrst du. Die reine Lesbarkeit deiner Texte ist nämlich auch schon eine Frage der Typographie. Und um genau diese Typographie für jedermann will ich mich im folgenden Beitrag kümmern.

Natürlich ist Typographie seit jeher eines der wichtigsten Elemente im klassischen Design. Studierst du Grafikdesign oder verwandte Fächer, so gehört Typographie direkt im ersten Semester zu deinem täglich Brot. Ich will hier aber nicht auf akademischem Niveau theoretische Abhandlungen verfassen.

Vielmehr geht es mir darum, auch dem Nichtdesigner den Wert der Umsetzung typographischer Grundlagen zu vermitteln. Mit den folgenden Tipps gestaltest du deine Texte wesentlich lesbarer und sorgst noch dazu für eine bessere Auffindbarkeit im bereits randvollen Weltennetz.

Beginnen wir mit den Tipps für komfortableres Lesen, die Designer Luke Jones von InVision bei Medium niederschrieb. Es handelt sich um drei kleine Änderungen, die sich ohne großen Aufwand an jedem Text vollziehen lassen. Nach dem zweiten oder dritten Mal wirst du diese Tipps so selbstverständlich anwenden, als hättest du es noch nie anders gemacht.

Tipp 1: Typographische Hierarchie strukturiert den Text

Wenn du mehr oder weniger regelmäßig ins Netz schreibst, dann ist dir schon bekannt, dass die Einhaltung der korrekten Hierarchie eines Textes ein wichtiger Faktor für die Auffindbarkeit deiner Inhalte in Suchmaschinen ist. Wahrscheinlich achtest du schon aus diesem Grund zumeist auf die richtige Auszeichnung.

Dabei sind es aber nicht nur die Suchmaschinen, die es weitaus leichter haben, sich durch einen sauber strukturierten Text zu arbeiten. Auch deine Leserinnen und Leser profitieren von einer logischen Unterteilung des Inhalts.

Es reicht oft, sich auf die Überschriften der Stufen eins bis drei (h1 – h3), den korrespondierend kleiner gesetzten Fließtext und die noch kleiner gesetzten Fußnoten zu fokussieren. Dafür gibt es ein paar sehr simple Annahmen, anhand derer sich eine saubere Struktur für jeden Text gut umsetzen lässt.

Dieses GIF zeigt sehr schön, wie schnell sich ein unlesbarer zu einem gut lesbaren Text wandeln lässt. Dazu braucht es nicht viel Aufwand. (Gif: Luke Jones, Medium)

Ausgangspunkt der Betrachtung ist stets der Fließtext, also das, was wir im Netz in die p-Tags schreiben. Dieser Fließtext ist der Index, hält also die Schriftgröße 100 Prozent. Alle anderen Elemente werden davon abgeleitet.

Zunächst gilt es demnach, den Fließtext auf eine angenehm lesbare Größe zu bringen. Das ist zu einem großen Teil Geschmackssache. Bei mir liegt dieser Wert bei 18 Pixeln, kleiner möchte ich es nicht haben. Gängige Publikationen liegen zumeist eher im Bereich um die 14 Pixel. Egal, welche Größe du konkret definierst, stets gilt, dass sie die Grundlage aller weiteren Elemente ist.

Hauptüberschriften (h1) sollten 180 bis 200 Prozent der Ausgangsgröße haben, sekundäre (h2) noch 130 bis 150 Prozent und tertiäre (h3) nur wenig mehr als der Fließtext selbst. Häufig siehst du h3 auch als bloßen Fettsatz. Bis 125 Prozent darfst du wohl problemlos gehen. Fußnoten und anderer, kleiner gesetzter Text, sollte 75 Prozent der Größe des Fließtext nicht überschreiten.

Auf diese Weise erreichen wir schon durch die Größen unterschiedlicher Textteile eine visuelle Hierarchie, die Orientierung bietet und das Lesen angenehmer gestaltet.

Tipp 2: Großzügige Zeilenhöhen erleichtern das Lesen

Wir alle sind schon mehr als einmal in Textwüsten verdurstet. Allein der Anblick eines wild dahin gewürfelten Buchstabenhaufens lässt die Kehle spontan trocknen. Dabei ist die Rettung so einfach: Trenne die einzelnen Zeilen sichtbar voneinander und bringe so den Lesefluss zum Strömen. Auch hierfür gibt es einfache Faustformeln.

Der Abstand einer Zeile zur vorhergehenden sollte zwischen 120 und 160 Prozent der Größe des Ausgangstextes entsprechen. Jones gibt als Faustregel den Tipp, dass ein liegendes kleines h in der Ausgangsgröße in den Zwischenraum passen sollte, ohne die oberen und unteren Spitzen der Buchstaben in den beiden Zeilen zu berühren. Durch klar voneinander getrennte Zeilen lassen sich die Wörter leichter erfassen, was zu einem schnelleren, aber auch angenehmeren Lesen führt.

Gleiches gilt für das Setzen des richtigen Abstands zwischen Absätzen. Früher betätigte man einfach die Zeilenschaltung doppelt, was aber in der Regel zu einem zu großen Abstand zwischen den Absätzen führt. Besser erscheint es daher, für den Abstand die Größe des Ausgangstexte zu verwenden.

Tipp 3: Lass die Zeilen nicht zu lang werden

Verwender großer Bildschirme kennen sicherlich diese Blogs, deren Betreiber ihre Seite so eingestellt haben, dass sich die Breite des Textes auf die Breite der Anzeige des Besuchers anpasst. Das nennt sich Fluid Design und ist ein valides Gestaltungsmittel, aber nicht in dieser Verwendung.

Gutes Beispiel eines lesbaren Spaltensatzes, allerdings wirkt sich die fehlende Silbentrennung negativ aus – siehe Tipp 7. (Ersteller: Pawel Kadysz)

Als angenehm zu lesen gelten Zeilenlängen von maximal 75 Zeichen. Dann sollte ein Umbruch erfolgen. Daraus resultiert der Mehrspaltensatz der altehrwürdigen Holzmedien. Natürlich gibt es auch zu diesem Thema abweichende Meinungen. Im recht breiten Konsens bewegst du dich, wenn du deine Zeilen irgendwo zwischen 40 und 80 Zeichen beendest.

In einspaltigen Layouts sollte laut Typographie-Papst Robert Bringhurst nach 65 Zeichen Schluss sein. Die erforderliche Breite für den Text in deinem Layout berechnest du nach Bringhurst so, dass deine geplante Schriftgröße nimmst und sie mit 30 multiplizierst. Wenn du also meine bevorzugte Schriftgröße von 18 Pixeln annimmst, kommst du so auf einen Wert von 540 Pixeln für die Textspalte.

Tipp 4: Verwende unterschiedliche Stärken der gleichen Schrift

Wenn du nun die grundlegenden Strukturen geschaffen hast, kannst du trotzdem noch den einen oder anderen Tipp umsetzen. Um Text differenzierter zu organisieren, als es mit bloßen Fettsetzungen und anderen Formatierungsoptionen möglich ist, empfiehlt sich der Einsatz unterschiedlicher Ausprägungen der gleichen Schrift.

Vielfach werden Schriften vollständig mit einem separaten Gewicht gestaltet und stehen dann auch als solche für den Einsatz zur Verfügung. Solche Typen sind weitaus attraktiver als die computerseitig verfügte Abwandlung der verwendeten Ausgangsschrift.

Zudem gibt es sie in mehr Variationen. Sollte ein und dieselbe Schrift mal keine Alternativen bieten, so kannst du auch den Einsatz einer Schrift aus der gleichen Familie erwägen. Dabei solltest du allerdings immer ganze Textteile ändern und nicht innerhalb des Fließtextes oder der Überschriften mischen.

Es sollte sich von selbst erschließen, dass dieser Tipp zugleich ein Plädoyer für den Einsatz von Web-Fonts ist. Verlasse dich nicht länger auf die konventionellen Systemschriften, die es auf jedem Rechner in der ein oder anderen Form gibt. Stattdessen nimm das Gestaltungsruder in die Hand und verwende interessantere Schriften, die sich gleichzeitig besser in ihrem Aussehen kontrollieren lassen.

Starten solltest du ganz niederschwellig mit den Schriften aus Google Fonts, die sich auch in WordPress-Seiten kinderleicht einbinden lassen. Kollege Denis Potschien zeigte dir jüngst seine Must-Haves für das Jahr 2018 in diesem Beitrag.

Tipp 5: Verwende nie mehr als zwei Schriften

Ich erinnere mich noch daran, dass früher alle Elemente einer Präsentation durch Powerpoint animiert auf die Leinwand flogen, gern garniert mit aufdringlichen Soundeffekten. Jede auf dem Computer installierte Schrift wurde auf wildeste Weise benutzt. Teilweise wurden gezielt furchtbare Schriften nachinstalliert. Augenärzte erlebten Hochkonjunktur. Gut, jetzt übertreibe ich es ein wenig…

Auch wenn es noch heute Häßlichkeiten gibt, bei denen die Augen spontan zu bluten beginnen, hat sich doch vieles zum besseren gewandelt. Nicht mal Powerpoint müssen wir heutzutage noch verwenden. Schau dir zum Beispiel Ludus an. Ich stellte es jüngst hier vor.

Es ist dennoch ein Tipp und vor allem seine Beachtung wert: Kombiniere nie mehr als zwei Schriften in einem Inhalt. Und selbst bei der Kombination dieser beiden Schriften, achte bitte darauf, keine gegensätzlichen Schriftkonzepte zu nutzen.

Dazu hat FastPrint eine Infografik gebaut, die sich mit der Kombinierbarkeit der beliebtesten Fonts aus Googles freier Schriftensammlung befasst. Schau mal rein.

Tipp 6: Finde Alternativen zu Microsofts langweiligen Schriften

Wenn du Calibri und Cooper besser kennst als deine Westentasche, dann ist Handlungsbedarf angesagt. Die Designer von Plato Web Design kommen zu Hilfe und bieten schickere Alternativen zu drögem Microsoft-Material.

Alternativen zu Microsofts langweiligem Angebot kann man immer brauchen. (Ausschnitt: Plato Web Design)

Das Ganze gibt es übersichtlich in dieser Infografik.

Tipp 7: Verwende die automatische Silbentrennung

MIt CSS3 hat die Eigenschaft hyphens Einzug gehalten. So ausgezeichnete Textbereiche, etwa die Paragraph-Tags, sollen dann im Benutzerbrowser zur Darstellung ordentlich getrennter Texte führen. Die Auszeichnung an sich ist sehr einfach:

p { hyphens: auto; }

Leider funktioniert die automatische Silbentrennung nur in Firefox, Safari, IE11 und Edge. Chrome unterstützt die Eigenschaft nur unter macOS und Opera gar nicht. Dabei kann eine automatisch getrennte Spalte so schön aussehen, wie dieses Beispiel von Mediaevents.de zeigt, das ich unter Verwendung von Edge als Screenshot verewigen konnte:

Im HTML-Tag muss für die ordnungsgemäße Funktion der Silbentrennung Deutsch als Sprache des Dokuments hinterlegt sein, also

<html lang="de">

Wenn du also die Möglichkeit hast, die Eigenschaft zu setzen, solltest du es in jedem Falle tun. Die Lesbarkeit deiner Texte verbessert sich (in den unterstüzten Browsern) auf jeden Fall deutlich.

Webentwickler interessieren sich bestimmt für diese Polyfill-Lösung namens Hyphenator.js.

Tipp 8: Nutze White Space, Bilder und Kontrast

Streng genommen ist dieser Tipp kein typographischer Rat. Da es aber um die Lesbarkeit von Texten geht, finde ich, sollte ich ihn dennoch hier erwähnen.

Ich treffe immer noch sehr häufig auf Texte im Web, denen man die hohe fachliche Qualität nach ein paar Zeilen schon ansieht, die ich aber dennoch nicht bis zum Ende durchlesen kann. Wenn es nicht auf einen der bereits genannten Fehler zurückzuführen, die die Seitenbetreiber gemacht haben, liegt es schlussendlich stets immer entweder an fehlenden Bildern oder daran, dass der Textbereich optisch kaum von seinen umgebenden Elementen zu differenzieren ist.

Daher bitte ich dich, baue Bilder in deinen Text ein. Sie lockern den Lesefluss auf und tragen, wenn sie klug gewählt sind, sogar noch zum besseren Verständnis des Textes an sich bei. Zudem sorge bitte für ein gerüttelt Maß an White Space, also nicht mit Text oder anderen Elementen belegtem Bildschirmplatz. So können sich des Lesers Augen einfacher orientieren und dem Textfluss leichter folgen, als wenn sie stets und ständig gegen die nächste Ablenkung kämpfen müssen.

Viel White Space, wenn auch teilweise rosa und an mancher Stelle grenzwertig kontrastig zu weiß, wenige Elemente, alles in allem gut lesbar. (Entwurf: Tubik)

Achte zudem darauf, Text und Hintergrund stets mit deutlichem Kontrast darzustellen. Bücher sind nicht ohne Grund stets mit schwarzem Text auf weißem Papier bedruckt. Dieser Kontrast darf als optimal gelten. Allzu waghalsige Experimente in dieser Richtung werden fast zwangsläufig dazu führen, dass du Teile deiner Leserschaft verlierst.

Typographie ist mehr als Zeilenabstand und Schriftarten

Damit soll es für heute reichen. Natürlich können diese Tipps nur die Spitze des Eisbergs markieren. Wer also alle Tipps dieses Artikels beachtet, ist noch lange kein Profi. Aber er bietet seinen Leserinnen und Lesern auf jeden Fall schon weit mehr als viele andere Texter oder Seitenbetreiber. Nicht nur im E-Commerce kann das kaufentscheidend und somit umsatzrelevant sein. Auch das Freelancer-Blog wird weit lieber gelesen, wenn es lesbar gestaltet ist. So oder so, du setzt dich vom Wettbewerb ab.

Du siehst, es gibt nur Vorteile. Also, worauf wartest du noch?

Quellen zum Weiterlesen:

  • 10 Typography Tricks to Make Your Text Much More Readable | Creative Market
  • 3 Typography Tips For A More Comfortable Read | Luke Jones, Medium
  • 8 Simple Typography Tips For Your Designs | Smashing Magazine
  • 20 Typography Mistakes Every Beginner Makes – And How You Can Avoid Them | Canva

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. Danke!
    Vielleicht ist hier nicht die richtige Stelle, aber mir fällt gerade bei der Suche nach WP Themes auf, wie oft ein wunderschönes Theme durch einen furchtbaren Font und kleine Schriftgröße und -farbe aus der Auswahl rausfällt.

  2. Guter Artikel!
    Niemand liest gerne Text, der einem einfach vorgewurfen wird.
    Eine schöne Formatierung macht das Erlebnis da gleich ganz anders.

  3. Schöne Zusammenfassung der wichtigesten Kriterien. Sollte man sich immer mal wieder ins Gedächnis rufen.

  4. Danke für diesen interessanten Artikel !

Schreibe einen Kommentar zu Christine Lucius Antworten abbrechen

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.