Komplementärschriften im Web

Einen guten Artikelvorschlag erhielt ich von Jens. Er würde gerne etwas über gute Font-Kombinationen wissen:

Gerne würde ich hier auf die Typografie im Allgemeinen eingehen. Doch das Feld ist so gigantisch, das ich direkt auf gute Schriftkombinationen im Web verweisen werde.

Zuerst werde ich die gängige Leitmedien beleuchten. Dazu gehören Zeitungen, die schließlich seit der ersten Linotypemaschinen Erfahrungen mit der industriellen Produktion von Druckmedien haben. Ich wählte zur Schriftanalyse die Artikel-Headline, den Artikel-Haupttext und die Sub-Headline aus.

ZEIT ONLINE

headlines

Als Artikel-Headline benutzt ZEIT ONLINE die serifenlose Groteskschrift “Arial”. Diese besitzt eine gute Lesbarkeit und strahlt dazu eine Attraktivität und führende Seriosität aus. Als Artikel-Haupttext findet die moderne Barock-Antiqua “Georgia” verwendung. Diese wurde speziell für klare Darstellung und optimale Lesbarkeit auf Computerbildschirmen entwickelt. Diese passt hervorragend zum Thema Kultur und Politik.

The Seattle Times

seattle-times-typografie

  • Artikel-Headline: Georgia
  • Artikel-Haupttext: Arial
  • Sub-Headline: Arial

Georgia & Arial überwiegen

komplementaerefontszeitungen
Die Beispiele zeigen, dass die Kombination Georgia und Arial eine weitverbreitende Akzeptanz bei Lesern und Typografen zu finden ist. Somit ist diese Kombination eine gute Wahl für Webseiten.

Weitere Beispiele

Doch wie sieht es bei Shops, Portfolios oder anderweitigen Webseiten aus? Hier ein paar gute Beispiele:

  • notcoming nutzt zwei eingebettete Schriften. Als Headline “MapleBold” und Artikeltext: “ElenaRegular”
  • Mashable – Headline: “MuseoSlabRegular” / Artikeltext: “Helvetica Neue”
  • balsamstudio – Headline: “PFAgoraSerifPro” / Artikeltext: “Helvetica”

Ein paar Regeln für Komplementärschriften

Die Analyse von mehreren Webseiten hat gezeigt, das maximal 2 Schriftfamilien zum Einsatz kommen. Immer in Kombination mit einer Serifen- und einer Serifenlosen-Schrift.

Auf Schriftmischungen zweier unterschiedlichen Serifen- oder zweier Serifenlosen-Schriften sollten Unerfahrene verzichten. Schriftgruppen müssen mit Bedacht ausgewählt werden. Es kommt auf das richtige Kontrastverhältnis sowie Dynamik der Schriften an. Wer mehr über die richtige Schriftmischung erfahren möchte, sollte einen Blick in das Typolexikon werfen.

Ein paar Tipps zum Thema:

Einen guten Artikel über “Die gefühlte Lesbarkeit” von Bildschirmschriften und deren Bedeutung findet sich im designtagebuch.

thewebfontcombinator

Mit dem Web Font Combinator können Schriftkombinationen schnell mit wenigen Klicks getestet werden.

Hast Du noch einen guten Tipp oder ein Beispiel? Einfach Kommentar hinterlassen.