Moderne CSS-Techniken zur Verbesserung der Lesbarkeit

Wir können auf viele Arten lesen, und es gibt viele verschiedene Arten von Lesern, jeder mit seinen eigenen Bedürfnissen, Fähigkeiten, seiner Sprache und vor allem seinen Gewohnheiten. Das Lesen eines Romans zu Hause unterscheidet sich vom Lesen im Zug, ebenso wie das Lesen einer Zeitung sich vom Blättern in der Online-Version unterscheidet. Lesen erfordert wie jede andere Aktivität Übung, damit jemand schnell und effizient wird. Grundsätzlich lesen wir besser die Dinge, die wir am meisten zu lesen gewohnt sind.

Welche Aspekte sollten wir bei der Gestaltung und Entwicklung für das Lesen berücksichtigen? Wie können wir zugängliche, komfortable und integrative Erfahrungen für alle Leser schaffen, einschließlich der am stärksten beeinträchtigten und von Legasthenie Betroffenen?

Leerzeichen, Wörter, Sätze und Absätze

Einheiten

Auf einer Webseite stehen uns viele Einheiten zur Verfügung, um die Schriftgröße von Text anzupassen. Um die Struktur eines ganzen Leseabschnitts festzulegen, ist es wichtig zu verstehen, welche Einheit verwendet werden soll. Die reflowfähige Natur des Webs erfordert, dass wir verschiedene Aspekte berücksichtigen, wie z. B. die Größe des Darstellungsbereichs und die Lesepräferenzen des Benutzers.

Aus diesem Grund sind die am besten geeigneten Optionen im Allgemeinen em und rem, die schriftartspezifische Einheiten sind. Beispielsweise hilft das Festlegen der Ränder zwischen Absätzen mit ems dabei, den vertikalen Rhythmus bei Änderungen der Textgröße beizubehalten. Dies kann jedoch ein Problem darstellen, wenn innerhalb eines Abschnitts eine Serifenschrift mit einer Sans-Serif-Schriftart abgewechselt wird. Tatsächlich können Schriften bei gleicher Schriftgröße optisch sehr unterschiedlich wirken. Üblicherweise ist die Höhe des kleinen „x“-Zeichens (die x-Höhe) die Referenz zur Bestimmung der scheinbaren Größe eines Zeichens.

Mit der font-size-adjust-Regel können wir also Schriften gleicher Größe optisch wiedergeben, da die Eigenschaft die Höhe der Kleinbuchstaben anpasst. Leider ist diese Eigenschaft derzeit nur in Firefox und in Chrome und Edge hinter einem Flag verfügbar, kann aber als progressive Erweiterung mit dem @support-Check verwendet werden:

 @supports (font-size-adjust: 1;) { article { font-size-adjust: 0.5; } }

Es hilft auch beim Wechsel von der Fallback-Schriftart zu der aus der Ferne geladenen (z. B. mit Google Fonts).

Optimale Zeilenhöhe

Wir denken, dass Typografie schwarz und weiß ist. Typografie ist wirklich weiß [...] Es ist der Raum zwischen den Schwarzen, der sie wirklich ausmacht.

— Massimo Vignelli, Helvetica, 2007

Da es sich bei Typografie eher um „Weiß“ als um „Schwarz“ handelt, müssen bei der Gestaltung einer Website oder Webanwendung Besonderheiten wie Zeilenhöhe, Abstände zwischen Absätzen und Zeilenumbrüche berücksichtigt werden.

Die Einstellung der Schriftgröße anhand der x-Höhe hilft bei der Optimierung der Zeilenhöhe. Die Standardzeilenhöhe in Browsern ist 1,2 (ein Wert ohne Einheit ist relativ zur Schriftgröße), was der optimale Wert für Times New Roman ist, aber nicht für andere Schriftarten. Zu beachten ist auch, dass der Zeilenabstand nicht linear mit der Schriftgröße wächst und von verschiedenen Faktoren wie der Art des Textes abhängt. Durch das Testen einiger gängiger Schriftarten für das Lesen in Langform in Kombination mit Größen von 8 bis 14 Punkt konnten wir ableiten, dass auf dem Papier das Verhältnis zwischen der x-Höhe und dem optimalen Zeilenabstand 37,6 beträgt.

