Ein kleiner Ratgeber für die
täglichen typografischen Abenteuer

Typo—was?

Typografie ist die Kunst Schrift zu arrangieren, mit dem Ziel Sprache sichtbar zu machen. Wir alle arrangieren Schriften mehrmals pro Tag, wenn wir Essays schreiben, Notizen von Meetings zusammenfassen oder Folien für eine Präsentation erstellen. Leider denken wir dabei für gewöhnlich mehr darüber nach, was wir schreiben, als wie wir schreiben. Oder, noch viel wichtiger, wie andere es lesen.

1. Gute Typografie lässt uns lesen
Gute Typografie ist nützlich. Sie ermöglicht es dem Leser sich auf den Inhalt zu konzentrieren, und nicht auf die Formatierung. Idealerweise wird die nämlich gar nicht wahrgenommen und ergibt einfach Sinn für den Leser.

2. Gute Typografie lässt uns fühlen
Gute Typografie ist emotional. Die Auswahl einer Schrift hat einen starken Effekt darauf wie der Inhalt eines Textes wahrgenommen und empfunden wird. Durch ihren Charakter gibt die richtige Schrift einem Text Stimme und Tonalität.

Dieser kleine Ratgeber ist für jeden, der diesen typografischen Abenteuern in seinem Alltag begegnet oder einfach Dinge richtig machen will. Die folgenden kurzen Kapitel beschreiben, wie man durch das Beherrschen von wenigen Regeln seine Botschaft besser und erfolgreicher vermittelt.

Während ich hier Regeln für die häufigsten Fälle zusammenzufasse, möchte ich trotzdem jeden dazu auffordern, auf die eigene Bewertung zu vertrauen, wenn es um finale Entscheidungen geht. Am wichtigsten ist es, die Hierarchie des Inhalts herauszuarbeiten und ihn so zu gestalten, dass der Leser leicht folgen kann.

Ich betreibe diese Seite als fortlaufendes Projekt und möchte jeden einladen, mit auf GitHub daran zu arbeiten oder Feedback zu geben via E-Mail und Twitter. Vielen Dank!

Fonts vs Schriften

Fonts und Schriften werden oft missverständlicher Weise für das Selbe gehalten. Dabei ist es gar nicht schwer so zu verstehen, wenn man es richtig erklärt. Hier sind zwei exzellente Zitate, die den Unterschied perfekt erläutern:

„Meinen Studenten erkläre ich den Zusammenanhang und die Unterschiede zwischen Schriften und Fonts, indem ich sie mit Songs und MP3s (bzw. Songs und CDs, wenn man eine physische Metapher bevorzugt) vergleiche.“
— Nick Sherman, typographica.org

„Die physische Form einer Sammlung von Buchstaben, Zahlen, Symbolen, etc (egal ob eine Kiste voller Metallbuchstaben oder eine Datei) ist ein Font. Bezieht man sich auf das visuelle Design dieser Sammlung (wie sie aussieht), nennt man sie Schriftart.“
— Mark Simonson, typophile.com

Oder anders gesagt: Schriften ist das was wir anschauen und auswählen (genau wie wir auch Songs auswählen und anhören). Fonts sind die digitale Repräsentation einer Schrift, die Computer nutzen, um unseren Text darzustellen (genau wie MP3-Dateien die wir nutzen um Songs abzuspielen).

Schriften mischen

Es gibt eine Million und eins Schriften aus denen man heutzutage wählen kann. Eine Schrift auszuwählen scheint einfach, bis zu dem Punkt an dem man versucht, richtig kreativ zu werden und mehrere verschiedene Schriften zu mischen. Dann wird es für gewöhnlich chaotisch. Hier sind ein paar Regeln wie man Schriften richtig mischt.

1. Es gibt gar keinen Grund, Schriften zu mischen!
Wählt man eine Schrift für einen Text aus, sollte man darauf achten, dass sie mehrere verschiedene Stile (man nennt sie „Schriftschnitte“) hat. Es ist überraschend, wie elegant man Inhalte strukturieren kann, ausschließlich durch Verändern der Schriftgröße und/oder des Schriftschnittes – genauso wie hier auf dieser Seite.

