Typografie für Marken: Die Wahl der richtigen Schriftarten

Jazmie Jamaludin

Typografie ist die sichtbare Stimme Ihrer Marke. Jedes Mal, wenn jemand Ihre Überschrift liest, Ihre Preise scannt oder Ihre Geschäftsbedingungen durchgeht, erlebt er Ihre Marke durch die Formen der Buchstaben. Diese Formen tragen eine eigene Stimmung und Bedeutung. Eine geometrische Sans kann modern und effizient wirken; eine humanistische Serif kann etabliert und warm wirken; eine ausgefallene Display-Schrift kann verspielt oder, wenn unachtsam verwendet, unprofessionell wirken. Die Wahl der richtigen Schriftarten ist daher eine der wichtigsten Entscheidungen im Branding, auch wenn ihr oft weniger Aufmerksamkeit geschenkt wird als der Farbe oder dem Logo.

Gute Typografie erfüllt zwei Aufgaben gleichzeitig. Sie drückt Persönlichkeit aus und lässt Ihre Marke authentisch wirken, und sie dient der Lesbarkeit, indem sie sicherstellt, dass die Menschen Ihre Worte mühelos aufnehmen können. Die Herausforderung besteht darin, dass diese Ziele in unterschiedliche Richtungen gehen können. Eine charaktervolle Schrift, die ein Logo einprägsam macht, kann in einem Absatz anstrengend zu lesen sein. Dieser Leitfaden zeigt, wie Sie Ausdruck und Funktion in Einklang bringen, eine klare Hierarchie aufbauen und Schriftarten so kombinieren, dass Ihre Marke überall, wo sie erscheint, schön lesbar ist.

Was Typografie kommuniziert

Bevor Sie eine Schriftart wählen, ist es hilfreich zu verstehen, was Schriftarten für sich genommen aussagen. Grob gesagt, wirken Serifenschriften mit ihren kleinen Abschlussstrichen eher traditionell, autoritär und redaktionell. Serifenlose Schriftarten wirken sauberer, moderner und oft neutraler, weshalb so viele Technologieunternehmen sie bevorzugen. Jenseits dieser Familien gibt es unzählige Variationen in Stärke, Breite und Detail, die das Gefühl jeweils in eine bestimmte Richtung lenken.

Das Ziel ist eine Übereinstimmung zwischen dem Gefühl, das Ihre Marke vermitteln möchte, und dem Gefühl, das Ihre Schriftart erzeugt. Eine Anwaltskanzlei, die Tradition vermittelt, und eine Kinder-App, die Spaß vermittelt, sollten fast nie die gleiche Schriftart wählen. Wenn Sie eine Schriftart finden, deren Persönlichkeit zu der Ihrer Marke passt, beginnen die Worte härter zu arbeiten und Ihre Positionierung zu verstärken, bevor jemand es bewusst bemerkt hat.

Der größte Teil des Webs ist Text
Die überwiegende Mehrheit der Online-Informationen ist geschrieben, was Schrift zu einem der am meisten erfahrenen Teile jeder Marke macht.
Quelle: Smashing Magazine

Lesbarkeit kommt zuerst

Egal wie viel Persönlichkeit eine Schriftart trägt, sie muss in den Kontexten, in denen sie den größten Teil ihrer Arbeit verrichtet, lesbar bleiben. Die Lesbarkeit wird von mehr als nur der Schriftart selbst beeinflusst. Leicht unterscheidbare Buchstabenformen, angenehme Zeilenlängen, großzügiger Zeilenabstand und ausreichende Größe tragen alle dazu bei. Eine Schriftart, die in einer riesigen Überschrift auffallend aussieht, kann in Körpergröße zu einer anstrengenden Wand werden, daher ist der entscheidende Test, wie sich ein Absatz anfühlt, nicht wie ein einzelnes Wort aussieht.

Deshalb wählen viele Marken eine ausdrucksstärkere Schrift für Überschriften und eine ruhigere, sehr gut lesbare Schrift für den Fließtext. Die Überschriftenschrift verkündet den Charakter der Marke; die Fließtextschrift tritt in den Hintergrund und lässt die Leute lesen. Diese Arbeitsteilung zu respektieren, ist eine der einfachsten Möglichkeiten, Typografie sowohl unverwechselbar als auch angenehm zu gestalten.

Die Details, die Text angenehm machen

