Die Schriftfamilien

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.

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 Mono Sans zu meinen Favoriten.

Die Schrift zur Unterstützung von Dylexie. Hier 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.

Grundlegende Styles für den Text

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

html { font-family : Barlow, sans-serif; font-size : 22px; /* rem-Basis */ line-height : 1.5; font-weight : 400; }

Das im Codebeispiel verwendete <html>-Element legt die Schrift für das gesamte Dokument fest. Alle anderen elemente erben davon. Das ist besonders beider 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.