Mini-Tutorial – Ein Leitfaden für Schriftkombinationen

„Typografie ist zweidimensionale Architektur, die auf Erfahrung und Vorstellungskraft basiert und sich an Regeln und Lesbarkeit orientiert.“ – Hermann Zapf

Noch vor wenigen Jahren waren Designer bei der Auswahl von Webfonts stark eingeschränkt. Die Optionen waren im Allgemeinen auf Systemschriftarten beschränkt und hofften, dass die Besucher der Website diese Schriftarten installiert hatten.

Obwohl Webfonts Ende der 90er Jahre technisch möglich waren, wurden sie erst 2009 weit verbreitet, als das WOFF-Format verfügbar und Teil der offenen Standards des W3C wurde. Das eröffnete Designern eine völlig neue Welt typografischer Möglichkeiten.

Und darin liegt das Dilemma: Jetzt, da es buchstäblich Tausende von Schriftarten für Webdesigner gibt, wie schafft man es, Schriftkombinationen zu erstellen, die gut zusammenpassen und den präsentierten Inhalt unterstützen?

Gute Typografie und die Verwendung der besten Schriftkombinationen heben ein Design von seinen Mitbewerbern ab und schaffen eine angenehmere Benutzererfahrung. Effektive Schriftkombinationen verleihen einem Design visuelles Interesse, das einen Besucher länger auf der Seite halten kann.

Im Gegensatz dazu kann eine schlechte Schrift Inhalte schwerer lesbar und für die Person, die sie liest, weniger angenehm machen.

Das Erlernen der effektiven Kombination von Schriftarten ist ein wichtiger Schritt in der Ausbildung eines Designers, der kontinuierlich verfeinert und verbessert werden sollte. Designer, die Typografie beherrschen, können selbst das einfachste Design effektiver gestalten. Das Befolgen grundlegender typografischer Richtlinien zum Kombinieren von Schriftarten ist der beste Ausgangspunkt. Sobald diese „Regeln“ gemeistert sind, können Designer sich verzweigen und experimentieren, um typografische Kombinationen zu erstellen, die diese Regeln beugen oder brechen.

Typeigenschaften

Bei Hunderttausenden verfügbaren Schriftarten kann der Versuch, herauszufinden, wo man anfangen soll, selbst für fortgeschrittene Designer überwältigend sein. Das Verständnis der Eigenschaften verschiedener Schriftarten ist der erste Schritt, um zu lernen, wie man sie effektiv kombiniert.

Zu lernen, wie diese Eigenschaften zueinander in Beziehung stehen, ermöglicht es Designern, Schriftarten sicher zu kombinieren und mit unerwarteten Kombinationen zu experimentieren. Durch Experimentieren und Üben können Designer ihre Schriftkombinationsfähigkeiten wirklich verbessern und Designs erstellen, die sie von anderen Experten abheben. Manchmal ist es am besten, auf ihre Intuition zu hören, um eine Schriftpaarung zu erstellen, die wirklich glänzt.

Einstufung

Die Klassifizierung von Schriftarten ist eines der grundlegendsten Konzepte, die es zu verstehen gilt. Es gibt vier primäre Klassifikationen zu lernen: Serif, serifenlos, Schrift und dekorativ.

Serifen- und Sans-Serif-Schriften eignen sich sowohl für Überschriften als auch für Fließtext. Schreibschriften (manchmal auch als Handschriften bezeichnet) und dekorative Schriftarten sind jedoch im Allgemeinen nur für Überschriften und Titel oder andere kleine Textabschnitte akzeptabel.

Schriftarten mit Serifen gelten für lange Textabschnitte (z. B. Fließtext) als besser lesbar, insbesondere bei Druckdesigns, bei denen die Serifenfunktion dazu beitragen kann, das Auge des Lesers entlang jeder Zeile zu lenken. Aber serifenlose Schriften können auch sehr gut lesbar sein und sich in kleineren Schriftgrößen auszeichnen (z. B. solche, die für Bildunterschriften oder Metainformationen verwendet werden).

Sans Serifs sind auch beliebter für die Verwendung im Internet und gelten allgemein als besser lesbar als Serifenschriften. Ein Teil davon stammt aus den frühen Tagen der Computer, als Bildschirme mit niedrigerer Auflösung Serifenschriften je nach Größe etwas verschwommen machten. Bei modernen HD- und Retina-Bildschirmen ist dies weniger ein Problem, und sowohl Serifen- als auch Sans-Serifen-Schriften können effektiv verwendet werden.

Das Kombinieren von Schriftarten aus verschiedenen Klassifikationen ist oft einfacher als das Kombinieren innerhalb von Klassifikationen, da es einen gewissen Kontrast zwischen bereits integrierten Schriftarten gibt. Allerdings ist es auch möglich, Schriften derselben Klasse effektiv zu kombinieren, solange andere Eigenschaften berücksichtigt werden.

