Web Typografie Beispiele

Eine Beispiel-Sammlung zu einer Serie an Blog-Beiträgen über Web Typografie.

Schriftwahl

Leseschriften

sollten möglichst unauffällig sein und sich im Hintergrund halten.

Ich bin eine Leseschrift für den Mengensatz. Das Besondere an mir ist, dass ich nicht besonders auffalle (außer vielleicht ein paar Typografie-Nerds). Und das ist gut, denn ich sollte eigentlich für alle, die mich lesen, unsichtbar werden. Meine Buchstabenformen sind zurückgenommen aber unterschiedlich genug, um ein leicht zu erfassendes Wortbild zu ergeben. Unter diesen Bedigungen kommt es auch nicht darauf an, ob ich mit oder ohne Serifen daherkomme.

Display Schriften

sind bei längeren Texten und in kleinen Schriftgraden ungeeignet.

Ich bin eine Display Schrift. Ich besitze häufig dekorative, modische oder grafische Elemente. Ich zeichne mich durch mein auffälliges Aussehen aus und bin deshalb nur gut für Überschriften oder kurze Texte geeignet. Für länge Texte bin ich ungeeigent, da mein exzentrisches Aussehen zu sehr ablenkt und lange Texte mühsam zu erfassen sind. Wie man an diesem Absatz schon bemerken kann.

Zeilenlänge und Zeilenabstand

Lange Zeilen mit wenig Abstand

sind schwer zu lesen und erzeugen ein unruhiges, zu dichtes Satzbild.

Ich bin ein Absatz mit einer sehr langen Zeile und gleichzeitig sehr geringem Zeilenabstand. Um das in Zahlen zu gießen: ich habe über hundert Zeichen Länge und einen Zeilenabstand von 1. Das macht es schwierig mich zu lesen, denn lange Zeilen ermüden Lesende schneller. Wenn dann noch der Zeilenabstand sehr gering ist verliert man zusätzlich die Zeile leichter. Der Grund dafür ist, dass man mit dem Auge einen weiten Weg vom Ende der einen Zeile zum Anfang der nächsten Zeile zurücklegen muss. Mit einem sehr geringem Zeilenabstand verliert man so leicht den Anhaltspunkt um nach links springen zu können. Dann landet man rasch in der falschen Zeile. Das Problem zeigt sich jedoch erst bei mehreren Zeilen und vor allem in der Textmitte, denn erst dann kann man nicht mehr intuitiv erfassen, an welcher Stelle man ist. Viele müssen dann die Zeile ganz genau verfolgen oder markieren denn aktuellen Text mit der Maus. Am Smartphone geht das freilich nicht, doch dort werden die Zeilen auch nicht so lange und da könnte der Zeilenabstand dann wieder passen. Aber selbst wenn man die Zeile nicht verlieren sollte, ist es anstengender einen Text zu lesen. Man ist weniger motiviert, hat das Gefühl der Inhalt sei nicht gut gegliedert. Zusätzlich vermittelt der Text einen eher abschreckenden Eindruck, weil er sehr dicht und „dunkel“ gesetzt ist.

Kurze Zeilen mit viel Abstand

verlieren den Zusammenhalt und sind mühsam zu lesen.

Ich bin ein Absatz mit zu geringer Zeilenlänge von unter dreißig Zeichen und einem zu hohen Zeilenabstand von zwei. Im Idealfall ist eine Zeile nicht schmäler als dreißig Zeichen. Das wird am Desktop selten passieren, aber Mobil ist es möglich. Dann sollte man eventuell die Schriftgröße etwas reduzieren. Da im Deutschen die Wörte länger sind und somit weniger Platz in einer Zeile ist, bricht mein Text sehr unruhig um. Der hohe Zeilenabstand verleiht ihm einen sehr „hellen“ Grauwert, es fehlt an Zusammenhalt. Außerdem wird häufiges Scrollen notwendig.

Gute Zeilenlänge mit idealem Zeilenabstand

schafft ein freundliches Schriftbild und ist angenehm zu lesen.

Ich bin ein Absatz mit einer idealen Zeilenlänge von etwa 70 Zeichen pro Zeile. Das macht es angenehm mich zu lesen. Der 1,5-fache Zeilenabstand ist gut auf die Länge der Zeile abgestimmt. Es ist einfach in die nächste Zeile zu wechseln. Ich übe eine angenehme und einladende Wirkung auf Lesende aus, denn der Grauwert meines Textes wirkt freundlich und locker. Lesende haben das Gefühl der Text sei übersichtlich. Mit höherem Zeilenabstand bekommt man natürlich weniger Text auf der selben Fläche unter. Aber das ist am Bildschirm kaum ein das Problem, denn nur selten geht einem die Scrollleiste aus. Mobil ist meine Zeilenlänge aufgrund des schmäleren viewports geringer. Entsprechend ist aber der Zeilenabstand auf das 1,4-fache reduziert.

Blocksatz

Wortabstände einblenden

Blocksatz ohne Silbentrennung

erzeugt je nach Spaltenbreite unruhige Lücken im Text. Vor allem bei schmalen Spalten ist das problematisch.

Ich bin ein Absatz in Blocksatz ohne Silbentrennung. Dadruch entstehen je nach Wortlänge und Spaltenbreite unregelmäßige Lücken zwischen den Wörtern. Diese erzeugen ein unruhiges Satzbild, sodass manchmal der Abstand zwischen den Zeilen geringer ist, als der zwischen den Wörtern. Das macht es schwieriger die Zeile zu halten. Das Problem wird bei schmalen Spalten deutlicher und zeigt sich dadurch vor allem mobile. Deshalb sollte Blocksatz ohne Silbentrennung unbedingt vermieden werden.

Blocksatz mit Silbentrennung

erzeugt gleichmäßigere Abstände, ist aber aufgrund des geringen Browser-Supports immer noch zu riskant anzuwenden.

Ich bin ein Absatz in Blocksatz mit Silbentrennung. Die entstehenden unregelmäßigen Lücken zwischen den Wörtern sind weniger deutlich, als bei fehlender Silbentrennung. Das Satzbild ist dadurch etwas ruhiger. Aber auch hier kann es zu Problemen kommen, denn der Browser-Support für hyphens ist noch nicht ideal und überraschenderweise sogar geringer als für Flexbox. Bei Browsern, die hypens nicht unterstützen, ist der Text dann wieder in Blocksatz ohne Silbentrennung mit all den genannten Problemen bei schmalen Spalten.

Faux-Fonts

Bin ich kursiv oder verschrägt?
Bin ich kursiv oder verschrägt?

Bin ich fett oder verfettet?
Bin ich fett oder verfettet?

Bin ich entstellt oder nicht?
Bin ich entstellt oder nicht?

Verfettete Headline

Richtige Headline


Verfettete Headline

Richtige Headline