2. Serifen und serifenlose Schrift aus der selben Familie
Sollte dann immer noch der dringende Wunsch bestehen, Schriften zu mischen, sollte man die Augen offenhalten nach Schriftfamilien, die sowohl serifenlose als auch Schriften mit Serifen bieten. Damit reduziert man das Risiko, dass die Schriften nicht zueinander passen. Ein großartiges Beispiel für eine solche Schriftfamilie sind FF Meta & FF Meta Serif von Erik Spiekermann.

3. Champions League
Ok, verstanden! Wer wirklich Schriften mischen will, kann das auf verschiedenen Wegen tun. Man kann Schriften mischen basierend auf Kontrast, Ähnlichkeit, Extremen oder Ungleichheit. Am einfachsten ist es jedoch mit dem Mischen von zwei Schriften zu beginnen, die ähnliche Merkmale zeigen. Die beiden Schriften sollten eine ähnliche x-Höhe besitzen und die Buchstaben sollten sich in Gestalt und Proportionen ebenfalls ähnlich sein. Beispielweise kann Chaparral Pro und Source Sans Pro sehr gut miteinander mischen.

Schriftgröße & Zeilenabstand

Typografie sollte das Lesen von Inhalten leicht machen. Der Leser soll ohne Anstrengung einer Zeile folgen oder zum nächsten Zeilenanfang springen können. Die entscheidenden Faktoren für Lesbarkeit sind Schriftgröße und Zeilenabstand. Da beide von der X-Höhe der Buchstaben, der Länger der Zeile und von der Form der Buchstaben abhängen, gibt es leider keine Patentlösung. Allerdings gibt es ein paar Orientierungspunkte, die helfen die richtigen Entscheidungen zu treffen.

1. Zeilenabstand relativ zur Schriftgröße
Für die meisten Texte liegt der optimale Zeilenabstand irgendwo zwischen 120% und 145% der Schriftgröße, in Abhängigkeit von den zuvor genannten Faktoren. Für größere überschriften kann der Zeilenabstand geringer sein als beim Fließtext. Die meisten Apps und CSS erlauben es, den Zeilenabstand in Prozent zu definieren, was immer zu empfehlen ist. Es macht die Arbeit deutlich leichter und spart Zeit, die man ansonsten zum manuellen Berechnen bräuchte.

2. Mit dem einfachen Fließtext anfangen
Der Fließtext nimmt den meisten Raum in jedem Dokument ein, weshalb man damit anfangen sollte. Eine komfortable Schriftgröße für gedruckten Text ist 9 – 12 Punkt, wohingegen es am Bildschirm eher 14 – 24 Pixel sind, abhängig von der gewählten Schrift. Eine optimale Zeilenlänge für problemloses, leichtes Lesen liegt zwischen 45 und 90 Buchstaben.

3. Jede Schrift ist anders
Unterschiedliche Schriften können sich sehr unterschiedliche anfühlen und aussehen, selbst wenn sie in der selben Schriftgröße gesetzt sind. Besonders Serifenschriften erscheinen oft ganz anders als serifenlose Schriften. Um es dem Leser so einfach wie möglich zu machen, sowohl der Zeile zu folgen als auch zum Anfang der nächsten Zeilen zu springen, muss man für gewöhnlich mehrere unterschiedliche Werte für Schriftgröße und Zeilenabstand ausprobieren, bis man die beste Option findet.

Apostroph

Der Apostroph ist ein unscheinbares Zeichen (in Form einer „hochgestellten 9“), das nicht im Ansatz die Aufmerksamtkeit bekommt, die es verdient. Für gewöhnlich erzeugt eine Tastatur einen sogenannten „Schreibmaschinen-Apostroph“ und nur wenige Apps beheben diesen Fehler – indem sie aus ' ein ’ machen. Noch schlimmer wird es, wenn anstelle eines ’ die Akzente ´ oder ` verwendet werden!

In der deutschen Sprache hat der Apostroph zwei wesentliche Verwendungen.

