Schriftkombinationen für Websites: Schriften erfolgreich kombinieren

Stellen Sie sich zwei Cafés in derselben Straße vor. Eines hat ein handgemaltes Schild in einer warmen, abgerundeten Schrift und eine übersichtliche Speisekarte, die Sie quer durch den Raum lesen können. Das andere quetscht fünf verschiedene Schriftarten auf eine Tafel, jede übertönt die letzte, und Sie können die Preise nicht von den Spezialitäten unterscheiden. Sie haben noch kein einziges Getränk probiert, aber Sie vertrauen dem einen Ort bereits mehr als dem anderen. Dieser Instinkt ist Typografie in Aktion, und auf einer Website geschieht dies genauso schnell.

Schriftarten-Paarung ist die stillschweigend mächtige Fähigkeit, zwei, oder höchstens drei, Schriftarten auszuwählen, die zusammenwirken, um einer Website ein klares, durchdachtes und vertrauenswürdiges Gefühl zu verleihen. Gut gemacht, merkt es niemand. Schlecht gemacht, lässt es selbst gute Inhalte amateurhaft wirken. Dieser Leitfaden erklärt, wie man Schriftarten ohne Designhintergrund paart: wie man Kontrast erzeugt, Hierarchie aufbaut, die Lesbarkeit erhält und die gängigen Fallstricke vermeidet, die eine Website wie eine Lösegeldforderung aussehen lassen. Am Ende werden Sie in der Lage sein, zwei Schriftarten anzusehen und zu spüren, ob sie zusammengehören.

Warum zwei Schriftarten besser sind als eine und fünf besser als nichts

Eine einzelne Schriftart kann eine ganze Website tragen, und für einfache Projekte ist das eine völlig gute Wahl. Aber eine durchdachte Paarung bietet Ihnen etwas, was eine einzelne Schriftart nicht kann: Kontrast. Eine Schriftart für Überschriften und eine andere für den Fließtext erzeugt ein natürliches Gefühl von Struktur, das dem Auge hilft zu verstehen, was ein Titel und was ein Absatz ist, bevor ein Wort gelesen wird. Die beiden Schriftarten teilen sich die Arbeit, und die Seite wirkt organisiert.

Die Gefahr liegt am anderen Ende. Sobald Sie vier oder fünf Schriftarten erreichen, verliert die Seite ihren Schwerpunkt und beginnt chaotisch und nicht vertrauenswürdig zu wirken. Der „Sweet Spot“ für die meisten Websites sind zwei, manchmal drei. Diese Zurückhaltung ist Teil derselben Disziplin, die Weißraum so effektiv macht: Weniger, gut arrangiert, wirkt als Selbstvertrauen.

Die geheime Zutat ist Kontrast

Gute Paarungen basieren auf Unterschieden. Wenn zwei Schriftarten zu ähnlich sind, spürt das Auge, dass etwas nicht ganz stimmt, ohne zu wissen warum, wie zwei Farbtöne derselben Farbe, die fast übereinstimmen. Wenn sie sich deutlich unterscheiden, wirkt die Paarung absichtlich. Der zuverlässigste Weg, diesen Unterschied zu erzeugen, ist die Kombination einer Serifenschrift und einer serifenlosen Schrift. Eine Serifenschrift hat kleine Füßchen an den Enden ihrer Striche und wirkt traditionell oder redaktionell. Eine serifenlose Schrift hat keine und wirkt sauber und modern. Platzieren Sie die eine als Überschrift und die andere als Textkörper, und Sie erhalten sofort einen angenehmen Kontrast.

Sie können auch innerhalb einer einzigen Schriftfamilie Kontrast erzeugen, indem Sie sehr unterschiedliche Schriftstärken verwenden, z. B. eine fette Überschrift und einen leichten Textkörper. Dies ist die sicherste Paarung überhaupt, da die beiden immer harmonieren werden, da sie zusammen entworfen wurden. Wenn Sie Bedenken beim Mischen haben, ist eine einzelne vielseitige Familie, die in verschiedenen Schriftstärken verwendet wird, ein narrensicherer Ausgangspunkt.

Passen Sie die Stimmung an, nicht nur die Formen

Kontrast sorgt für die richtige Struktur, aber die Stimmung für die richtige Persönlichkeit. Eine verspielte Marke und eine strenge, formelle Serifenschrift werden sich widersprechen, egal wie technisch korrekt die Paarung ist. Überlegen Sie, wie sich Ihre Marke anfühlen soll, und wählen Sie eine Schriftart, die dieses Gefühl vermittelt. Hier verbinden sich Entscheidungen auf Website-Ebene mit dem größeren Bild bei der Auswahl von Schriftarten und Farben und dem markenweiten Denken bei der Markentypografie.

Erstellen Sie eine Hierarchie mit Ihrer Paarung

Sobald Sie zwei Schriftarten haben, besteht die nächste Aufgabe darin, sie zu verwenden, um das Auge zu führen. Überschriften sollten offensichtlich größer und fetter sein als der Fließtext, Unterüberschriften liegen deutlich dazwischen, und der Fließtext bleibt angenehm lesbar. Diese Größenabstufung verwandelt eine Wand aus Wörtern in eine scanbare Seite. Ein Leser sollte in der Lage sein, eine Seite zu überblicken und ihre Struktur zu verstehen, ohne einen einzigen Satz zu lesen.

Widerstehen Sie dem Drang, alles groß und fett zu machen, um wichtig zu wirken, denn wenn alles schreit, wird nichts gehört. Die Kunst liegt in den Abständen zwischen den Größen. Dies ist dasselbe Prinzip, das die visuelle Hierarchie auf einer Seite antreibt, speziell auf die Schriftart angewendet.

