Anzeige
News

Schriftarten visuell ansprechend kombinieren – diese Website hilft dabei

Schriftarten visuell ansprechend kombinieren – diese Website hilft dabei
Fontjoy setzt Schriftarten per Maschinenlernen in Beziehung zueinander

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 Kevin Ho mit seiner Font Map 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

Was sagst du dazu?

Teile deine Meinung oder Erfahrung mit anderen Mitgliedern und sichere dir jeweils 5 Punkte!

Weiter zu den Kommentaren

Ähnliche Artikel

Adobe LIVE im Livestream: 16.–18. April, täglich von 10–18 Uhr

Adobe LIVE im Livestream: 16.–18. April, täglich von 10–18 Uhr

Es ist wieder so weit: Adobe LIVE lädt euch an gleich drei Tagen zu einem spannenden und vielseitigen Livestream! Bild und Buch, Licht...

Weiterlesen

Kreativ-Contest: Setzt ein Statement und gewinnt einen Tag mit DXTR The Weird in Berlin

Kreativ-Contest: Setzt ein Statement und gewinnt einen Tag mit DXTR The Weird in Berlin

Ladet euch eine PSD-Datei runter, bearbeitet sie und gewinnt mit eurem eigenen Style einen überaus kreativen Tagesausflug nach...

Weiterlesen

Berlinale Talents 2019: Special bei Adobe Live – 11. Februar!

Berlinale Talents 2019: Special bei Adobe Live – 11. Februar!

Aufgehorcht und aufgepasst! In Berlin findet die „Berlinale Talents“ statt und ihr seid mit Adobe Live mittendrin. Die...

Weiterlesen

Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Portrait von webmaus
  • 06.08.2017 - 21:15

Interessantes Thema, interessanter Artikel, danke für die ausführliche Beschreibung.

Portrait von lichtwerker
  • 29.06.2017 - 08:53

Danke für den Link und die Erklärungen.

Portrait von 01er
  • 26.06.2017 - 08:50

Leider nur Google-Fonts!

Portrait von sven67
  • 25.06.2017 - 15:37

Danke für diesen sehr interessanten Hinweis.

Portrait von MARIA52
  • 25.06.2017 - 09:05

Sehr interessante Seite - danke für's Teilen.

Portrait von Dobi78
  • 24.06.2017 - 10:30

Durchaus interessant. Ich bevorzuge dennoch lieber: https://www.mixfont.com

Portrait von shivaZ
  • 23.06.2017 - 19:42

... sehr interessante Sache mit etlichem an Background. Danke fürs Teilen!

x
×
×