1. Auslassung eines oder mehrerer Buchstaben
Der Apostroph zeigt, an welcher Stelle Buchstaben ausgelassen wurden.
Was für ’n Quatsch! oder Heute ist’s sonnig.

2. Genitiv bei Wörtern die auf s, ß, z oder x enden
Der Apostroph wird bei Substantiven verwendet, die auf s, ß, z oder x enden, um eine Beziehung anzuzeigen. Fälschlicher Weise wird oft das Genitiv-S aus dem Englischen verwendet. Dieses gibt es im Deutschen allerdings nicht, weshalb es in solchen Fällen auch als „Deppenapostroph“ bezeichnet wird. Also, Vorsicht!
Wir spielen mit Felix’ Monstertruck.
Falsch: Petra’s Nagelstudio oder Willi’s Werkstatt

Um ein korrektes Apostroph-Zeichen in einer App zu schreiben, die keine automatische Korrektur hat, sind die folgenden Tastatur-Kurzbefehle nützlich:

Anführungszeichen

Anführungszeichen werden verwendet, um wörtliche Rede oder Zitate zu kennzeichen. Manchmal benutzt man sie auch um Ironie zu verdeutlichen. Für gewöhnlich schreiben viele Apps falsche Anführungszeichen (oftmals englische “Quotes” oder Inch-Zeichen "). Die richtigen Anführungszeichen für die deutsche Sprache beginnen immer unten „ (in Form einer 99) und enden oben “ (in Form einer 66). Mehr über Anführungszeichen findet man auf Wikipedia.

Anführungszeichen sind sprachenabhängig weshalb man immer die richtigen Zeichen für die jeweilige Sprache nutzen sollte. Im Englischen werden “Quotes” oder “Quotation Marks” benutzt, welche jeweils vorne und hinten oben (in Form einer 66,99) gesetzt werden. « Guillemets » werden verwendet in Französisch (normalerweise mit einem Leerzeichen dazwischen), Italienisch, Griechisch und vielen anderen Sprachen.

Hinweis: Guillemets werden wegen ihrer Form im Deutschen „Gänsefüßchen“ genannt.

Striche

Der Bindestrich ist ein Zeichen, das sehr oft genutzt (aber vor allem falsch genutzt) wird. Dabei gibt es neben dem Bindestrich noch einige weitere Striche, die wichtig sind. Vor allem sind diese Striche nicht ein und der selbe Strich und jeder hat eine eigene Funktion. Detaillierte Informationen dazu findet man auf Wikipedia.

Binde- oder Trennstrich (Viertelgeviertstrich)
Jeder weiß, wie der Bindestrich getippt wird und deshalb wird er so oft und an so vielen Stellen falsch verwendet. Der Binde- oder Trennstrich wird verwendet, um Wörter zu einem zu verbinden oder um ein Wort am Zeilenende zu trennen.
Zwei Monstertrucks liefern sich ein Kopf-an-Kopf-Rennen.
Binde-, Ergänzungs- oder Trennstrich

Bis- oder Gedankenstrich (Halbgeviertstrich)
Der Bis- oder Gedankenstrich ist doppelt so lange wie der Bindestrich und ersetzt „bis“ in Längen, Strecken oder Zeiten. Er wird auch genutzt um einen Gedanken im Satz hervorzuheben, dann normalerweise mit umschließenden Leerzeichen.
Ich lebte in San Francisco von 1976 – 1978.
Wir haben keine Schokolade mehr – furchtbar!

Geviertstrich
Der Geviertstrich wird im Deutschen so gut wie nicht mehr verwendet. Im Englischen wird er als noch häufiger Gedankenstrich (dann ohne umschließende Leerzeichen) verwendet.

Klammern & Co

Runde Klammern trennen einen Gedanken oder Einschub vom restlichen Satz. Eckige Klammern kennzeichnen änderungen innerhalb eines Zitates. Und obwohl geschweifte Klammern fast ausschließlich im mathematischen Kontext verwendet werden, verdienen sie hier eine Erwähnung, weil sie Teil fast jeder Programmiersprache sind. Klammern folgen normalerweise nicht der Formatierung des Textes (bspw. kursiv), den sie umschließen.