Eine Handvoll unglamouröser Einstellungen leistet den größten Teil der Arbeit, um Fließtext angenehm zu gestalten. Die Zeilenlänge ist die erste: Zeilen, die zu breit laufen, ermüden das Auge, wenn es zum Anfang zurückkehrt, während zu schmale Zeilen den Lesefluss unterbrechen. Ein angenehmes Maß wird oft mit etwa fünfzig bis fünfundsiebzig Zeichen pro Zeile angegeben. Der Zeilenabstand ist der zweite: Fließtext liest sich in der Regel am besten mit einem Zeilenabstand von etwa dem Eineinhalbfachen der Schriftgröße, was jeder Zeile Raum zum Atmen gibt. Der dritte ist Kontrast und Größe, um sicherzustellen, dass der Text groß genug und dunkel genug vor seinem Hintergrund ist, um mühelos gelesen werden zu können. Keine dieser Entscheidungen kündigt sich an, aber zusammen entscheiden sie, ob eine Seite mühelos oder leise ermüdend wirkt.

Aufbau einer Typografie-Hierarchie

Eine Hierarchie ist das System, das Lesern sagt, was am wichtigsten ist, und ihr Auge durch die Seite führt. Sie wird durch Unterschiede in Größe, Stärke, Farbe und Abstand erzeugt. Eine starke Hierarchie ermöglicht es jemandem, eine Seite in Sekunden zu überblicken und ihre Struktur zu erfassen, während eine schwache alles gleich wichtig erscheinen lässt, das heißt, gleichermaßen ignorierbar.

Eine einfache Typografie-Hierarchie
Ebene Rolle
Display / H1 Größte, gibt den Ton an und erregt Aufmerksamkeit
Überschriften Teilen Inhalte in scanbare Abschnitte
Fließtext Das Arbeitspferd für angenehmes Lesen
Bildunterschrift / klein Beschriftungen, Fußnoten und unterstützende Details

Definieren Sie eine Schriftskala, eine Reihe fester Größen und Zeilenhöhen für jede Ebene, und wenden Sie sie konsistent an. Dies sieht nicht nur professioneller aus, sondern eliminiert auch unzählige kleine Entscheidungen, da ein Designer nicht mehr spontan eine Überschriftengröße erfinden muss. Die Dokumentation der Skala in Ihrem Brand Style Guide sorgt dafür, dass jedes Layout, von jedem Mitwirkenden, wie ein Teil derselben Familie wirkt.

Eine Skala mit einem Verhältnis aufbauen

Sie müssen Überschriftengrößen nicht nach Gefühl auswählen. Eine gängige Technik ist die Wahl einer Basisgröße für den Fließtext und deren Multiplikation mit einem konsistenten Verhältnis, um jede größere Stufe zu erzeugen, sodass die Sprünge zwischen den Ebenen eher zusammenhängend als willkürlich wirken. Ein bescheidenes Verhältnis erzeugt eine ruhige, eng gestaffelte Hierarchie, die sich für dichte, informationsreiche Seiten eignet, während ein größeres Verhältnis einen dramatischen Kontrast erzeugt, der sich für mutige Marketingseiten eignet. Das folgende Beispiel zeigt eine einzelne Skala, die auf einer Basis von sechzehn Pixeln und einem Verhältnis von etwa 1,25 aufgebaut ist, eine Art zurückhaltender Progression, die sich sowohl in Artikeln als auch in Benutzeroberflächen gut liest.

Eine Beispiel-Typografie-Skala basierend auf 16px
Ebene Ungefähre Größe
Display / H1 39px, geringe Zeilenhöhe
H2 31px
H3 25px
Fließtext 16px, Zeilenhöhe ca. 1.5
Bildunterschrift 13px

Schriftarten kombinieren ohne zu kollidieren

Die Kombination von Schriftarten ist teils Handwerk, teils Zurückhaltung. Der sicherste Ansatz ist, sich auf zwei Schriftarten zu beschränken, eine für Überschriften und eine für den Fließtext, gelegentlich eine dritte für einen sehr spezifischen Zweck hinzuzufügen. Darüber hinaus wirken Seiten oft chaotisch. Die Kunst liegt darin, Schriftarten zu wählen, die unterschiedlich genug sind, um Kontrast zu erzeugen, aber harmonisch genug, um zusammenzugehören.

Funktionierende Strategien

