In einem Design Schriftarten kombinieren, damit sie im Zusammenspiel eine gewünschte Wirkung entfalten – bei Weitem keine einfache Aufgabe, doch steht sie immer wieder auf der Tagesordnung. Mit der Website Fontjoy liefert Entwickler Jack Qiao einen systematischen Ansatz, um für das Suchen und Finden passender Kombinationen Unterstützung zu bieten.
Er folgt dabei einer ähnlichen Spur, wie sie bereits von beschritten wurde. Kurzgefasst: Die Eigenschaften der verschiedenen Schriftarten werden in Beziehung zueinander gesetzt, woraus sich dann wiederum Rückschlüsse auf deren Ähnlichkeiten oder Unterschiede ziehen lassen.
Bedienung von Fontjoy
Zunächst zur Bedienung der Website: Auch wenn es nicht so aussieht, könnt ihr dort zunächst einmal euren eigenen Text hineinschreiben. Über den kleinen Hell-/Dunkel-Button links neben „Generate“ wechselt ihr zwischen dunklem und hellem Hintergrund. Der Schieberegler lässt festlegen, wie stark der Kontrast bzw. der Unterschied im Erscheinungsbild der Schriftarten sein soll. Nach ganz rechts geschoben besteht höchste, nach ganz links geschoben die niedrigste Ähnlichkeit.
Habt ihr dies eingestellt, klickt ihr auf „Generate“ und die Website zeigt euch eine mögliche Variante an. Das kann wiederholt werden, wobei sich jedes Mal eine neue Kombination ergibt. Gefällt euch zum Beispiel die Schriftart der Überschrift, so könnt ihr diese über das Schloss-Symbol auf der linken Seite fixieren – bei der nächsten Kombinationssuche bleibt sie dann erhalten. Alternativ kann über die Buttons mit den drei Schiebereglern eine Schriftart festgelegt werden.
Anzumerken ist hier einschränkend, dass die Seite „nur“ knapp über 1.800 Schriftarten betrachtet. Da mich bislang jeder Klick auf eine Schriftart zu den Google Fonts führte, ist anzunehmen, dass das dortige Sortiment auch als Grundlage für Fontjoy dient.
So setzt Fontjoy die Schriftarten in Beziehung zueinander
Jack Qiao hat eine durchaus ausführliche Beschreibung zu seiner Website hinterlegt. Die Frage, was eine gute Schriftarten-Kombination sei, schiebt er dabei zunächst zur Seite, denn einfacher zu klären wäre, was eine eher schlechte Kombination ist.
Zwei Punkte nennt er: 1. Kontrast ist wichtig. Schriftarten, die zu viele Gemeinsamkeiten aufweisen, führten zu einem visuellen Konflikt. 2. Umgekehrt sind zu viele Unterschiede dann auch wieder kontraproduktiv, da dies eine gewisse Unstimmigkeit mit sich bringe, die es – wenn sie nicht ausdrücklich gewünscht ist – zu vermeiden gilt.
Üblicherweise, so Qiao weiter, setze man daher vielfach auf Schriften derselben Familie oder vom selben Designer. Oder aber – und dies ist nun der Ansatz der Website – man betrachtet typografische Eigenschaften wie zum Beispiel die Ober- und Unterlängen von Buchstaben. Das Ziel, basierend auf den angeführten Punkten 1 und 2: Gemeinsamkeiten sollten da sein, aber auch in spezieller Weise ein gewisser Kontrast.
Der Mensch nun kann sich Schriftart für Schriftart hernehmen und in ihren Merkmalen vergleichen, doch ist zu vermuten, dass dieser Ansatz spätestens ab Schriftart Nummer 10 sehr gedankenreich ausfallen könnte. Insofern steht auch hinter Fontjoy wieder die Maschine, die die Schriftarten selbstständig „betrachtet“, um sie dann in Beziehung zueinander zu setzen.
Das funktioniert in etwa so: Man stelle sich ein Diagramm vor. Auf der X-Achse werden die Buchstaben von links nach rechts in ihrer Schriftstärke immer dünner, auf der Y-Achse geraten sie von oben nach unten zunehmend in Schräglage.
Das Ergebnis: Oben links im Diagramm steht ein fetter Buchstabe kerzengerade, unten rechts ein hauchzarter Buchstabe kurz vor dem Umkippen. Das sind dann jene Schriftarten mit dem höchsten Kontrast – je weiter weg, um so unähnlicher sind sie, was schon einmal ein erster Ansatzpunkt für die zu treffende Auswahl sein kann.
Doch – man erinnere sich – eine gewisse Ähnlichkeit sollte auch vorhanden sein. Insofern meint Qiao: Jene Buchstaben, die auf einer Zeile des Diagramms oder einer Spalte des Diagramms weit voneinander entfernt liegen, seien besser geeignet als der fette, kerzengerade und der hauchzarte, windschiefe. In einer der beiden Eigenschaften (Schriftstärke, Schräglage) sollte Übereinstimmung vorherrschen.
Nun gibt es natürlich nicht nur diese beiden Merkmale, sondern zahlreiche weitere. Auf einer Z-Achse des Diagramms könnte man zum Beispiel noch den Hang einer Schriftart zur Serife hinzufügen (oben starke Serifen-Ausprägung, unten keine) – macht ein Diagramm in 3D (hier interaktiv visualisiert).
Schließlich lassen sich noch weitere Eigenschaften in das mathematische Modell implementieren, sodass eine 4D-, 5D- oder 6D-Karte entsteht, die für den Menschen zwar nicht mehr dargestellt werden kann, aber mithilfe von Algorithmen durchaus noch erfassbar ist.
Das Grundprinzip der Website bleibt am Ende jedoch genau so, wie es mit dem zweidimensionalen X-Y-Diagramm beschrieben wurde: Je näher eine Schriftart der anderen, umso ähnlicher sind sie sich, und umgekehrt. Mithilfe des Kontrast-Schiebereglers auf der Website bestimmt man also, wie nah eine Schriftart an der anderen liegen soll, wie ähnlich sie sich sein dürfen. Weitere Informationen zum Projekt findet ihr auch auf GitHub.
Lange Ausführungen – kurzer Sinn: Probiert es aus.
Euer Jens
Bildquelle Vorschau und Titel: Screenshot Fontjoy
