Typographie im Alltag: So werden deine Texte lesbar

Facebook
XING
Twitter
Design - Alphabet
„Web Design ist zu 95% Typographie“, sagte kein geringerer als Oliver Reichenstein. Natürlich ist Typographie seit jeher eines der wichtigsten Elemente im Design. Für Grafikdesigner gehört Typographie direkt im ersten Semester zum täglich Brot.

Mit den folgenden Tipps gestaltest du deine Texte wesentlich lesbarer und sorgst noch dazu für eine bessere Auffindbarkeit im bereits randvollen Weltennetz.

Typographie im Alltag: So werden deine Texte lesbar

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.

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.

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.

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.

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.

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, weil der Augeninnendruck ganzer Bevölkerungsgruppen unaufhaltsam zu steigen schien. Gut, jetzt übertreibe ich es ein wenig…

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.

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 die Möglichkeit hast, die Eigenschaft zu setzen, solltest du es in jedem Falle tun. Die Lesbarkeit deiner Texte verbessert sich (in den unterstützten Browsern) deutlich.

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

Nutze Weißraum, 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 ist, den 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.

Handverlesene Typographie-Infos für Einsteiger

Korrekte Typografie ist das vernachlässigte Stiefkind eines manchen Webdesigners. Man könnte mit diesem Thema Jahre verbringen und hätte immer noch nicht alles Wissenswerte darüber erlernt – so scheint es. Doch für Webentwickler bedeutet Zeit immer auch Geld und stundenlange Lektüre von Büchern, Whitepapers und Aufsätzen zum Thema sind einfach nicht drin.

Die von uns vorgestellten Infografiken verschaffen Ihnen die Grundlagen, um eine gute Entscheidung bei der Auswahl und Kombination von Fonts im Webdesign treffen zu können. Jede Website wird durch eine weise Auswahl und Nutzung von Font-Kombinationen gewinnen und einen wesentlich besseren Eindruck hinterlassen.

Die 10 Gebote der Typographie

Die 10 Gebote der Typografie von DesignMatic.com ist eine Referenz, die sich jeder Webdesigner und Webentwickler in die Lesezeichen speichern sollte. Es wird klar verständlich erklärt, was man auf keinen Fall tun sollte und auch, welche Kombinationen empfehlenswert sind. Vor jedem Projekt angesehen, bringt diese Infografik viel Wissen und typografische Schönheit in ein Projekt.

Die Kunst Schriftarten zu kombinieren

Google Fonts ist eine hervorrage Ressource für Webdesigner und Entwickler. Doch bei mittlerweile über 600 gelisteten Fonts kann die Suche schon mal Zeit in Anspruch nehmen. Wie man die einzelnen Fonts miteinander kombinieren kann, bleibt eine offene Frage und erschwert die Suche zusätzlich ungemein. Die Infografik von FastPrint.co.uk hat sich dieser Thematik angenommen und 20 gut zu kombinierende Fonts herausgesucht. Diese können anhand der Infografik einfach miteinander kombiniert werden, so dass ein ansprechendes Ergebnis erzielt wird.

Welches sind die weltweit wichtigsten Schriftarten?

Obwohl wir alle täglich mit vielen verschiedenen Fonts arbeiten, so wissen wir doch sehr wenig über sie. Die Infografik möchte uns darüber aufklären, wo die einzelnen Schriftarten Ihren Ursprung haben und gibt einen Überblick über die weltweit beliebtesten Schriftarten und Ihre Herkunft.

Schriftarten und welche Psychologie dahintersteckt

Diese Infografik von Crazyegg.com hat das Potential, uns im guten Sinne zu beeinflussen und zum richtigen Punkt zu führen. Die Grafik erklärt anschaulich die Psychologie hinter einer Font-Wahl und geht ins Detail über die verschiedenen Arten der Typografie (Serif, Sans-Serif, Skript etc.). Zudem gibt sie uns Hinweise auf die Emotionen, die wir mit der Wahl eines Fonts hervorrufen können.

Das Periodensystem der Schriftarten

Sollten Sie sich ein bisschen mit Chemie auskennen, dann ist Ihnen das Periodensystem nicht gänzlich unbekannt. Das Periodensystem stellt alle chemischen Elemente mit steigender Kernladung (Ordnungszahl) und entsprechend ihren chemischen Eigenschaften, eingeteilt in Perioden sowie Haupt- und Nebengruppen dar (Wikipedia).

Diese Infografik – erstellt von Cam Wilde – macht das gleiche für Typografie. Es listet alle Schriftbilder zusammen mit ihren Attributen. Beispielsweise zeigt es die Klassifizierung der einzelnen Schriftbilder (dh Grotesk, serif, Skript, Humanist, Slab-serif, etc.) und ordnet sie in eine bestimmte Reihenfolge.

Die Elemente der Typographie

Die Infografik von Thelogocompany.net bereitet sehr schön Grundwissen über Fonts und Typografie auf. Es zeigt Ihnen ein Diagramm von jedem Attribut einer Schriftart. Die Attribute werden im einzelnen vorgestellt und benannt, zum Beispiel die Querlatte, das Kerning, das Bein, die Spur und die Schulter und vieles mehr. Sollten Sie sich mit diesen Dingen nicht auskennen, dann ist diese Infografik genau das Richtige für Sie.

Jetzt braucht es eine Schriftart

Sie benötigen eine Schriftart? Dann kann Ihnen diese einfache Infografik von Julian Hansen bei der Auswahl einer Schriftart für Ihr nächstes Projekt helfen. Beginnen Sie mit der Auswahl einer Projektart (zum Beispiel Logo, Flyer, Einladung, Infografik). Danach folgen Sie den Fragestellungen (Ja oder Nein) und die Grafik führt Sie zu der perfekten Wahl der Schriftart(en) für Ihr Projekt.

Vielleicht erscheint die Grafik etwas umfangreich und kompliziert beim ersten Mal, allerdings führt sie relativ schnell zum Ziel, namentlich den passenden Fonts.

4 Antworten

  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.

Schreibe einen Kommentar

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

Inhaltsverzeichnis

Zum Dr. Web Newsletter anmelden

Kein Spam, nur Benachrichtigungen über neue Produkte und Updates.

Social Media

Meistgelesen

Weitere Kategorien

On Key

Related Posts

Ein junger blonder Mann, der die Füße hochlegt und über sein Geschäft sinniert.

Banking: Brauchen Freelancer ein separates Geschäftskonto?

Gesetzlich vorgeschrieben ist die Trennung von Privat- und Geschäftskonto nicht. Wer als Freelancer auf eigene Rechnung arbeitet, muss also kein zusätzliches Girokonto einrichten. Sinnvoll ist die saubere Trennung von privaten und betrieblichen Zahlungsvorgängen trotzdem. Wir zeigen, worauf es ankommt

Ein schwarzer Tisch mit keyboard, maus, kophoerer, kaffee schwarz.

Die 13 besten HTML Editoren für Webentwickler (Update)

Wer Webseiten entwickeln möchte, braucht einen HTML-Editor. Sicherlich kannst du auch mit Hilfe des Windows-Notepad eine Webseite erstellen – schön und komfortabel geht indes anders. Besonders wichtig bei einem HTML-Editor sind eine gute Einfärbung der Syntax – auch Syntax-Highlighting genannt – und eine brauchbare Code-Vervollständigung.