Lesbarkeit geht vor Cleverness

Eine Paarung kann schön sein und dennoch scheitern, wenn die Leute Schwierigkeiten haben, sie zu lesen. Der Fließtext ist der Ort, an dem die meiste Lektüre stattfindet, daher sollte er eine Schriftart sein, die für Komfort bei kleinen Größen entwickelt wurde, mit klaren, offenen Buchstabenformen. Bewahren Sie die charaktervollen, dekorativen Schriftarten für Überschriften auf, wo sie kurz erscheinen und Persönlichkeit verleihen, ohne den Leser zu ermüden.

Achten Sie auch auf die Zeilenlänge und den Zeilenabstand. Zu breite Zeilen sind schwer zu verfolgen, und zu eng gedrängter Text ist anstrengend. Ein großzügiger Zeilenabstand und ein vernünftiges Maß lassen selbst eine schlichte Schrift angenehm wirken. Diese kleinen Einstellungen sind oft wichtiger als die Wahl der Schriftart selbst, und sie hängen direkt mit den Grundlagen der Barrierefreiheit zusammen, da lesbare Schrift allen dient, einschließlich Menschen mit Sehschwäche.

Vergessen Sie nicht die Leistung

Jede Schriftart, die Sie hinzufügen, ist eine Datei, die der Browser herunterladen muss, bevor er Ihren Text richtig anzeigen kann. Zu viele Schriftarten und Schriftschnitte verlangsamen die Website, was Besucher frustriert und Ihrem Ranking in Suchmaschinen schadet. Dies ist ein praktischer Grund, Ihre Paarung schlank zu halten: zwei Schriftarten in den Schriftschnitten, die Sie tatsächlich verwenden, anstatt einer weitläufigen Sammlung, die Sie vorsorglich geladen haben.

Wählen Sie Schriftarten, die gut gebaut und weit verbreitet sind, damit sie zuverlässig auf verschiedenen Geräten geladen werden. Eine Paarung, die umwerfend aussieht, aber eine Sekunde zu spät ankommt und Besucher auf einen leeren Bereich starren lässt, ist ein schlechter Tausch. Typografie als Teil der Gesamtleistung zu betrachten, ist genau die Denkweise hinter einer professionell aussehenden Website, die sich schnell und elegant anfühlt.

Wo man gut harmonierende Schriftarten findet

Sie müssen keine teuren Schriftarten kaufen, um eine schöne Paarung zu erstellen. Es gibt große, gut gepflegte Bibliotheken mit kostenlosen, professionell erstellten Schriftarten, die für die Verwendung im Web entwickelt wurden und schnell geladen werden. Dort anzufangen, beseitigt viele Risiken, da diese Schriftarten auf verschiedenen Geräten getestet wurden und die benötigten Schriftschnitte für eine ordnungsgemäße Hierarchie bieten. Viele dieser Bibliotheken schlagen sogar Paarungen vor, was Ihnen eine sinnvolle Auswahlliste anstelle einer leeren Seite gibt.

Achten Sie bei der Auswahl auf eine Familie, die mehrere Schriftschnitte sowie normale und kursive Stile enthält, da eine Schriftart, die nur in einem Schriftschnitt erhältlich ist, schnell Ihre Möglichkeiten einschränkt. Überprüfen Sie, ob sie die Zeichen und Sprachen unterstützt, die Ihr Publikum benötigt, insbesondere wenn Sie Leser auf der ganzen Welt bedienen. Eine Schriftart, die schön aussieht, aber ein akzentuiertes Zeichen oder ein Währungssymbol vermissen lässt, das Ihre Besucher erwarten, wird Sie im schlimmsten Moment im Stich lassen, daher erspart ein schneller Check jetzt eine umständliche Korrektur später.

Testen Sie Ihre Paarung in der realen Welt

Schriftarten verhalten sich in der freien Wildbahn anders als in einem sauberen Design-Mockup. Bevor Sie sich festlegen, sehen Sie sich Ihre Paarung auf einer echten Seite, auf einem Telefon und einem größeren Bildschirm an, mit Ihrem tatsächlichen Inhalt anstelle von Platzhaltertext. Lange Wörter, Zahlen und Sonderzeichen können Schwächen aufdecken, die ein kurzes Demo verbirgt. Betrachten Sie sie sowohl bei hellen als auch bei gedämpften Lichtverhältnissen, und wenn Sie ein dunkleres Aussehen unterstützen, überprüfen Sie es auch dort, wie in Dark Mode Websites beschrieben.

Im Zweifelsfall vereinfachen

Wenn eine Paarung nicht funktioniert und Sie nicht wissen, warum, besteht die Antwort normalerweise darin, etwas zu entfernen, anstatt hinzuzufügen. Beschränken Sie sich auf eine Familie und zwei Schriftstärken, richten Sie die Hierarchie und den Abstand richtig ein und erst dann ziehen Sie eine zweite Schriftart für den Kontrast in Betracht. Zurückhaltung wird fast immer als Vertrauen wahrgenommen, und sie sorgt dafür, dass Ihre Website konsistent bleibt, wenn sie wächst, was wichtig ist, wenn Sie über die Zukunftssicherheit Ihrer Website nachdenken. Wenn Sie eine zweite Meinung zu Ihrer Schrift wünschen, können Sie uns jederzeit kontaktieren.

Häufig gestellte Fragen

Referenzen

1. Nielsen Norman Group. "Typography and Readability." nngroup.com.
2. Google Fonts. "Knowledge: Choosing Type." fonts.google.com.
3. W3C. "Web Content Accessibility Guidelines (WCAG)." w3.org.