Eine bewährte Strategie ist es, eine Serifenschrift mit einer serifenlosen Schrift zu kombinieren, wobei ihr Kontrast die Arbeit übernimmt und ihre unterschiedlichen Rollen verhindern, dass sie miteinander konkurrieren. Eine andere Möglichkeit ist die Verwendung einer einzigen, gut aufgebauten Schriftfamilie, die viele Schriftschnitte und Breiten umfasst, wodurch die gesamte Hierarchie aus einer Quelle stammt und Harmonie garantiert ist. Welchen Weg Sie auch wählen, suchen Sie nach Schriftarten, die eine ähnliche Ära oder Sensibilität teilen, da eine für Wärme und eine für kalte Präzision entworfene Schrift selten bequeme Partner bilden.

Halten Sie es bei zwei. Die meisten Marken benötigen nur zwei Schriftarten, eine für Überschriften und eine für den Fließtext. Wenn Sie eine dritte verwenden, geben Sie ihr eine klare und begrenzte Aufgabe, anstatt sie das gesamte Design durchstreifen zu lassen.

Ein ausgearbeitetes Beispiel für die Kombination

Angenommen, eine Marke für Finanzbildung möchte sowohl autoritär als auch zugänglich wirken. Autorität deutet auf eine Serifenschrift hin, aber eine Serifenschrift allein kann für ein Publikum, das das Thema einschüchternd findet, steif wirken. Die Lösung ist eine Kombination: eine raffinierte Serifenschrift für Überschriften, die Ernsthaftigkeit und Vertrauen vermittelt, kombiniert mit einer klaren, gut lesbaren Sans-Serif für den Fließtext und die Benutzeroberflächenbeschriftungen, was die Erfahrung leicht und modern hält. Die beiden teilen ein ähnliches Maß an Formalität, sodass sie sich nicht streiten, doch der Wechsel von der Serif-Überschrift zum Sans-Fließtext gibt jedem Abschnitt einen klaren visuellen Einstiegspunkt. Die Marke beschränkt sich dann auf eine Handvoll Schriftschnitte, vielleicht einen normalen und einen fetten von jeder, was das System diszipliniert und die Seiten schnell laden lässt. Die Lehre ist allgemein: Eine gute Kombination besteht weniger darin, zwei schöne Schriftarten zu finden, als vielmehr darin, jeder eine klare Aufgabe zuzuweisen und sicherzustellen, dass sie eine Sensibilität teilen.

Leistung und praktische Aspekte

Eine Schriftart ist nicht nur eine ästhetische Wahl; sie ist auch eine Datei, die geladen werden muss. Benutzerdefinierte Web-Schriftarten können eine Seite verlangsamen, wenn sie unachtsam behandelt werden, und eine langsame Seite kostet Sie Besucher und Konversionen. Wählen Sie Schriftarten, die in effizienten Formaten verfügbar sind, laden Sie nur die Gewichte, die Sie tatsächlich verwenden, und ziehen Sie Systemschriftarten in Betracht, wo Geschwindigkeit oberste Priorität hat. Kostenlose Bibliotheken wie Google Fonts erleichtern es, hochwertige Schriftarten zu finden, die für das Web optimiert sind, was sowohl Ihr Design als auch Ihre Leistung gesund hält. Die Beziehung zwischen Geschwindigkeit, Klarheit und Ergebnissen untersuchen wir in unserem Leitfaden zu was eine Website konvertieren lässt.

Die Lizenzierung ist die andere praktische Falle. Nicht jede Schriftart ist kommerziell frei nutzbar, und die Regeln unterscheiden sich je nach Webeinbettung, App-Nutzung und Druck. Vergewissern Sie sich, dass Ihre Lizenz jede beabsichtigte Verwendung der Schriftart abdeckt, bevor Sie eine Marke darauf aufbauen, damit Sie später nicht zu einer teuren Änderung gezwungen werden. Schrift interagiert eng mit dem Rest Ihres visuellen Systems, wählen Sie sie also zusammen mit Ihrer Palette aus, ein Prozess, der in unserem Leitfaden zur Auswahl von Markenfarben behandelt wird, und überlegen Sie, wie sie sich in der breiteren Erfahrung, die in unserem Leitfaden zum individuellen Webdesign beschrieben wird, darstellen wird. Für das Gesamtbild siehe unseren Leitfaden zu Branding und Design.

Design für viele Bildschirmgrößen

Schrift, die auf einem großen Monitor bequem ist, kann auf einem Telefon beengt oder überdimensioniert wirken, daher sollte das Schriftsystem einer Marke sich anpassen, wenn sich der Bildschirm ändert. Der einfachste Ansatz ist es, die Größe der größten Überschriften auf kleinen Bildschirmen zu reduzieren, wo eine für einen Desktop-Hero eingestellte Anzeigegröße sonst eine schmale Spalte überfordern kann, während der Fließtext überall eine gleichmäßige, lesbare Größe beibehält. Viele Teams verwenden heute fließende Techniken, die es der Schrift ermöglichen, sich reibungslos zwischen einer Minimal- und Maximalgröße zu skalieren, wenn sich der Viewport ändert, wodurch ungeschickte Sprünge vermieden werden. Was auch immer die Methode ist, das Prinzip bleibt bestehen: Testen Sie Ihre Schrift auf einem echten Telefon, nicht nur in einem verkleinerten Browserfenster, denn Touchscreens, Betrachtungsabstand und Beleuchtung verändern alle, wie sich die gleichen Buchstaben in der Hand anfühlen.

Häufig gestellte Fragen

Wie viele Schriftarten sollte eine Marke verwenden?+
Zwei ist ein verlässlicher Standard: eine Schriftart für Überschriften und eine für den Fließtext. Eine dritte kann für einen engen, spezifischen Zweck hinzugefügt werden, aber mehr als das lässt ein Design in der Regel zerstückelt wirken. Eine einzige große Familie mit vielen Schriftschnitten kann auch alle Bedürfnisse allein abdecken.
Sind Serifenschriften oder serifenlose Schriften besser für das Web?+
Keine ist universell besser. Moderne Bildschirme stellen beide gut dar, daher hängt die Wahl von der gewünschten Persönlichkeit und der Lesbarkeit der spezifischen Schriftart ab. Viele Marken verwenden eine serifenlose Schrift für den Fließtext und reservieren eine Serifenschrift für Überschriften oder umgekehrt, um Kontrast zu schaffen.
Verlangsamen benutzerdefinierte Schriftarten eine Website?+
Sie können es, wenn sie unachtsam geladen werden. Jedes Gewicht und jeder Stil ist eine Datei, die der Browser herunterladen muss. Beschränken Sie sich auf die Gewichte, die Sie tatsächlich verwenden, wählen Sie effiziente Formate und ziehen Sie Systemschriftarten in Betracht, wo Geschwindigkeit entscheidend ist, damit die Schrift Charakter verleiht, ohne die Leistung zu beeinträchtigen.
Kann ich jede Schriftart verwenden, die ich online finde?+
Nicht immer. Schriftarten sind lizenziert, und die Bedingungen variieren je nach Web-, App- und Drucknutzung. Einige sind für kommerzielle Zwecke kostenlos, andere nicht. Bestätigen Sie immer, dass die Lizenz Ihre beabsichtigten Verwendungen abdeckt, bevor Sie sich festlegen, um eine kostspielige erzwungene Änderung nach der Etablierung der Marke zu vermeiden.

Typografie belohnt Geduld. Wählen Sie Schriftarten, die zum Charakter Ihrer Marke passen, schützen Sie vor allem die Lesbarkeit, bauen Sie eine klare Hierarchie auf und halten Sie Ihr Set klein und gut lizenziert. Wenn Sie es richtig machen, werden Ihre Worte überall, wo sie erscheinen, unverwechselbar nach Ihnen aussehen. Wenn Sie Beratung zu Ihrem Markenschriftsystem wünschen, erkunden Sie unsere Branding- und Designdienstleistungen oder kontaktieren Sie uns.

Referenzen

  1. Smashing Magazine. "Die Bedeutung der Typografie im Webdesign." smashingmagazine.com.
  2. Google Fonts. "Erste Schritte mit dem Google Fonts Knowledge." fonts.google.com.
Zurück zum Blog

AUTOMATISIEREN. OPTIMIEREN. DOMINIEREN.

Optimieren Sie Ihre Betriebsabläufe und bieten Sie ein reibungsloses Kundenerlebnis. Unsere Experten implementieren modernste Technologien und optimierte Arbeitsabläufe, damit Sie sich auf Ihre Kernkompetenzen konzentrieren können.