Das gleichseitige Dreieck eines perfekten Absatzes

Dennoch vernachlässigen zu viele Webdesigner die Bedeutung von Typografie im Web. Bisher habe ich nur wenige getroffen, die Typografie wirklich verstehen und wissen, wie sie dieses Wissen in ihre Arbeit einbringen können. Und der Mangel an Wissen über Typografie kommt nicht aus Unwissenheit. Ich habe gelernt, dass Webdesigner häufig entweder Autodidakten sind und die Bedeutung von Typografie noch nicht erfasst haben, oder dass sie tatsächlich Design studiert haben, Typografie aber nur eine der Klassen war, an denen sie teilnehmen mussten.

Ich habe den Kurs Better Web Type erstellt, um das Bewusstsein für die wichtige Rolle zu schärfen, die Typografie im Web spielt. Meiner Meinung nach sollten sowohl Webdesigner als auch Webentwickler die Grundlagen lernen – wenn ein Designer Ligaturen in seinen Designs verwendet, aber der Entwickler nicht einmal weiß, was Ligaturen sind, wie können wir dann erwarten, dass er die schönste Typografie korrekt in Code umwandelt? Wenn beide Rollen die Grundlagen kennen, werden wir in der Lage sein, zu einem besseren Web beizutragen, indem wir bessere Webtypografie produzieren. Gemeinsam.

Eines der wichtigsten Dinge in der Typografie ist die Gestaltung eines nahtlosen Leseerlebnisses, das den Leser einlädt und den Inhalt objektiv präsentiert. Um das zu erreichen, müssen wir in der Lage sein, perfekte Absätze zu gestalten. Es gibt drei Schlüssel dazu, wie Josef Mueller-Brockmann – ein renommierter Typograf und visueller Kommunikator des 20. Jahrhunderts – sagte:

Der Leser sollte die Botschaft eines Textes leicht und bequem lesen können. Dies hängt nicht unerheblich von der Schriftgröße, der Zeilenlänge und dem Zeilenabstand (Zeilenhöhe) ab.

– Josef Mueller–Brockmann

Als ich die Lektionen für den Better Web Type Kurs schrieb, versuchte ich, ein einfaches Konzept zu finden, das genau das veranschaulicht: Schriftgröße, Zeilenhöhe und Zeilenlänge müssen in perfekter Balance sein. Ich kämpfte eine Weile, aber dann, aus dem Nichts, traf es mich – das gleichseitige Dreieck. Alle drei Seiten eines gleichseitigen Dreiecks sind gleich und damit auch alle drei Winkel. Eine großartige Darstellung von drei Dingen in perfekter Balance. Es stellte sich heraus, dass es einfach war, diese Idee auf die drei Schlüssel anzuwenden, die einen perfekten Absatz gestalten. Aber schauen wir uns zuerst jeden einzelnen davon isoliert an.

Schriftgröße & Farbe

Einer der Fehler, die die meisten Websites machen, ist, dass sie den Haupttext zu klein setzen. In den frühen 2000er Jahren war es üblich, den Textkörper auf eine Größe von etwa 11 Pixel zu setzen. Aber damals waren die Bildschirme kleiner mit geringeren Bildschirmauflösungen. 11 Pixel waren damals größer als jetzt.

Eine gängige Regel für die Festlegung des Textkörpers ist, ihn so einzustellen, dass er der Größe des Textes in einem Buch auf Armlänge entspricht.

Die empfohlene Größe für heutige Bildschirme beträgt 16 Pixel für Mobilgeräte und 18 bis 22 Pixel für Desktops. Dies hängt auch von der Schriftart ab. Einige Schriftarten, die bei 16 Pixel eingestellt sind, können größer erscheinen als andere, wie im Bild unten deutlich wird.

„Schriftfarbe“ bedeutet in der Typografie nicht die tatsächliche Farbe wie Rot, Blau oder Grün. Schriftfarbe bedeutet, wie schwer schwarzer Text auf hellem Hintergrund aussieht. Eine Schriftart gleicher Größe und gleicher Stärke kann schwerer erscheinen als eine andere. Der Kontrast der Merriweather-Schriftart im obigen Beispiel ist geringer (vergleicht man die Serifen und verschiedenen Striche) als der von Georgia auf der rechten Seite. Das lässt sie schwerer erscheinen und die Farbe der Schrift ist dunkler.

Zeilenlänge

Das Lesen sehr langer Textzeilen ermüdet unsere Augen. Unsere Augen benötigen ständige Pausen, die durch Zeilenumbrüche bereitgestellt werden. Beim Wechsel zur nächsten Zeile erhalten sie diese kurze Pause. Kurz, aber lang genug, um sie länger durchhalten zu lassen. Es ist wie ein Motor, der nicht die ganze Zeit mit voller Leistung läuft, damit er länger läuft, ohne zu überhitzen.

Die ideale Länge einer Textzeile liegt zwischen 45 und 75 Zeichen – einschließlich Leerzeichen. Alles, was weit außerhalb dieses Bereichs liegt, wird schwer zu lesen. Zu viele Zeilenwechsel, wenn die Zeilen zu kurz sind, und zu wenige Pausen für die Augen, wenn sie zu lang sind.

Zeilenhöhe (Durchschuss)

Die Zeilenhöhe, oder im Druckwesen auch Durchschuss genannt, ist der Pfeiler des vertikalen Rhythmus in der Typografie. Zu verstehen, wie sie funktioniert, ist der Schlüssel zur Erstellung besserer Webtypografie.

Zu viele Designer oder Webentwickler, denen ich begegnet bin, betrachten die Zeilenhöhe als ein isoliertes Textmerkmal. Sie neigen daher dazu, sie so einzustellen, wie es richtig erscheint. Folglich wird die Zeilenhöhe ohne viel Überlegung festgelegt. Aber die Zeilenhöhe ist zu wichtig, um so gedankenlos eingestellt zu werden. Die Zeilenlänge beeinflusst die Zeilenhöhe. Je länger die Zeilen, desto mehr Platz dazwischen wird benötigt. Die Schriftgröße beeinflusst die Zeilenhöhe. Je größer sie ist, desto größer sollte auch die Zeilenhöhe sein.

Die Schriftfarbe beeinflusst ebenfalls die Zeilenhöhe. Dunklerer und schwererer Text erfordert mehr Abstand zwischen den Zeilen. Und schließlich kann auch die Schriftart selbst sie beeinflussen. Wie wir bereits gesehen haben, erscheinen einige Schriftarten größer als andere. Einige, hauptsächlich mit Serifen, wirken schwerer. Diese benötigen ebenfalls mehr Platz zwischen den Zeilen.

Nachdem Sie nun wissen, dass die Zeilenhöhe sehr wichtig ist und niemals als isoliertes Merkmal betrachtet werden sollte, werfen wir einen Blick auf allgemeine Best Practices. Für Absätze liegt die ideale Zeilenhöhe normalerweise zwischen 1,3 und 1,7. Ein Textkörper, der auf 16 Pixel eingestellt ist, sollte also eine Zeilenhöhe von 21 bis 26 Pixel haben. Dies hängt von den zuvor genannten Faktoren ab: Schriftartdesign, Schriftgröße, Schriftschnitt usw.

Das gleichseitige Dreieck

Es gibt einige allgemeine Best Practices in der Typografie, aber sie sind nie endgültig. Wie wir bei der Zeilenhöhe gesehen haben, werden uns üblicherweise Bereiche genannt, die wir verwenden sollten. Welche Wahl aus diesem Bereich getroffen werden soll, erfordert Zeit zum Erlernen. Das Auge braucht Zeit, um schärfer zu werden und diese Unterschiede wahrzunehmen.