Gewicht

Gewicht bezieht sich auf die Dicke einer Schriftart innerhalb einer Schriftart. Thin, Regular, Semibold, Bold und Black sind Beispiele für Strichstärken.

Beim Kombinieren von Schriftarten ist der Kontrast zwischen den Strichstärken von entscheidender Bedeutung. Die Kombination einer sehr dicken Schrift mit einer sehr hellen wirkt oft unausgewogen. Das Kombinieren von Schriftarten mit demselben Gewicht kann jedoch auch eine Herausforderung sein.

Stattdessen ist es, besonders wenn Sie mit Schriftkombinationen beginnen, am einfachsten, Schriften zu finden, die deutliche, aber nicht extreme Unterschiede in der Gewichtung aufweisen. Designer können sich von dort aus in prominentere Unterscheidungen verzweigen.

Stil

Während Stil manchmal synonym mit Klassifikation verwendet wird, bezieht er sich in diesem Fall auf eine Schriftart, die entweder normal , italic oder oblique ist.

Beim Kombinieren von Schriftarten, bei denen unterschiedliche Stile verwendet werden, ist es wichtig sicherzustellen, dass die kursiven oder schrägen Stile genauso gut zusammenpassen wie der normale Stil. Manchmal unterscheiden sich kursive Stile stark vom normalen Stil derselben Schriftart, was dazu führen kann, dass Schriftarten, die ansonsten gut zusammenpassen würden, plötzlich kollidieren.

Kontrast

Der Kontrast beim Kombinieren von Schriftarten kann schwierig sein. Zu wenig Kontrast kann dazu führen, dass Schriftarten kollidieren, während zu viel Kontrast dasselbe bewirken kann.

Kontrast beim Kombinieren von Schriftarten bezieht sich auf alle Arten, in denen sich die Schriftarten unterscheiden, einschließlich Klassifizierung, Gewicht, Stil und Struktur.

Am Anfang ist es am besten, sich auf den Kontrast zwischen nur einem oder zwei dieser Dinge zu konzentrieren und sicherzustellen, dass die anderen sehr ähnlich sind. Gewicht ist eine der einfachsten Methoden, um Kontraste zwischen Schriften zu erzeugen. Wie bereits erwähnt, kann zu viel Gewichtskontrast genauso störend sein wie zu wenig.

Eine weitere einfache Möglichkeit, Kontraste zu erzeugen, besteht darin, verschiedene Klassifikationen von Schriftarten zu kombinieren, z. B. Sans Serif und Serif oder Script und Serif usw. In diesen Fällen ist es wichtig, darauf zu achten, dass die Stimmung der beiden Schriftarten übereinstimmt.

Wenn Sie beispielsweise eine lässigere Schriftart wie Amatic SC mit einer sehr formellen Schriftart wie Baskerville kombinieren, wird dies eher kollidieren als kontrastieren. Aber die Kombination von etwas wie Amatic SC mit einer anderen lässigen Schriftart wie Josefin Slab funktioniert wunderbar.

X-Höhe

Die X-Höhe bezieht sich auf die Höhe einzelner Zeichen innerhalb einer Schriftart, insbesondere auf den Kleinbuchstaben x . Schriftarten mit ähnlichen x-Höhen funktionieren besser zusammen als solche mit unterschiedlichen x-Höhen.

Struktur

Die grundlegende Struktur einer Schrift umfasst alle ihre Eigenschaften sowie Dinge wie die Grundform der Zeichen und ihre Abstände. Das Kontrastieren mit der Struktur von Schriften ist eine etablierte Methode zum Kombinieren von Schriften. Aber es ist eine gute Idee, Schriftarten zu wählen, die zumindest einige strukturelle Elemente gemeinsam haben (wie die x-Höhe oder die Breite des „normalen“ Stils), anstatt solche, die sich stark voneinander unterscheiden.

Stimmung

Stimmung ist einer der eher subjektiven Bereiche der Typografie. Es bezieht sich darauf, wie formell oder informell eine Schrift ist und ob sie verspielt, feminin, maskulin, lässig, ernst usw. ist.

Beispielsweise ist Comic Sans eine äußerst informelle Schriftart, die für die Verwendung in den meisten Situationen ungeeignet ist. Bickham Script hingegen ist sehr förmlich, vermittelt aber bei Dingen wie Geschäftskorrespondenz einen falschen Eindruck.

Beim Kombinieren von Schriftarten ist es wichtig, Schriftarten mit ähnlichen Stimmungen zu finden. Die Kombination einer verspielten Schriftart mit einer sehr ernsthaften wird das Auge erschüttern.

Dekoration, Farbe und Textur

