Typografie ist Subtraktion

Diese Seite ist Markits Schriftmuster. Sie ist zwei Dinge zugleich: ein Essay, den man wirklich lesen kann, und eine Checkliste, die jedes Stück Markdown-Syntax durchgeht, das der Editor unterstützt. Beides muss gleichzeitig gelten — ein Muster, das bloß Syntax aufhäuft, täuscht niemanden, und erst ein echter Lauftext verrät die lockere Zeile, den undichten Rand, die holprige Naht zwischen Buchstaben und Ziffern.

Der Maßstab der Typografie war nie „sieht es gut aus", sondern „wie müde sind die Augen nach tausend Wörtern". Das klingt banal, disqualifiziert aber die meisten Entwürfe, die auf Fotos glänzen.

Die erste Regel der Seite: subtrahieren

Das Einzige auf dem Bildschirm eines Editors, das wirklich zum Inhalt gehört, ist der Text selbst. Alles Übrige — Werkzeugleisten, Seitenleisten, Knöpfe, Statusanzeigen — konkurriert mit ihm um Aufmerksamkeit. Unsere erste Regel lautet deshalb: Im Grundzustand sind Interface-Elemente entweder unsichtbar oder an den Rand des Blickfelds gerückt.

In Zahlen:

Die Zahlen in der Tabelle stehen in Tabellenziffern — ein kleines Detail, aber eine Spalte, die seitlich wackelt, zwingt den Leser zum Vergleichen statt zum Verstehen.

Weißraum gruppiert besser als Linien

Inhalt mit Trennlinien zu gliedern ist der Anfängerweg; ihn mit Raum zu gliedern der reife. Eine Linie hinterlässt eine harte Kante auf der Seite, Weißraum bleibt unsichtbar:

• 16 px zwischen Absätzen, damit Sätze Gruppen bilden
• 24 px über einer Zwischenüberschrift, 8 px darunter — oben eng, unten locker klebt den Titel an das, was er regiert
• 40 px über einer Hauptüberschrift, damit das Auge natürlich innehält

Wird diese gestufte Staffelung plattgedrückt — etwa von einer pauschalen margin-Regel —, zerfällt die Seite sofort in eine Kette gleichabständiger Blöcke, und die Hierarchie hängt allein an der Schriftgröße. Der Ausfall ist lautlos: Die Deklarationen stehen noch im Code, auf den ersten Blick wirkt alles gesund.

Schriften: Latein und CJK sind zwei Berufe

Der Font-Fallback in CSS geschieht zeichenweise; die Reihenfolge des Stapels entscheidet also, wer das Lateinische zeichnet. Steht eine CJK-Schrift vorn, fallen camelCase, Versionsnummern wie v1.522 und jeder lateinische Buchstabe auf die West-Glyphen, die zufällig in der CJK-Schrift stecken — meist eine Beigabe.

Richtig ist: die lateinische Schrift zuerst:

font-family: Charter, 'LXGW WenKai', -apple-system, 'PingFang SC', sans-serif;

Beide Reihenfolgen „laufen". Der Unterschied zeigt sich nur in den Glyphen, ein Code-Review fängt ihn nicht — ein Test muss Wache stehen.

Ein Gegenbeispiel

Der folgende Ausschnitt macht die zwei klassischen Fehler auf einmal — CJK-Schrift zuerst, synthetische Auszeichnung obendrauf:

// ⚠️ an beiden Stellen falsch
const stack = "'PingFang SC', Charter, sans-serif"  // CJK zuerst: Latein außer Kontrolle
const emphasis = { fontStyle: 'italic' }            // schräg gestellt ist keine Kursive

Eine echte Kursive ist eine eigene Zeichnung der Buchstaben; eine geschert erzeugte Schräge ist dieselbe Zeichnung, bloß gekippt. Bei kleinen Graden verkleben die Striche, wo sie sich kreuzen.

Synthetischer Fettdruck ist dieselbe Problemfamilie. Fehlt einer Schrift das echte Fett, zeichnet der Browser die Konturen dicker nach — und das Verhältnis von Dick und Dünn ist zerstört.

