Die Schriftarten

Ohne zu sehr in die Tiefe zu gehen, unterscheidet man drei wesentliche Schriftarten:

Serifenlose Schriften z. B. Barlow
Serifenschriften z. B. Playfair
Schreibmaschinenschriften z. B. Noto Sans Mono

Als serifenlose Schrift setze ich hier Barlow für den Mengentext ein. Serifenlose Schriften eignen sich aufgrund ihrer gleichmäßigen Strichstärke gut zur Darstellung auf Bildschirmen, deren Pixel am besten gleichmäßige gerade Linien abbilden können. Die Barlow, die ich hier verwende, ist eine der besten Schriften für Bildschirme, die ich kenne. In Punkto Barrierefreiheit/Leserlichkeit für Dyslexie ist sie allerdings nicht optimal.

Menschen mit Dyslexie/Legasthenie müssen die Möglichkeit haben, die Schriftart auf einer Webseite zu ändern. So können sie für sich eine Schrift einstellen, die für sie besser zu lesen ist.

Serifenschrift taucht in meinen Entwürfen nur gelegentlich auf. Ich verwende sie gerne für größere Formate wie Überschriften. Serifenschriften lassen sich auf hochauflösenden Bildschirmen (Retina- oder 4K-Displays) gut einsetzen. Eine geeignete Darstellungsgröße variiert je nach Auflösung, Schriftgröße und Schriftart. Ich verwende hier die Playfair Display. Ich mag deren Nähe zu einer klassischen Bodoni und die schmal laufende Geometrie.

Die Schreibmaschinenschrift wird üblicherweise für Quelltexte oder Tasten-Angaben verwendet. Sie ist aber auch für viele andere Gestaltungsideen gut. Die immer gleich breiten Buchstaben sind ursprünglich der Mechanik einer Schreibmaschine geschuldet. Seit ich die Schriftfamilie Noto entdeckt habe, gehört deren Noto Sans Mono zu meinen Favoriten.

Leserlichkeit für Menschen mit Dyslexie/Legasthenie

Eine Schrift zur Unterstützung bei Dylexie sollte vom Benutzer eingestellt werden können. Zum Beispiel die Atkinson Hyperlegible. Sie wurde entwickelt, um Menschen mit Dylexie das Erkennen der einzelnen Buchstaben zu erleichtern. Zeichen mit sonst ähnlichem Aussehen haben hier eine unterscheidbare Form, zum Beispiel g und q oder 0 (Null) und das große O.

Weitere Schriften sind die Lexend, oder auch die Frutiger 1450. 1450 verweist auf die DIN Norm 1450 zur Leserlichkeit von Schriften.

Grundlegende Styles für den Text

Neben der Schriftfamilie sind die Schriftgröße und der Zeilenabstand die wichtigsten Größen.

html { font-size : 16px; /* rem-Basis */ } body { font-family : Barlow, sans-serif; line-height : 1.5; font-weight : 400; } /* Fluide oder adaptive Schriftgrößen sind hilfreich, denn sie passen sich an Bildschirmgrößen oder Vergrößerungsstufen an. Browser-Erweiterungen, die Schriften und deren Eigenschaften für Menschen mit Lese-Schwierigkeiten umkonfigurieren können, müssen allerdings getestet werden - lässt sich die CSS Einstellung durch die Erweiterung überschreiben? */ body { font-size: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem) }

Das im Codebeispiel verwendete <html>-Element legt die Schrift für das gesamte Dokument fest. Alle anderen Elemente erben davon. Das ist besonders bei der Schriftgröße relevant. Für die Überschriften kann jetzt zum Beispiel mit Root-EM (rem) gearbeitet werden.

h1 { font-size : 3rem; /* 3 x 22px */ font-weight : 700; } h2 { font-size : 2rem; /* 2 x 22px */ font-weight : 700; }

Die typografische Organisation der HTML Elemente

HTML umfasst rund 100 Elemente, die in vier Kategorien unterteilt werden können: Textabsätze, Überschriften, Listen, Abbildungen. Zur Darstellung von Absätzen und Listen stehen zum Beispiel die Elemente p, h1 bis h6, ol, ul, dl zur Verfügung. Die Elemente figure und figcaption dienen der Darstellung von Abbildungen. Alle Elemente müssen gemeinsam betrachtet werden, um eine konsistente und harmonische Gestaltung zu erreichen.

Zwei Textabsätze mit `<p>`

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Assumenda dolor, magnam adipisci beatae natus necessitatibus quia ipsa dignissimos quam molestiae, suscipit iure atque asperiores itaque nulla, perferendis amet?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure corporis velit quis magnam ad cupiditate. Vero voluptatum quas, suscipit, minus numquam beatae omnis unde alias odit dolores esse, nihil iure blanditiis quos saepe? Architecto laudantium id ratione. Modi, animi sequi!

Kleine Schrift mit <small>: Lorem ipsum dolor sit amet consectetur adipisicing elit.

Codezeilen mit `<code><pre>`

10 REM My first code
20 PRINT "Hello, World!"
30 GOTO 40
40 END
10000 DATA 12,34,56,67
10010 DATA 24,35,46,57

Keyboard mit `<kbd>`

F11 F12 Strg + A

Listen mit `<ul>`, `<ol>`, `<dl>`

Lorem, ipsum dolor. Eins.
Lorem, ipsum dolor. Zwei.
Lorem, ipsum dolor. Drei.
Lorem, ipsum dolor. Vier.

Lorem, ipsum dolor. Eins.
Lorem, ipsum dolor. Zwei.
Lorem, ipsum dolor. Drei.
Lorem, ipsum dolor. Vier.

HTML: HyperText Markup Language
CSS: Cascading Style Sheets
JS: JavaScript

Abbildungen mit `<figure>`, `<img>`, `<figcaption>`

Ein Platzhalterbild — Die Möglichkeit einer semantisch ausgeweisenen Bildbeschreibung mit `<figcaption>` ist zum Beipiel für Screenreader oder Suchmaschinen sinnvoll.