Diese Dinge sind keine inhärenten Eigenschaften von Schriftarten, aber sie sind nützlich, wenn Sie Schriftarten kombinieren. Die Vereinheitlichung (oder Schaffung von mehr Kontrast) durch Farbe, Dekoration (z. B. Unterstreichen) und Textur kann eine sehr effektive Technik sein.

Effektive Schriftkombinationen

Es gibt ein scheinbar endloses Angebot an Websites mit schöner Typografie, zusammen mit einem ebenso endlosen Angebot an Websites mit schlechten oder einfach nur glanzlosen Schriften. Das Studieren von Websites, die es richtig machen, ist eine großartige Möglichkeit, um zu lernen, wie man Schriften kombiniert, wenn Designer anfangen oder versuchen, ihre Fähigkeiten auf die nächste Stufe zu bringen.

Work Notes kombiniert die Serifenschrift Adobe Caslon Pro mit der serifenlosen Interstate, um eine Schriftkombination zu schaffen, die einen Bezug zur Tradition hat, ohne altbacken oder altmodisch zu wirken. Die Kombination verschiedener Gewichte und Stile fügt zusätzliches visuelles Interesse hinzu und lässt die Typografie komplexer erscheinen, als sie tatsächlich ist.

Adjuvant Capital verwendet die moderne, leicht skurrile Serifenschrift Orpheus Pro in Kombination mit der modernen serifenlosen Schrift GT America. Für ein Finanzdienstleistungsunternehmen ist dies eine sehr moderne Wahl, passt aber gut zu ihrer Mission des sozial verantwortlichen globalen Investierens.

Bloomscape verwendet die lässige Serifenschrift Morion zusammen mit der serifenlosen Raisonne, um ein auffälliges, modernes typografisches Design zu schaffen. Morion wäre aufgrund seiner dekorativeren Buchstabenformen nicht unbedingt eine naheliegende Wahl für Körpertypen, aber wenn es in einer angemessenen Größe verwendet wird (wie hier), eignet es sich hervorragend für kürzere Abschnitte von Fließtext. Raisonne hat ähnlich dekorative Buchstabenformen, wodurch die beiden Webfonts wunderbar zusammenarbeiten.

Vogue verwendet die moderne, elegante Serifenschrift Savoy gepaart mit der grotesken serifenlosen Franklin Gothic, die ursprünglich 1902 entworfen wurde. Die Kombination der beiden schafft ein gehobenes Schriftdesign, das das kultivierte Publikum anspricht, auf das sich das Magazin konzentriert.

Das südliche Lifestyle-Magazin Garden & Gun hat auf seiner Website eine komplexere Typografie als die anderen hier enthaltenen, was es wirklich von anderen abhebt. Die Website verwendet durchgehend vier Hauptschriften: Die Titel der Hauptartikel sind die Serifen Domaine Display; Fließtext und einige Überschriften auf der Startseite sind die Serifenschrift Domaine Text; Metainformationen, Navigation und Abschnittsüberschriften verwenden die serifenlose Avenir Next; und zusätzliche Abschnittsüberschriften auf der Homepage sind in Domaine Sans Display.

Die Verwendung mehrerer Schriftarten aus einer größeren Schriftfamilie ist eine bewährte Methode, um ein komplexes Typografie-Design zu erstellen, das perfekt aufeinander abgestimmt ist. Das Hinzufügen von Avenir Next bricht die Dinge auf und fügt zusätzliches visuelles Interesse hinzu.

Die Wahl der Schriftart ist genauso wichtig wie das, was Sie damit machen.

– Bonnie Siegler

Fazit

Wirkungsvolle Schriftkombinationen sind ein Markenzeichen für gutes Design. Designer müssen diese Fähigkeit beherrschen, wenn sie außergewöhnliche Designs schaffen wollen, die sie von ihren Zeitgenossen abheben.

Betrachten Sie die hier enthaltenen Richtlinien als Ausgangspunkt, um herauszufinden, wie Sie Schriften effektiv kombinieren können. Ein solides Fundament ermöglicht effizienteres Experimentieren, ohne Stunden mit völlig ungeeigneten Kombinationen zu verbringen. Von hier aus können Designer üben, ihren eigenen Stil und ihre eigenen Methoden zum effektiven Kombinieren von Schriftarten zu entwickeln und bei Bedarf von den Richtlinien abzuweichen, mit größerer Zuversicht, dass ihr Endprodukt die Benutzer begeistern wird.

Weiterführende Literatur im Toptal Design Blog:

• Designing for Readability – A Guide to Web Typography (mit Infografik)
• Die Nuancen der Schriftklassifizierung verstehen
• Analyse der Feinheiten der typografischen Anatomie (mit Infografik)
• So strukturieren Sie eine effektive typografische Hierarchie
• Schriftstile für Web- und Printdesign