CSS lernen leicht gemacht: Textgestaltung und Typografie

In diesem Teil meiner Artikelreihe „CSS lernen leicht gemacht“ widmen wir uns einem der wichtigsten Aspekte des Webdesigns: dem Text. Da das Internet zu einem Großteil aus Informationen in Textform besteht, ist die Gestaltung der Schrift entscheidend dafür, ob eine Webseite für alle Menschen nutzbar ist oder nicht.

Was bedeutet digitale Barrierefreiheit bei Texten?

Bevor wir uns den Code anschauen, müssen wir verstehen, warum wir bestimmte CSS-Eigenschaften nutzen. Barrierefreiheit bedeutet ganz allgemein, dass Barrieren abgebaut werden, damit Menschen mit Behinderungen gleichberechtigt am Leben teilnehmen können.

Digitale Barrierefreiheit überträgt diesen Gedanken auf das Internet. Im Bereich der Typografie (Schriftgestaltung) betrifft das vor allem zwei Gruppen:

• Menschen mit Sehbehinderung: Sie benötigen oft eine sehr starke Vergrößerung des Textes, um ihn lesen zu können.
• Senioren: Mit zunehmendem Alter lässt die Sehkraft nach. Eine Webseite, die starr auf eine kleine Schriftgröße fixiert ist, wird für diese Zielgruppe unbedienbar.

Ein inklusives Webdesign sorgt dafür, dass sich der Text den Bedürfnissen des Nutzers anpasst – und nicht umgekehrt.

Relative Schriftgrößen: rem statt px

Früher haben Webdesigner Schriftgrößen oft in Pixeln (px) angegeben. Das Problem: Pixel sind eine „absolute“ Einheit. Wenn ein Nutzer in seinem Browser eingestellt hat, dass er grundsätzlich alle Texte größer sehen möchte, ignorieren viele Browser die Pixel-Angabe einfach. Der Text bleibt klein.

Die Lösung heißt rem (Root Em). Diese Einheit ist „relativ“. Sie bezieht sich auf die Grundeinstellung des Browsers (standardmäßig meist 16 Pixel).

• 1rem entspricht der Standardgröße (100%).
• 1.5rem ist das 1,5-fache der Standardgröße.

Wenn ein Senior seine Browser-Schrift auf „Groß“ stellt, wächst dein gesamtes Design mit rem-Angaben automatisch mit. Das ist gelebte Inklusion!

Beispiel für barrierefreie Schriftgrößen:

body {
  font-size: 1rem; /* Nutzt die Standardgröße des Nutzers */
}

h1 {
  font-size: 2rem; /* Doppelt so groß wie der Standardtext */
}

p {
  font-size: 1.125rem; /* Etwas größer für bessere Lesbarkeit */
}

Zeilenabstand: Dem Text Luft zum Atmen geben

Für viele Menschen (insbesondere Menschen mit kognitiven Einschränkungen oder Leseschwäche) ist es schwierig, Texte zu lesen, wenn die Zeilen zu eng beieinanderstehen. Das Auge verliert dann beim Zeilenwechsel leicht die Orientierung.

Mit der Eigenschaft line-height schaffen wir Abhilfe. Ein Wert von 1.5 bis 1.6 gilt als ideal für die Barrierefreiheit.

p {
  line-height: 1.6; /* Sorgt für einen angenehmen Zeilenabstand */
  margin-bottom: 1.5rem; /* Abstand nach dem Absatz */
}

Schriftarten (Fonts) barrierefrei wählen

Nicht jede schicke Schriftart ist gut lesbar. Für Menschen mit Sehbehinderung sind klare, schnörkellose Schriften (serifenlose Schriften wie Arial, Helvetica oder Verdana) oft besser zu erfassen als verschnörkelte Schreibschriften.

In CSS definieren wir eine sogenannte „Font-Family“. Wir geben dem Browser dabei nicht nur eine einzige Schriftart vor, sondern eine ganze Liste (einen sogenannten Font-Stack). Wenn der Browser die erste Schrift auf dem Gerät nicht findet, nimmt er die nächste in der Liste.

Warum ist das besonders für Mobilgeräte wichtig?
Auf Smartphones und Tablets (iOS oder Android) sind oft ganz andere Schriftarten installiert als auf einem Windows-PC oder einem Mac. Wenn Sie beispielsweise nur „Arial“ vorgeben, ein Android-Smartphone diese aber nicht installiert hat, wählt das Gerät irgendeine Ersatzschrift – und die ist vielleicht sehr schwer lesbar.

Indem wir eine Liste angeben und am Ende eine allgemeine Kategorie wie sans-serif (serifenlos) hinzufügen, stellen wir sicher, dass die Webseite auf jedem Handy und jedem Computer gut lesbar und barrierefrei bleibt.

body {
  /* Erst Arial, wenn nicht da Helvetica, sonst irgendeine serifenlose Schrift */
  font-family: Arial, Helvetica, sans-serif;
}

Schlussbemerkung

Haben Sie Fragen zur Verwendung von relativen Einheiten oder zur digitalen Barrierefreiheit? Schreiben Sie mir gerne eine E-Mail oder rufen Sie mich an.

Kontakt:
E-Mail: info@marlem-software.de
Telefon: 07072/1278463

Ihr Markus Lemcke

Weiterlesen

CSS lernen leicht gemacht: Design für alle – inklusiv und barrierefrei