Typografie
Drei Schriften, sechs Größen, ein Raster. Mehr braucht eine Oberfläche nicht.
Die drei Schriften
Fließtext · --lg-font-text
Tahoma
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÄÖÜ äöüß 0123456789 €&@?!
Wie vorgegeben. Tahoma ist auf Windows und macOS installiert und wird nicht ausgeliefert (Lizenz). Auf anderen Systemen greift Verdana, dann DejaVu Sans. Das sieht ähnlich aus, nur etwas breiter.
Überschriften · --lg-font-head
Trebuchet MS
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz ÄÖÜ äöüß 0123456789
Das war die Schrift der Titelleiste von Windows XP. Fett geschnitten, mit leichtem Charakter, aber ohne Schnörkel. Fällt zurück auf Tahoma.
Code und Zahlen · --lg-font-mono
Share Tech Mono
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 {}[]()<>=+-*/;:
Wird mit dem Design System ausgeliefert (fonts/share-tech-mono.woff2, 13 KB). Lizenz: SIL Open Font License. Fällt zurück auf Courier New.
Warum Trebuchet MS für Überschriften?
Tahoma für alles wäre auch gegangen. Die Überschriften brauchen aber einen Unterschied zum Text, der ohne Größe auskommt. Trebuchet MS ist die authentische Wahl und auf denselben Systemen vorhanden wie Tahoma.
Größenstufen
Die Basis ist 14 px (0,875 rem). Alle Größen sind relativ und folgen der Einstellung des Browsers.
| Stufe | Variable | Größe | Muster |
|---|---|---|---|
| 3XL | --lg-fs-3xl | 32 px | Startseite |
| 2XL | --lg-fs-2xl | 26 px | Seitentitel (h1) |
| XL | --lg-fs-xl | 20 px | Abschnitt (h2) |
| LG | --lg-fs-lg | 16 px | Unterabschnitt (h3) |
| MD | --lg-fs-md | 14 px | Fließtext und Tabellen. Das ist die Standardgröße. |
| SM | --lg-fs-sm | 13 px | Schaltflächen, Felder, Reiter |
| XS | --lg-fs-xs | 12 px | Hinweise, Statusleiste, Fußzeile |
Textbeispiel
So sieht ein Absatz aus
Der Fließtext steht in Tahoma, 14 px, mit einem Zeilenabstand von 1,5. Das reicht für längere Texte, ohne dass die Zeilen ineinanderlaufen. Fett hebt etwas hervor, ein Link ist immer unterstrichen, und Code steht in Share Tech Mono.
- Listen haben Punkte und einen kleinen Abstand.
- Verschachtelung ist erlaubt:
- Eine Ebene reicht meistens.
- Nummerierte Listen zählen.
- Wirklich.
- Definition
- Ein Begriff in Fett, die Erklärung eingerückt darunter.
Tastenkürzel: Strg + S speichert, Esc bricht ab.
HTML-Code
<h3>So sieht ein Absatz aus</h3>
<p>Der Fließtext steht in Tahoma, 14 px, mit einem Zeilenabstand von 1,5. Das reicht für längere Texte, ohne dass die Zeilen ineinanderlaufen. <strong>Fett</strong> hebt etwas hervor, <a href="#textbeispiel">ein Link</a> ist immer unterstrichen, und <code>Code</code> steht in Share Tech Mono.</p>
<ul>
<li>Listen haben Punkte und einen kleinen Abstand.</li>
<li>Verschachtelung ist erlaubt:
<ul><li>Eine Ebene reicht meistens.</li></ul>
</li>
</ul>
<ol>
<li>Nummerierte Listen zählen.</li>
<li>Wirklich.</li>
</ol>
<dl>
<dt>Definition</dt>
<dd>Ein Begriff in Fett, die Erklärung eingerückt darunter.</dd>
</dl>
<p>Tastenkürzel: <kbd>Strg</kbd> + <kbd>S</kbd> speichert, <kbd>Esc</kbd> bricht ab.</p>Abstände
Alle Abstände sind Vielfache von 4 px, mit der 2 px als Feinschritt.
| Variable | Wert | Länge |
|---|---|---|
--lg-sp-1 | 2 px | |
--lg-sp-2 | 4 px | |
--lg-sp-3 | 8 px | |
--lg-sp-4 | 12 px | |
--lg-sp-5 | 16 px | |
--lg-sp-6 | 24 px | |
--lg-sp-7 | 32 px |