Im Vergleich zum Lesen auf Papier erfordert das Bildschirmlesen im Allgemeinen mehr Zeilenabstand. Daher sollten wir das Verhältnis für digitale Umgebungen auf 32 anpassen. In CSS lässt sich dieser Erfahrungswert in folgende Regel übersetzen:

 p { line-height: calc(1ex / 0.32); }

Im richtigen Lesekontext legt diese Regel eine optimale Zeilenhöhe sowohl für Serifen- als auch für Sans-Serif-Schriftarten fest, selbst wenn keine typografischen Werkzeuge verfügbar sind oder wenn ein Benutzer eine Schriftart festgelegt hat, die die vom Designer gewählte überschreibt.

Definieren Sie die Skala

Nachdem wir nun die Schriftgröße angepasst und die Zeilenhöhe mit der Ex-Einheit berechnet haben, müssen wir die typografische Skalierung definieren, um die Abstände zwischen den Absätzen richtig zu setzen und dem Lesen einen guten Rhythmus zu geben. Wie bereits erwähnt, wächst der Zeilenabstand nicht linear, sondern variiert je nach Textart. Bei Titeln mit großer Schriftgröße sollten wir beispielsweise ein höheres Verhältnis für die Zeilenhöhe in Erwägung ziehen.

 article h1 { font-size: 2.5em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h2 { font-size: 2em; line-height: calc(1ex / 0.42); margin: calc(1ex / 0.42) 0; } article h3 { font-size: 1.75em; line-height: calc(1ex / 0.38); margin: calc(1ex / 0.38) 0; } article h4 { font-size: 1.5em; line-height: calc(1ex / 0.37); margin: calc(1ex / 0.37) 0; } article p { font-size: 1em; line-height: calc(1ex / 0.32); margin: calc(1ex / 0.32) 0; }

Buchstaben- und Wortabstand

Wenn wir an der Lesbarkeit arbeiten, müssen wir auch Leser berücksichtigen, die herausgefordert sind, wie z. B. Menschen mit Legasthenie und Lernschwierigkeiten. Entwicklungsbedingte Legasthenie beeinträchtigt das Lesen, und die Diskussion und Erforschung der Ursachen ist noch im Gange. Es ist wichtig, wissenschaftliche Studien heranzuziehen, um die Auswirkungen visueller und typografischer Variablen auf das Lesen zu verstehen.

Beispielsweise gab es in einer von meinem Unternehmen durchgeführten Studie („Testing Text Readability of Dyslexia-Friendly Fonts“) klare Hinweise darauf, dass die Glyphenformen gut lesbarer Schriftarten nicht wirklich das Lesen unterstützen, aber größere Abstände zwischen den Zeichen (Tracking) tut. Dieser Befund wurde durch eine weitere Studie zur Wirksamkeit von erhöhtem Abstand bestätigt („How the Visual Aspects Can Be Crucial in Reading Acquisition: The Intriguing Case of Crowding and Developmental Dyslexia“).

Diese Studien legen nahe, dass wir die Dynamik und Reaktionsfähigkeit von Webseiten nutzen sollten, indem wir effektivere Tools anbieten, wie z. B. Steuerelemente für die Handhabung von Abständen. Eine gängige Technik beim Vergrößern der Zeichengröße besteht darin, den Abstand zwischen Buchstaben und Wörtern über CSS-Eigenschaften wie letter-spacing und word-spacing anzupassen.

Das Problem dabei ist, dass der letter-spacing bedingungslos wirkt und die Verfolgung der Schriftart unterbricht, was dazu führt, dass die Seite nicht optimale Abstände wiedergibt.

Alternativ können wir variable Schriftarten verwenden, um mehr Kontrolle über das Rendern von Schriftarten zu erhalten. Schriftdesigner können Abstände variabel und nichtlinear parametrisieren und bestimmen, wie sich Gewicht und Form einer Glyphe besser an die Gewohnheiten des Lesers anpassen können. Im folgenden Beispiel können wir mit der Schriftart Amstelvar die optische Größe sowie die Abstände und den Kontrast wie vom Designer beabsichtigt erhöhen.

Der Web.dev-Artikel „Einführung in variable Schriftarten im Web“ enthält weitere Einzelheiten darüber, was variable Schriftarten sind und wie sie verwendet werden. Und sehen Sie sich das Werkzeug Variable Schriftarten an, um zu sehen, wie sie funktionieren.

Breite und Ausrichtung

Um den Lesefluss zu optimieren, müssen wir auch an der Breite des Absatzes arbeiten, also der Anzahl der Zeichen und Leerzeichen auf einer Zeile. Beim Lesen konzentriert sich unser Auge auf etwa acht Buchstaben in einer Foveatio (dh die Operation, die aktiviert wird, wenn wir ein Objekt betrachten), und es kann nur wenige aufeinanderfolgende Wiederholungen verarbeiten . Daher sind Zeilenumbrüche entscheidend: Der Moment, in dem man seinen Fokus vom Ende einer Zeile zum Anfang der nächsten bewegt, ist eine der komplexesten Operationen beim Lesen und muss durch das Einhalten der richtigen Anzahl von Zeichen pro Textart erleichtert werden. Für einen einfachen Absatz beträgt eine übliche Länge etwa 60 bis 70 Zeichen pro Zeile. Dieser Wert kann einfach mit der ch-Einheit eingestellt werden, indem dem Absatz eine Breite zugewiesen wird:

 p { width: 60ch; max-width: 100%; }

Auch beim zeilenübergreifenden Lesen spielt der Blocksatz eine wichtige Rolle. Die Silbentrennungsunterstützung für Sprachen ist in den verschiedenen Browsern nicht immer optimal; daher muss es überprüft werden. Vermeiden Sie auf jeden Fall Blocksatz ohne Silbentrennung , da der entstehende horizontale Abstand das Lesen erschweren würde.

 /* The browser correctly supports hyphenation */ p[lang="en"] { text-align: justify; hyphens: auto; } /* The browser does NOT correctly support hyphenation */ p[lang="it"] { text-align: left; hyphens: none; }

Die manuelle Silbentrennung kann für Sprachen verwendet werden, die keine native Unterstützung haben. Es gibt mehrere Algorithmen (sowohl server- als auch clientseitig), die den ‐ Entität in Worten, um Browser anzuweisen, wo das Token geknackt werden kann. Dieses Zeichen wäre unsichtbar, es sei denn, es befindet sich am Ende der Zeile, woraufhin es als Bindestrich gerendert würde. Um dieses Verhalten zu aktivieren, müssen wir die hyphens: manual CSS Regel setzen.

Vordergrund Kontrast

Der Kontrast von Zeichen und Wörtern zum Hintergrund ist grundlegend für die Lesbarkeit. Die WCAG hat Richtlinien und Einschränkungen für verschiedene Standards (A, AA, AAA) definiert, die den Kontrast zwischen Text und Hintergrund regeln. Der Kontrast kann mit verschiedenen Tools berechnet werden, sowohl für Design- als auch für Entwicklungsumgebungen. Denken Sie daran, dass automatisierte Validatoren unterstützende Tools sind und nicht die gleiche Qualität wie ein echter Test garantieren.

Durch die Verwendung von CSS-Variablen und einer calc -Anweisung können wir dynamisch die Farbe berechnen, die den besten Kontrast zum Hintergrund bietet. Auf diese Weise können wir dem Benutzer verschiedene Kontrastarten anbieten (Sepia, Hellgrau, Nachtmodus usw.), indem wir das gesamte Thema entsprechend der Hintergrundfarbe konvertieren.

 article { --red: 230; --green: 230; --blue: 230; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000; --aa-brightness: calc(( (var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114) ) / 1000); --aa-color: calc((var(--aa-brightness) - 128) * -1000); background: rgb(var(--red), var(--green), var(--blue)); color: rgb(var(--aa-color), var(--aa-color), var(--aa-color)); } 

Darüber hinaus wird es mit der Einführung und browserübergreifenden Unterstützung der Präferenz prefer-color-scheme Medienabfrage noch einfacher, den Wechsel von hellem zu dunklem Design je nach Benutzerpräferenz zu verwalten.

 @media (prefers-color-scheme: dark) { article { --red: 30; --green: 30; --blue: 30; } }

Vorwärts gehen

Design und Entwicklung für optimales Lesen erfordern viel Wissen und die Arbeit vieler Fachleute. Je mehr dieses Wissen im Team verbreitet wird, desto besser geht es den Benutzern. Nachfolgend finden Sie einige Punkte, die uns zu guten Ergebnissen führen.

Für Designer

• Betrachten Sie die semantische Struktur als Teil des Projekts und nicht als technisches Detail;
• Dokumentieren Sie Layout- und Schriftartmetriken, insbesondere das Warum und Wie Ihrer Entscheidungen. Sie helfen Entwicklern, das Design korrekt zu implementieren;
• Reduzieren Sie typografische Variablen so weit wie möglich (weniger Familien, Stile und Varianten).

Für Entwickler

• Lernen Sie die Prinzipien der Typografie kennen, um die getroffenen Designentscheidungen zu verstehen und diese umzusetzen;
• Verwenden Sie Einheiten relativ zur Schriftgröße, um ansprechende Layouts (Füllungen, Ränder, Lücken) zu implementieren, die sich an die Benutzereinstellungen anpassen.
• Vermeiden Sie die uneingeschränkte Manipulation von Schriftmetriken. Die Lesbarkeit kann beeinträchtigt werden, wenn Schriftartbeschränkungen nicht eingehalten werden.

Für Teams

• Lesen und verstehen Sie die Prinzipien der WCAG;
• Betrachten Sie Inklusion und Zugänglichkeit als Teil des Projekts (und nicht als separate Themen).

Lesen ist eine komplexe Tätigkeit. Trotz der vielen Ressourcen zur Webtypografie und der wissenschaftlichen Arbeiten, die Bereiche für Verbesserungen aufzeigen, gibt es kein Patentrezept für eine gute Lesbarkeit. Die Anzahl der zu berücksichtigenden Variablen mag überwältigend erscheinen, aber viele von ihnen sind überschaubar.

Wir können die optimale Zeilenhöhe eines Absatzes mit der Einheit ex und die Breite eines Absatzes mit der Einheit ch festlegen, um die bevorzugten Browsereinstellungen des Benutzers für Schriftgröße und -familie zu berücksichtigen. Wir können variable Schriftarten verwenden, um den Abstand zwischen Buchstaben und Wörtern anzupassen, und wir können den Strich von Glyphen manipulieren, um den Kontrast zu erhöhen, was Lesern mit Sehbehinderungen und Legasthenie hilft. Wir können sogar den Textkontrast mithilfe von CSS-Variablen automatisch anpassen, um dem Benutzer sein bevorzugtes Thema zu geben.

All dies hilft uns, eine dynamische Webseite zu erstellen, deren Lesbarkeit entsprechend den Bedürfnissen und Vorlieben des Benutzers optimiert ist. Schließlich ist es angesichts der Tatsache, dass jede kleine Implementierung oder jedes technologische Detail einen großen Unterschied machen kann, immer noch wichtig, die Leseleistung der Benutzer mit dem endgültigen Artefakt zu testen.

Ähnliche Resourcen

• „Testen der Textlesbarkeit von Legasthenie-freundlichen Schriftarten“, Galliussi, Perondi, Chia, Gerbino, Bernardis (2020)
• „Wie die visuellen Aspekte beim Leseerwerb entscheidend sein können: Der faszinierende Fall von Crowding und Entwicklungsdyslexie“, Gori, Facoetti (2015)