Und so kommen wir zu dem, was ich *Das gleichseitige Dreieck eines perfekten Absatzes* nenne. Wir haben Schriftgröße, Maß und Zeilenhöhe isoliert betrachtet (soweit wir konnten). Dadurch haben wir bereits gelernt, dass diese Eigenschaften miteinander verbunden sind. Sie können nicht isoliert betrachtet werden und sollten es auch nie sein. Deshalb ist ein gleichseitiges Dreieck eine perfekte Darstellung eines gut gestalteten Textabsatzes. Dafür benötigen wir eine gute Schriftgröße, die zum Maß passt, welches zum Zeilenabstand passt. Wenn man eines davon falsch macht, wird das Dreieck verzerrt.

Leider kann ich Ihnen keine exakten Zahlen für einen perfekten Absatz geben, da es Millionen von Kombinationen gibt. Aber ich kann Ihnen einige Beispiele geben, die Ihnen helfen, Ihr Auge zu schulen. Versuchen Sie, auf die Details zu achten und die Schriftgröße, die Zeilenlängen und den Abstand dazwischen zu vergleichen.

Im obigen Beispiel ist der Text in Merriweather gesetzt – eine ungewöhnlich große und schwere Schriftart. Deshalb ist er auf 16 Pixel eingestellt. Die Zeilenhöhe liegt daher näher am oberen Rand des empfohlenen Bereichs von 1,3 bis 1,7. Der obige Absatz passt gut mit 55 Zeichen pro Zeile (ebenfalls im empfohlenen Bereich).

Im obigen Beispiel liegt die Zeilenlänge außerhalb des empfohlenen Bereichs von 55-75. Sie beträgt im Durchschnitt 84, was bedeutet, dass die untere Seite des Dreiecks auf beiden Seiten erweitert wird. Das Dreieck ist nicht mehr gleichseitig.

Die Zeilenhöhe im obigen Beispiel ist offensichtlich zu groß. Sie ist auf 2 eingestellt und liegt weit außerhalb des empfohlenen Bereichs. Die Textzeilen sind zu weit auseinander. Leider passiert das im Web zu oft. Es scheint einen Trend zu geben, Schrift in einem hellgrauen Ton einzustellen und eine große Zeilenhöhe darauf anzuwenden. Es ist der Versuch, diesen sauberen, minimalistischen Stil zu erreichen, aber es ist falsch. Solche Texte, besonders wenn sie lang sind, sind schwer zu lesen.

Glücklicherweise treffe ich das im Web nicht allzu oft. Ich wollte es trotzdem aufnehmen, damit wir alle möglichen Optionen abdecken, die sich aus diesem Konzept ergeben können. Die Schriftgröße im obigen Beispiel ist viel zu groß für die gegebene Zeilenhöhe und Zeilenlänge. Texte, die so eingestellt sind, sind extrem schwer zu lesen.

Das Lernspiel

Viele der Studenten des Better Web Type Kurses haben mich gebeten, dieses Konzept näher zu erläutern. Und was ist der beste Weg, um zu veranschaulichen, wie dieses Konzept in Aktion funktioniert? Ein Lernspiel, das Ihnen hilft, Ihre Augen zu schärfen. Wir präsentieren „Das gleichseitige Dreieck eines perfekten Absatzes – Ein Lernspiel für Webtypografie“.

Das Spiel besteht aus zehn Leveln, bei denen Sie jeweils eine der drei Eigenschaften einstellen müssen: Schriftgröße, Zeilenhöhe oder Zeilenlänge. Am Ende erhalten Sie eine Punktzahl von 100 und die Chance, an der Verlosung des kommenden Buches Better Web Typography for a Better Web teilzunehmen. Vier zufällig ausgewählte höchste Punktzahlen erhalten ein kostenloses Buch, das auf dem beliebten Better Web Type Kurs basiert.

Ich hoffe, dass möglichst viele Leute auf dieses Spiel stoßen und lernen, dass Zeilenhöhe, Schriftgröße und Zeilenlänge immer zusammen betrachtet werden müssen. Versuchen Sie, das beste Ergebnis zu erzielen und fordern Sie Ihre Freunde heraus. Je mehr Leute davon wissen, desto besser wird die Webtypografie.

Schauen Sie sich das Spiel an