Die Syntax-Checkliste

Was folgt, geht die restliche Syntax durch und prüft nebenbei, dass unter diesem Stylesheet nichts miteinander streitet.

Zeilenelemente

Im Lauftext dürfen Fett, Betonung, Durchgestrichenes, Inline-Code und ein externer Link vorkommen. Automatisch erkannte Adressen zählen auch: https://example.com . Mischen sich diese Elemente in einem Absatz, stirbt zuerst der Zeilenabstand — ein einziges Element mit eigenem Padding stemmt die Zeile auf.

Tags sind Metadaten, nicht die Pointe des Satzes; sie erscheinen als blasse Pillen statt als bunte Wand: #typografie #schriften #handwerk

Listen

Nummerierte Listen für Schritte, ungeordnete für Gleichrangiges:

1. Erst klären, welches Problem zu lösen ist
2. Dann klären, ob es das Lösen verdient
   1. Wie viele Menschen es trifft
   2. Wie oft es zubeißt
3. Erst zuletzt: wie man es löst

Aufgabenlisten für Checklisten:

• Satzbreite und Durchschuss festlegen
• Reihenfolge des Font-Stapels festlegen
• Entscheiden, wie Betonung im Lauftext aussieht
• Hängende Interpunktion am echten Gerät prüfen

Eine verschachtelte Liste:

• Schriften
  • Latein: Charter, Georgia, Palatino
  • CJK: LXGW WenKai, Source Han Serif, die System-Grotesk
• Satz
  • Abstände, wo Latein auf CJK trifft
  • Interpunktions-Ausgleich

Zitate und Hinweisblöcke

Gute Texte verdienen eine gute Seite.

Ziel der Typografie ist nicht, Text hübsch zu machen, sondern den Leser vergessen zu lassen, dass es die Seite gibt.

Die fünf Hinweisblöcke tragen je einen eigenen Ton. Sie sind vom Autor gewählte Semantik, kein Schmuck der Oberfläche:

Für langes Lesen lohnt eine Textschrift mit echter Kursive; Displayschnitte gehören in Überschriften.

Die .md-Datei auf der Platte ist die einzige Wahrheit. Jeder typografische Effekt lebt in der Darstellungsschicht und nirgendwo sonst.

Niemals den Text des Nutzers anfassen, während er tippt. Ein automatisch eingefügtes Leerzeichen landet mit dem nächsten Autosave auf der Platte.

Codeblöcke

Ein Codeblock soll seitlich rollen statt die Satzbreite zu sprengen, und seine Palette bleibt leise — Schlüsselwörter in der Akzentfarbe, Kommentare ins Grau zurückgenommen, der Rest in Texttinte. Regenbogen-Highlighting schreit auf warmem Papier:

/// Das aktuelle Dokument im Finder zeigen
@objc private func revealInFinder(_ sender: Any?) {
    guard let url = session.url else { return }
    NSWorkspace.shared.activateFileViewerSelecting([url])
}

Eine sehr lange Zeile soll rollen, nicht umbrechen:

curl -sSL "https://raw.githubusercontent.com/example/repo/main/very/long/path/to/some/file.txt" -o output.txt

Bilder

Folgt einem Bild direkt eine Bildunterschrift, gehört der Abstand zwischen beiden enger als ein normaler Absatzabstand — erst dann liest man sie als Einheit.

Zuletzt

Die Linie oben ist einer ihrer legitimen Einsätze: Sie markiert einen echten Bruch — „der Essay endet, die Coda beginnt" —, nicht das Atmen zwischen Absätzen. Je seltener sie vorkommt, desto mehr Kraft hat ihr einer Auftritt.

Ob ein typografisches Schema trägt, entscheidet am Ende eine einzige Frage: Diese Seite von oben bis unten gelesen — gab es eine Stelle, an der man anhielt und die Seite selbst bemerkte? Wo das geschah, dort ist noch Arbeit.