Die meisten Korrekturen nach einer Design-Abnahme betreffen die Typografie. Nicht das Layout, nicht die Farben, sondern den Text. Die Strichstärke stimmt nicht, der Titel sollte in Großbuchstaben gesetzt sein, der Zeichenabstand passt nicht.
Fast alle diese Punkte lassen sich auf vier Bereiche zurückführen: die Anatomie der Buchstaben, der Unterschied zwischen Font und Typeface, die Unterscheidung zwischen Serif und Sans-Serif sowie die Abstände, die aus einzelnen Zeichen einen Absatz und aus Absätzen eine Seite machen. Wenn diese Grundlagen sitzen, erübrigen sich die meisten Anmerkungen im Front-End-Review von vornherein.
Kurz gesagt:
Die Lücke entsteht durch unterschiedliche Wahrnehmung, nicht durch mangelnden Einsatz. Der Designer erwartet das eine, der Entwickler sieht das andere – und keiner von beiden stellt sich quer. Der Designer bemerkt lediglich Dinge, für die der Entwickler nie geschult wurde. Jede Korrektur bedeutet Nacharbeit: Zeit für die Fehlersuche, Zeit für die Änderung, ein Release, das auf Eis liegt, während man sich abstimmt. Die folgenden Grundlagen lernt man einmal und wendet sie bei jedem weiteren Projekt an. Das macht sie zur effizientesten Investition bei der Übergabe vom Design zur Entwicklung. Deshalb habe ich diesen Typografie-Workshop entwickelt.
Bevor wir in die Details gehen, ist es hilfreich zu verstehen, wie ein einzelner Buchstabe funktioniert, in welcher Beziehung er zu seinen Nachbarn steht und wie sich diese Beziehung auf das Wort, den Satz und den Absatz überträgt.
Typografie ist das Handwerk, Schrift so anzuordnen, dass sie lesbar ist: die Wahl der Schriftart, die Festlegung von Größe und Strichstärke sowie die Steuerung der Abstände zwischen Zeichen, Zeilen und Textblöcken. Sie umfasst sowohl die Form der Buchstaben als auch die Gestaltung der Seite, auf der sie stehen. Alles in diesem Artikel lässt sich einer dieser beiden Kategorien zuordnen.
Grundbegriffe, die man kennen sollte, da sie den Austausch über Typografie erheblich erleichtern:
Eine Schriftform teilt gemeinsame Merkmale mit ihren Pendants innerhalb derselben Schriftart. Diese Merkmale lassen sich auf die Größen und Proportionen der gleichen anatomischen Grundelemente zurückführen, die sich durch alle westlichen Schriftzeichen ziehen.
Ich dachte, es wäre interessant, sie aufzulisten. Nicht, damit Sie sie auswendig lernen, denn die Bezeichnungen machen im Alltag eines Grafikdesigners oder Entwicklers kaum einen Unterschied.
Ich liste sie auf, damit Sie wissen, worauf Sie beim Vergleich zweier Schriftarten achten müssen und damit die Vielfalt der Aufgaben, die verschiedene Fonts erfüllen können, anhand ihrer Anatomie nachvollziehbar wird.
| Merkmal | Was es ist |
|---|---|
| Grundlinie | Die unsichtbare Linie, auf der die Buchstaben stehen |
| x-Höhe | Die Höhe eines kleinen x, also die Höhe des Hauptkörpers der Kleinbuchstaben |
| Versalhöhe | Die Höhe der Großbuchstaben, gemessen von der Grundlinie |
| Oberlänge | Der Teil eines Kleinbuchstabens, der über die x-Höhe hinausragt, wie bei b, d, h, k und l |
| Unterlänge | Der Teil eines Kleinbuchstabens, der unter die Grundlinie reicht, wie bei g, j, p, q und y |
| Stamm | Der vertikale oder diagonale Hauptstrich eines Buchstabens |
| Bauch | Der geschwungene Strich, der einen Raum umschließt, wie bei b, d, o und p |
| Innenraum | Der ganz oder teilweise umschlossene Raum innerhalb eines Buchstabens, wie das Loch in einem o oder e |
| Schulter | Der geschwungene Strich, der von einem Stamm abgeht, wie bei h, m und n |
| Serife | Der kleine Strich, der das Ende eines Hauptstrichs abschließt |
| Endpunkt | Das Ende eines Strichs, der keine Serife trägt |
| Öffnung | Die Größe der Öffnung zwischen einem Strich und dem Innenraum, wie bei c, e und s |
| Ligatur | Zwei oder mehr Zeichen, die zu einer einzigen Glyphe verbunden sind, wie bei fi und fl |
Zwei davon leisten in der Praxis die meiste Arbeit. Eine große x-Höhe lässt eine Schrift bei gleicher Schriftgröße größer wirken und sorgt für bessere Lesbarkeit bei Verkleinerungen. Eine weite Öffnung verhindert, dass Buchstaben wie c, e und s zulaufen und miteinander verwechselt werden.
Schriften werden anhand dieser strukturellen Merkmale, interpretatorischer Definitionen oder einfach ihrer historischen Einordnung klassifiziert. Die Klassifizierung ist nur dann nützlich, wenn sie Ihnen zeigt, wo eine Schrift hingehört. Betrachten Sie sie daher eher als Entscheidungshilfe denn als Glossar:
| Klassifikation | Was es ausmacht | Verwenden Sie es, wenn | Vermeiden Sie es, wenn |
|---|---|---|---|
| Serif | Weist Serifen auf. Wird üblicherweise nach Epochen in Mediäval-Antiqua (Old Style), Übergangsformen (Transitional), Klassizistische Antiqua (Modern) und Slab Serif (Egyptienne) unterteilt, die sich hauptsächlich im Strichkontrast und der Gestaltung der Serifen unterscheiden | Sie flüssiges, längeres Lesen und einen ruhigen, autoritativen Ton wünschen: Langform-Artikel, Editorial Design, Dokumentations-Einführungen. Mediäval-Antiqua und Übergangsformen sind die sichere Wahl | Die Schriftgröße unter etwa 14px fällt oder es sich um eine kontrastreiche klassizistische Antiqua wie Didot handelt. Die feinen Striche verschwinden auf Bildschirmen mit niedriger Pixeldichte und der Text fängt an zu flimmern |
| Sans-serif | Besitzt keine Serifen. Wird üblicherweise in Grotesk, Neugrotesk, Geometrisch und Humanistisch unterteilt | Fast alles im Bereich von Benutzeroberflächen: Navigationen, Buttons, Beschriftungen, Formulare, Dashboards, kleine Schriftgrößen und jeder Text, der eine Größenänderung durch den Leser überstehen muss | Sie Wärme oder eine redaktionelle Persönlichkeit benötigen, aber zu einer neutralen Neugrotesk gegriffen haben. Sie wirkt zwar korrekt, sagt aber nichts aus. Humanistische Sans-Serif-Schriften sind hier die Lösung |
| Script | Handschrift oder Kalligrafie nachempfunden, häufig mit miteinander verbundenen Buchstaben | Ein einzelnes dekoratives Element gefragt ist: ein Wortmarken-Logo, ein hervorgehobenes Zitat (Pull Quote), eine Unterschrift. Eine Zeile, groß und niemals mehr | Ein Nutzer etwas lesen muss, um eine Aufgabe zu erledigen, sowie bei allem, was in Versalien (Großbuchstaben) gesetzt ist – verbindende Buchstabenformen brechen auseinander, wenn sie großgeschrieben werden |
| Display | Entworfen für große Schriftgrößen und kurze Textpassagen, bei denen Charakter wichtiger ist als dauerhafte Lesbarkeit | Hero-Überschriften und Kampagnenseiten, bei denen es mehr auf die Tonalität als auf den Durchsatz ankommt | Die Schrift bei Fließtextgrößen oder darunter funktionieren muss. Display-Schriften werden für einen bestimmten Größenbereich gezeichnet und funktionieren außerhalb dessen nicht mehr |
| Blackletter | Der dichte, winklige Stil des frühen europäischen Buchdrucks (Gebrochene Schrift) | Sie einen spezifischen historischen oder genrebezogenen Grund haben und der Text kurz ist | Praktisch überall sonst. Die Lesbarkeit für moderne Leser ist schlecht und die kulturellen Assoziationen sind schwerwiegender, als die meisten Marken es wünschen |
| Monospaced | Jedes Zeichen nimmt dieselbe horizontale Breite ein (Festbreitenschrift) | Code, Terminal-Ausgaben, IDs, Diffs und alles, wo die spaltenweise Ausrichtung eine Bedeutung hat. Außerdem Zahlentabellen, in denen Tabellenziffern das Unruhigwerden der Spalten verhindern | Sie als stilistische Entscheidung für Fließtext verwendet werden soll. Die gleichmäßige Breite, die Code übersichtlich macht, verlangsamt das Lesen von Fließtext |
Die beiden wichtigsten Kategorien für die Programmierung sind die bekannten Serifenschriften und serifenlosen Schriften. Sie sind deshalb so wichtig, weil ihr entscheidendes Merkmal objektiv und deutlich sichtbar ist, sobald man weiß, worauf man achten muss.
Serifenschriften gelten hingegen als die beste Wahl für längere Texte, wie man sie in Büchern und Zeitungen findet. Stimmt das? Nicht unbedingt. Vieles von dem, was die Lesbarkeit dieser Gruppe ausmacht, kann sich je nach den Merkmalen der einzelnen Schriftart ins Gegenteil verkehren. Ich bin mir ziemlich sicher, dass eine Didot – obwohl sie eine Serifenschrift ist – bei längeren Textpassagen schlechter lesbar ist als eine Lato.
Die Didot weist einen starken Kontrast zwischen horizontalen und vertikalen Linien auf, was den Lesefluss durch Unruhe und „Störfaktoren“ beeinträchtigen kann. Die Lato hält die Proportionen zwischen den verschiedenen Linien des Buchstabens gleichmäßiger, was sie in diesem Vergleich zur besseren Wahl macht. Es ist kein perfekter Vergleich, aber das Prinzip ist gültig. Beurteilen Sie die einzelne Schriftart, nicht die Familie, zu der sie gehört.
Wenn Sie wissen möchten, welcher Stil wo eingesetzt werden sollte, ist es wichtig zu verstehen, wozu die Serife eigentlich dient. Das lässt sich leichter begreifen, wenn man ihren Ursprung kennt – genau darum geht es im nächsten Abschnitt.
Lange bevor wir Menschen überhaupt daran dachten, kleine Metallstücke auf Papier zu pressen, um Bücher schneller herzustellen. Bevor wir überhaupt das Konzept eines Buches, von Papier oder von Text an sich in Betracht zogen, nutzten wir bereits visuelle Darstellungen, um miteinander zu kommunizieren.
Jahrtausende der Evolution machten eine komplexere visuelle Kommunikation notwendig – und damit Alphabete. Doch Alphabete entstanden nicht aus dem Nichts. Sie waren das Ergebnis eigener Mutationen und Anpassungen. Die Geschichte des Buchstabens „A“ gilt gemeinhin als das anschaulichste Beispiel dafür, wie die meisten Buchstaben zu ihrer heutigen Form gelangten.
Zivilisationen kamen und gingen. Bedeutungen und Laute wurden festgelegt, manche veränderten sich, andere blieben bestehen. Der Ochsenkopf wurde stetig vereinfacht, gedreht und von den Römern geometrisch perfektioniert, damit er in Monumente gemeißelt werden konnte. Er wurde von Mönchen geschrieben und verziert, für eine schnellere und flüssigere Handschrift verformt und schließlich von Typografen aufgegriffen.
Zusammenfassend lässt sich sagen: Die Serife entstand aus der Notwendigkeit, schnell zu schreiben und Buchstaben miteinander zu verbinden. Als das Lesen später nicht mehr nur Klerikern und dem Adel vorbehalten war, wurde eine bessere Lesbarkeit zur Anforderung, und die Serife erfüllte fortan diesen Zweck. Das ist der Aspekt, den man im Gedächtnis behalten sollte. Die Serife war ein Hilfsmittel für die Lesbarkeit, lange bevor sie zu einem Stilmittel wurde. Die Wahl zwischen Serifenschrift und serifenloser Schrift ist daher eine Entscheidung darüber, wie ein Text gelesen werden soll, nicht wie er aussehen soll.
Dann kam die Typografie.
Mit dem wachsenden Bewusstsein für die Lesbarkeit einer Schriftart begannen Designer, deren Verwendung und Anordnung auf der Seite mit der gleichen Sorgfalt zu behandeln.
Etwas so Grundlegendes wie der Zeilenabstand, der direkt von der Schriftart und ihrer Größe abhängt, beeinflusst das gesamte Erscheinungsbild einer Seite. Rastersysteme wurden entwickelt, um dies in Regeln zu fassen, damit jeder Designer lesbare Texte und ausgewogene Seiten gestalten kann, ohne bei Null anfangen zu müssen.
Der Zeilenabstand ist übrigens line-height in CSS: der vertikale Abstand zwischen zwei Textzeilen. Er kann über die Qualität eines Textbereichs entscheiden: Ist er zu eng oder zu weit, überspringt der Leser Zeilen oder liest dieselbe Zeile doppelt. Das kennen wir alle. Es war nie Ihre Schuld.
Es gibt einen optimalen Bereich, der meist zwischen 120 % und 145 % der Schriftgröße liegt – ein Wert, den Matthew Butterick in Practical Typographyempfiehlt. Er rät zudem dazu, diesen in CSS als einheitenlosen Wert anzugeben, sodass aus 130 % einfach 1.3wird. Wenn Sie den Abstand lieber nach Augenmaß bestimmen möchten, ist hier ein hilfreicher Trick:
Ziehen Sie eine gedachte Linie mittig durch die Textzeilen, ohne dabei Ober- oder Unterlängen zu berühren. Wenn die Linie sauber durchläuft, ist der Abstand gut gewählt.
Achten Sie auch auf die Zeilenlänge. Die Rastermodule werden auf Basis der Zeilenhöhe bemessen und fallen im Vergleich zur Schriftgröße meist recht klein aus. Das ist kein Zufall. Kleine Module geben dem Designer mehr Spielraum bei der Gestaltung einer Seite und ermöglichen größere oder kleinere Textbereiche, während ein guter, proportionaler Abstand zwischen den Elementen gewahrt bleibt.
In der Praxis sind kürzere Zeilen zudem leichter zu lesen.
Es gibt ein gutes Maß für die Zeilenlänge, wobei die Quellen eher eine Tendenz aufzeigen als eine einheitliche Meinung. Das Baymard Institute setzt das Optimum in Anlehnung an Emil Ruder auf 50 bis 60 Zeichen pro Zeile inklusive Leerzeichen an und merkt an, dass andere Quellen bis zu 75 akzeptieren. Die Seite von Butterick zur Zeilenlänge ist großzügiger und empfiehlt 45 bis 90 Zeichen. Betrachtet man die Schnittmenge, ist ein Bereich von 50 bis 75 Zeichen ideal; alles über 80 wird problematisch – das ist auch die Grenze, die die WCAG zieht. Dafür gibt es einige gute Gründe.
Zu kurze Zeilen zwingen den Leser dazu, den Lesefluss ständig zu unterbrechen, da er nach wenigen Wörtern wieder an den linken Rand zurückkehren muss. Wichtige Wörter am Zeilenende werden bei diesem ständigen Hin und Her oft übersprungen, was beim Lesen genauso ermüdend ist, wie es klingt.
Zu lange Zeilen sind schwer zu erfassen, da man das Zeilenende nicht im Blick hat und sich ständig darauf konzentrieren muss, zur nächsten Zeile zu springen. Zudem ist die Wahrscheinlichkeit höher, dass der Leser beim Zeilensprung in der falschen Zeile landet, weil der linke Rand so weit entfernt ist, dass man kaum noch erkennt, wo die vorherige Zeile begann.
In der Praxis ist die Aufmerksamkeit am Zeilenanfang am höchsten und nimmt zum Ende hin ab, weshalb ein sehr präzises Gleichgewicht erforderlich ist. Daher gilt die Faustregel von 50 bis 75 Zeichen.
Zeilenabstand und Zeilenlänge definieren einen Textblock. Die Hierarchie bestimmt, wie diese Blöcke zueinander in Beziehung stehen – ein Punkt, der Entwickler oft nur als vage Anweisung erreicht.
Eine Typografie-Skala ist ein festgelegter Satz an Schriftgrößen, bei dem jede Größe eine bewusste Abstufung zur vorherigen darstellt. Wählen Sie zuerst die Größe für den Fließtext, da sich der Leser dort am meisten aufhält, und leiten Sie die Überschriften davon ab, anstatt sie nach Augenmaß zu bestimmen. Wenige Stufen, klar voneinander abgegrenzt. Das sorgt dafür, dass eine Überschrift auch als solche wahrgenommen wird.
Die Größe ist nicht das einzige Werkzeug und selten das beste für sich allein. Strichstärke, Groß-/Kleinschreibung, Farbe sowie der Abstand über und unter einer Überschrift unterscheiden die Ebenen voneinander, wobei der Abstand meist das kostengünstigste dieser vier Mittel ist. Wenn Ihre Hierarchie nur funktioniert, weil eine Ebene deutlich größer ist als die nächste, wird sie auf schmalen Bildschirmen in sich zusammenbrechen, da dort alle Ebenen gleichzeitig verkleinert werden müssen.
Lesbarkeit und Barrierefreiheit sind dasselbe Thema aus zwei verschiedenen Blickwinkeln. Jede der oben genannten Entscheidungen hat Auswirkungen auf die Barrierefreiheit: zu kleine Schriftgrößen, zu enge Zeilenabstände, zu lange Zeilen. All das stellt für manche Leser eine deutlich größere Hürde dar als für andere.
Drei Gewohnheiten decken das Wesentliche ab. Sorgen Sie für ausreichend Kontrast zwischen Text und Hintergrund und lassen Sie niemals eine Markenfarbe allein über diesen Wert entscheiden – die WCAG 2.2 schreibt ein Mindestverhältnis von 4,5:1 für Fließtext und 3:1 für großen Text vor. Verlassen Sie sich nicht allein auf Strichstärke oder Farbe, um Unterschiede zu kennzeichnen, da dies nicht jeden Leser erreicht. Und lassen Sie zu, dass sich der Text an die Einstellungen des Nutzers anpasst, anstatt ihn starr zu fixieren; Browser und Betriebssysteme bieten aus gutem Grund die Möglichkeit, eine größere Schrift zu wählen, und Die WCAG-Anforderung zur Skalierbarkeit sieht vor, dass Ihr Layout eine Vergrößerung um bis zu 200 % problemlos verkraftet.
Damit sind die wichtigsten Aspekte der Lesbarkeit abgedeckt. Wenn Sie jedoch ein fundiertes Verständnis für typografischen Ausdruck im weiteren Sinne suchen, ist Gary Hustwits Dokumentarfilm aus dem Jahr 2007 Helvetica genau das Richtige für Sie.
Er beleuchtet die Denkweise hinter dem neuen Design der fünfziger Jahre und zeigt auf, wie diese Arbeit ein Bewusstsein für soziale Verantwortung entwickelte – ein Nachhall des Zweiten Weltkriegs. Zudem erhalten Sie Einblicke in einige wirklich interessante Entwürfe aus dieser Zeit sowie eine Einführung in die Ursprünge und den ursprünglichen Zweck der berühmten Schriftart Helvetica.
Sie werden außerdem den deutlichen Kontrast zwischen der Werbung vor und nach dem Internationalen Stil erkennen – jenem Schweizer Ansatz der Jahrhundertmitte, der auf Rastersystemen, serifenlosen Schriften und dem Verzicht auf Dekoration basierte – und verstehen, was dieser Wandel in der Praxis für die Art und Weise bedeutete, wie visuelle Kommunikation damals gestaltet wurde und heute noch gestaltet wird.
Es gibt noch weitere Dinge, die man wissen sollte, und die werde ich im Folgenden auflisten. Denken Sie daran, dass es für all diese Regeln Ausnahmen gibt, je nachdem, welche Rolle die Typografie in Ihrem jeweiligen Projekt spielt.
Nehmen wir Wörter, die am Ende eines Absatzes oder am Anfang einer Spalte isoliert stehen. Sie haben sogar eigene Namen. Ein Witwenzeile ist eine einzelne letzte Zeile eines Absatzes, die oben in einer neuen Spalte steht; ein Schusterjunge ist eine einzelne erste Zeile, die unten in einer Spalte zurückbleibt. In beiden Fällen entsteht ein Loch, das den Textfluss unterbricht und den Blick an die falsche Stelle lenkt. Fairerweise muss man sagen, dass sie im Responsive Design schwer zu vermeiden sind. Rechnen Sie also damit, sie erst bei den finalen Breakpoints zu korrigieren, anstatt sie von vornherein wegdesignen zu wollen. Das Gleiche gilt für den „Flattersatz“, also den unregelmäßigen rechten Rand bei linksbündigem Text. Dieser sollte zwar ungleichmäßig, aber niemals unruhig wirken.
Ein weiteres klares „Do“ oder „Don't“, das sich viel leichter kontrollieren lässt, ist der Zeichenabstand: der Raum zwischen den einzelnen Buchstaben. Ist er zu eng oder zu weit, leidet die Lesbarkeit bei längeren Texten deutlich.
Bei kurzen Texten und Überschriften sieht das anders aus; hier kann man je nach gewünschter Wirkung durchaus mit Stilisierungen arbeiten.
Was auch immer Sie tun, verzerren Sie Ihren Text niemals von Hand. Brauchen Sie etwas, das in der Breite mehr Raum einnimmt? Suchen Sie nach „Extended“-Schriftschnitten. Benötigen Sie etwas Höheres und Wirkungsvolleres? Greifen Sie zu einer „Condensed“-Schrift – davon gibt es eine große Auswahl.
Wenn Sie eine Schrift manuell verzerren, stimmen die Proportionen innerhalb der Zeichen nicht mehr. Die Strichstärken und Stammbreiten passen nicht mehr zum Rest der Schriftfamilie, und das Zeichen wirkt im Zusammenspiel mit seinen Nachbarn wie ein Fremdkörper.
Das Gleiche gilt für das Schrägstellen einer Schrift, um einen „Kursiv“-Effekt vorzutäuschen. Zugegeben, das sieht nicht immer schlecht aus, aber es gibt viele bessere Alternativen.
Gut gestaltete Kursivschriften sind nicht einfach nur eine schräg gestellte Version der Grundschrift. Sie haben ihre eigenen Proportionen, die dafür sorgen, dass sie lesbar bleiben und harmonisch neben der regulären Version stehen, ohne dass sich die beiden optisch beißen.
Es gibt noch viel mehr zu sagen und zu lernen. Gleichzeitig ist das so ziemlich das notwendige Minimum, um zu wissen, worauf man achten muss, wenn man Typografie in Code umsetzt.
Wenn du das nächste Mal am Front-End arbeitest, wird die Routine mehr oder weniger sitzen. „Text-transform?“ Check. „Character-spacing?“ Check. „Line-height?“ Check. „Ist das eine Serifenschrift oder eine serifenlose Schrift?“ Das kannst du jetzt beantworten. „Sollte diese Schriftart überhaupt in einem Menü verwendet werden?“ Das dauert länger, aber die Frage lohnt sich allemal.
Diese Routine für sich selbst anzuwenden, ist eine gute Gewohnheit. Wenn man sie im Team als gemeinsame Typografie-Skala und kurze Checkliste für die Übergabe vereinbart, wird daraus keine bloße Gewohnheit mehr, sondern Infrastruktur. Dieselben Korrekturen tauchen nicht mehr in jedem Projekt auf, und die Diskussion verlagert sich von der Frage, wie der Text aussehen soll, hin dazu, was das Produkt leisten muss. Bei der Barrierefreiheit ist es genauso. Betrachtet man sie als Option, wird sie als Erstes gestrichen; betrachtet man sie als Anforderung, wird sie zu einer Vorgabe, die die Typografie-Skala von Anfang an erfüllen muss – was weitaus kostengünstiger ist, als sie später nachzurüsten.
Was ist Typografie?Typografie ist die Kunst, Schrift so anzuordnen, dass sie gut lesbar ist: Dazu gehören die Wahl der Schriftart, die Festlegung von Größe und Strichstärke sowie die Steuerung der Abstände zwischen Zeichen, Zeilen und Textblöcken. Sie umfasst sowohl die Form der Buchstaben als auch die Gestaltung der Seite, auf der sie stehen.
Was ist der Unterschied zwischen Font und Schriftart?Eine Schriftart (Typeface) ist eine Sammlung typografischer Symbole und Zeichen. Ein Font ist ein vollständiger Zeichensatz innerhalb einer Schriftart, oft in einer bestimmten Größe und einem bestimmten Stil. Schriftfamilien sind Gruppen von Schriftarten mit verwandtem Design.
Was ist der ideale Zeilenabstand?In der Regel zwischen 120 % und 145 % der Schriftgröße, gemäß Buttericks Practical Typography, und am besten in CSS als einheitenloser Wert angegeben. Um dies mit dem Auge zu beurteilen, ziehen Sie eine gedachte Linie durch die Mitte der Textzeilen, ohne dabei Ober- oder Unterlängen zu berühren. Wenn die Linie sauber durchläuft, ist der Abstand gut.
Wie viele Zeichen sollte eine Textzeile haben?Zwischen 50 und 75 inklusive Leerzeichen. Baymard sieht das Optimum bei 50 bis 60 Zeichen und akzeptiert bis zu 75; Butterick erlaubt 45 bis 90. Über 80 Zeichen hinaus liegt man außerhalb dessen, was die WCAG als lesbar erachtet. Kürzere Zeilen unterbrechen den Lesefluss zu häufig, während längere Zeilen es erschweren, das Ende einer Zeile und den Anfang der nächsten zu erkennen.
Ist Serif oder Sans-Serif besser für längere Texte?Oft wird behauptet, Serifenschriften seien die bessere Wahl, aber das hängt eher von der individuellen Schriftart ab als von der Schriftfamilie. Didot ist eine Serifenschrift mit hohem Kontrast zwischen horizontalen und vertikalen Linien, was den Lesefluss stört; daher ist sie für lange Texte weniger geeignet als Lato, eine serifenlose Schrift mit gleichmäßigeren Proportionen.
Wann sollte man eine dicktengleiche (Monospaced) oder eine Display-Schrift verwenden?Dicktengleiche Schriften sind für Code, Terminal-Ausgaben, Diffs und Zahlentabellen gedacht, da die gleichen Zeichenbreiten die Spalten ausgerichtet halten; bei Fließtext wirken sie jedoch bremsend. Display-Schriften sind für große Überschriften und kurze Texte gedacht, bei denen der Tonfall wichtiger ist als die Lesegeschwindigkeit; in Fließtextgröße oder kleiner funktionieren sie nicht mehr.
Was ist eine Typografie-Skala und warum benötigt eine Hierarchie eine solche?Eine Typografie-Skala ist ein festgelegter Satz von Schriftgrößen, die auf einer Seite verwendet werden dürfen, wobei jede Größe eine bewusste Abstufung zur vorherigen darstellt. Legen Sie zuerst die Größe für den Fließtext fest und leiten Sie daraus die Überschriften ab. Wenige, deutliche Abstufungen sorgen dafür, dass eine Überschrift auch als solche wahrgenommen wird; Strichstärke, Großschreibung, Farbe und der umgebende Leerraum erledigen den Rest.
Warum sollte man eine kursive Schrift nicht künstlich erzeugen oder eine Schriftart verzerren?Weil das manuelle Verzerren einer Schriftart alle Proportionen innerhalb der Zeichen zerstört und die Strichstärken sowie Stammbreiten nicht mehr zum Rest der Familie passen. Wenn Sie eine breitere Schrift benötigen, suchen Sie nach „Extended“-Schriften; für schmalere nach „Condensed“-Varianten. Gut gestaltete Kursivschriften haben eigene Proportionen, anstatt nur eine Neigung auf den regulären Schnitt anzuwenden.
Weitere Informationen zu ähnlichen Designentscheidungen finden Sie unter Minimalismus oder Brutalismus: Was ist die richtige Wahl? sowie App-Design für Kinder: Die User Experience einer Lese-App.
Bei Imaginary Cloud verfügen wir über ein Team aus UI- und UX-Design-Experten. Wenn Sie Unterstützung bei Ihrem Design benötigen, schreiben Sie uns einfach.
Ich bin UI- und Produktdesigner, Illustrationskünstler und Maler. Bekannt für meine Liebe zu trashigen Strandtüchern, Musikproduktion, Typografie und allen Arten von Pizza.
People who read this post, also found these interesting:
