Die goldenen Regeln der Typografie

Schriftarten für digitalen Content – Die goldenen Regeln der TypografieSei es beim Gestalten eines CTAs, einer Infografik oder auch bei einem neuen E-Mail-Template – regelmäßig stoße ich bei der Erstellung von Content auf ein Problem: Welche Schriftart wähle ich? Und welche Fonts lassen sich kombinieren? Gibt es da irgendwelche Regeln und Leifäden für? Gibt es! Und wir zeigen sie Ihnen:

Typografie – was ist das eigentlich?

Laut Wikipedia dreht es sich bei der Typografie, vor allem im Digitalen, um "die visuelle Gestaltung von Textdokumenten wie Webseiten oder eBooks primär mittels Schrift."

Ziel und Zweck dieser visuellen Gestaltung ist es, die Texte möglichst einfach lesbar und dadurch verständlich zu machen sowie sie optisch ansprechend und zum Lesen einladend zu präsentieren. Typografie ist also das, was bei Texten für eine gute User Experience sorgt.

Zwar ist Typografie eine Kunstform (denken Sie nur an formvollendete Kalligrafie oder die traditionelle Kanji-Schrift), aber es gibt gewisse Richtlinien, die einem beim professionellen Gestalten von Texten die Arbeit erleichtern:

GHOTMS – Die Font-Familien

Grundsätzlich werden bei Schriftarten sechs verschiedene Font-Familien unterschieden:

  1. Geometric Sans – Geometrische Groteskschriften
    Als Grotesk bezeichnet man Schriftarten, bei der die Strichstärke der Buchstaben sehr gleichmäßig ist und die keine Serifen besitzt. Auch der Ausdruck "Sans-Serif" ist für diese Schriften geläufig. Gemoetrische Groteskschriften sind so simpel und reduziert wie möglich
    Beispiel: Futura, Montserrat, Gotham, Clear Sans, Proxima Nova
  2. Humanist Sans
    Unter Humanist Sans werden Schriftarten gesammelt, die von der Handschrift abstammen. Sie sind sauber und modern, haben aber, durch variierende Strichstärken, den "menschlichen Faktor" behalten.
    Beispiele: Verdana, Cabin, Droid Sans, Gill Sans, Open Sans
  3. Old Style – Antiqua
    Als "Old Style" bezeichnet im Schriftarten mit gerundeten Bögen, die auf dem lateinischen Alphabet basieren.
    Beispiele:
    Jenson, Bembo, Palatino, Garamond
  4. Transitional – Barock-Antiqua/Übergangsantiqua
    Rundbogige Druckschrift römischen Ursprungs mit Serifen.
    Beispiele: Times New Roman, Baskerville
  5. Modern
    Beispiele: Bodoni, Didot
  6. Slab Serifs – Egyptienne
    Aus der Antiqua abgeleitete Font-Familie, bei der die Strichstärke der Buchstaben nahezu gleichmäßig ist und die Serifen deutlich verstärkt sind.
    Beispiele: Clarendon, Rockwell, Courier, Lubalin Graph, Archer

Stimmungen und Epochen

Eigentlich eine Selbstverständlichkeit, aber der Vollständigkeit halber wollen wir es nicht unerwähnt lassen:

Es geht bei der Fonts-Wahl nicht um Ihren persönlichen Geschmack! Auch wenn Sie die barocke Schnörkelschrift vielleicht ganz großartig finden – denken Sie lieber noch mal darüber nach, ob sie wirklich die passende Wahl für Ihr Projekt ist.

Die Wahl der richtigen Schriftart ist eine Frage des Stils – und über den lässt sich bekanntlich nicht streiten.

Sans-Serif meets Serif

In der Regel geht es bei der Suche nach der richtigen Schriftart nicht nur um eine einzelne, meist möchte man doch zwei verschiedene Schriftarten aufeinander abstimmen. Hierfür gibt es eine ganz klare Empfehlung:

Kombinieren Sie eine Schriftart mit Grotsken stets mit einer ohne. Also Sans Serif mit Serif.

Kontrast gewinnt

Sie kennen jetzt also die Font-Familien und wissen, dass sie lieber nicht zwei Grotesk-Schriften miteinander verbinden. Und nun? Es gibt ja immer noch unzählige Möglichkeiten, nicht alles sieht gut aus und vieles fühlt sich einfach falsch an.

Dann gilt: Arbeiten Sie möglichst kontrastreich!

Wenn mehrere Schriften in einem Design kombiniert sind, dann sollen sie eine möglichst harmonische Koexistenz führen. Und das können sie nicht, wenn sie einander zu ähnlich sind. Das ist auch für den Betrachter eher verwirrend, wenn er sich dauernt fragt: Sind das jetzt verschiedene Schriftarten oder doch immer die Gleiche?

Bloß nicht übertreiben!

Ja, es gibt sie, die Anlässe, zu denen eine wirklich extravagante Schriftart ok ist. Die Einladung zu einem Kindergeburtstag. Oder der Flyer zur Eröffnung eines Tattoo-Studios. Aber abgesehen davon sollten Sie sich, vor allem im professionellen Umfeld, mit allzu unorthodoxen, "fancy" Fonts zurückhalten. Oder sie allenfalls sparsam dosiert einsetzen.

Comic Sans

Es gibt Fonts, die sollten Sie nie verwenden. Also wirklich niemals. Never ever! Und König der verbotenen Fonts ist Comic Sans. Keine andere Schriftart erntet wohl so viel Verachtung und Abneigung wie die peinlich-flippige Microsoft-Schrift, die an Schreibschrift in Comic-Sprechblasen erinnert. Wenn Sie ernst genommen werden wollen, benutzen Sie unter keinen Umständen Comic Sans!

Ebenso auf der schwarzen Liste der verbotenen Fonts stehen:

  • Papyrus
  • Curlz
  • Viner
  • Kristen

Gut kombiniert

Und wie sieht sie nun aus, eine gelungene Kombination? 

Es gibt einige klassische Webfonts-Kombinationen, mit denen Sie immer auf der sicheren Seite sind. Allen voran Serifen-/Sans-Serif-Schriftpaarungen, die aus dem gleichen Hause stammen und sich so gut ergänzen:

  • Roboto & Roboto Slab
  • Droid Serif & Droid Sans
  • Source Serif Pro & Source Sans Pro
  • Merriweather & Merriweather Sans
  • Josefin Sans & Josefin Slab

Weitere empfehlenswerte Kombinationen:

  • Sacramento & Lato Regular
  • Lora & Varela Round
  • Expletus & Sans
  • Rufina & Sintony
  • Fjalla One & Average
  • Josefin & Denk One
  • Neuton & Martel Sans
  • Pacifico & Gentium
  • Play Bold & Quicksand

Darüber hinaus gibt es Fonts, die viele Schriftschnitte (also Variationen in Stärke, Laufweite und Lage der Schrift) haben und dadurch sehr flexibel einsetzbar sind:

  • Open Sans (übrigens unser Font der Wahl für die HOPPE7 Website und unserem Blog)
  • Lato
  • Exo
  • Titillium Web
  • Playfair Display
  • Ubuntu
  • Fire Sans
  • Expletus Sans

Und jetzt sind Sie dran! Testen Sie bei Gelegenheit doch eine der vorgschlagenen Kombination. Oder trauen Sie sich, mit unseren Tipps eigene Kombinationen zu erstellen. Hauptsache, Sie lassen die Finger von Comic Sans!

 Kostenloses Whitepaper

Veröffentlicht am 06.09.2016 und zuletzt aktualisiert am 17.06.2017

Hat Ihnen der Artikel gefallen?

Dann abonnieren Sie doch unseren Newsletter!