Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

t3n 36

Typografie im Webdesign: So kannst du Schriftarten kombinieren

    Typografie im Webdesign: So kannst du Schriftarten kombinieren

Die richtige Schrift war schon immer ausschlaggebend für gutes Design. Seit Webfonts im Web typografische Vielfalt erlauben, stehen auch Webdesigner vor der Herausforderung, die genau passende Schrift auszuwählen. Dabei kommt es vor allem auch auf die richtige Kombination von Schriften an.

Der Webdesigner Gerrit van Aaken definiert Typografie als „die Kunst und Lehre der grafischen Gestaltung, die in irgendeiner Form mit Schriftzeichen zusammenhängt“. Typografie umfasst damit ein weites Feld und entscheidet maßgeblich über Eindruck und Nutzerfreundlichkeit einer Website. Oliver Reichenstein, Gründer bei der bekannten Agentur Information Architects, meinte bereits 2006: „Webdesign ist zu 95 Prozent Typografie“. Nachdem sich ab 2007 Webfonts durchgesetzt haben, hat die typografische Vielfalt im Web nochmals einen gehörigen Schub erhalten – Services wie Typekit oder Google Fonts sei Dank. Das bedeutet, dass Webdesigner zunehmend gute Kenntnisse zur Beurteilung einer Schrift brauchen.

Gefeierte Vielfalt

Stark vereinfacht kann Typografie zwei Ziele verfolgen: Sie ist entweder expressives Gestaltungsmittel oder ein reduzierter Informationsträger. Die erste Variante feiert die Schrift als Ausdrucksmittel und nutzt ihre gestalterische Kraft. Da die Leserlichkeit hier nicht im Vordergrund steht, eignet sich dieser Stil vorrangig für Websites mit wenig Text – oder solchen, die bewusst aus der Reihe tanzen möchten.

Das Magazin „Literary Bohemian“ spielt mit einer expressiven Schriftkombination und versprüht so Reklame-Charme.
Das Magazin „Literary Bohemian“ spielt mit einer expressiven Schriftkombination und versprüht so Reklame-Charme.
Expressive Schriftmischungen, wie auf der Website des Magazins „Literary Bohemian“, versprühen starken Retro-Charme und haben einen sehr plakativen Reklame-Charakter. Dieser Stil ist jedoch auch sehr experimentell und verlangt vom Gestalter einiges an Erfahrung – schließlich sollte man Fonts nicht einfach wild durcheinander würfeln.

Reduzierte Typografie

Im Webdesign üblicher ist die reduzierte Typografie: Die Schrift wird eher als Mittel zum Zweck verwendet und nicht als zentrales Gestaltungselement. Wichtig ist dann, dass der Nutzer den Inhalt gut erfassen kann, die gewählten Schriften also gut leserlich sind. In diesem Fall sollten Webdesigner nicht zu viele Schriften verwenden – zwei oder drei Varianten dürften meist ausreichen. Der Leserlichkeit dient auch die Verwendung großer Typografie, die seit Jeffrey Zeldmans Manifest im Trend liegt.

Auch der Webentwickler Peter Kröner achtet auf seiner Website auf eine gute Lesbarkeit seiner Texte und nutzt daher eine angenehm große Schrift.
Auch der Webentwickler Peter Kröner achtet auf seiner Website auf eine gute Lesbarkeit seiner Texte und nutzt daher eine angenehm große Schrift.

Kontrast statt Konflikt

Kombiniert man Schriften miteinander, entsteht ein Schriftkontrast. Ob die Schriften zueinander passen, hängt von der richtigen Balance ab. Cameron Chapman bringt es in einem Artikel auf die Formel: „Kontrast ja, Konflikt nein“. Konflikte können dabei sowohl bei zu wenig als auch bei zu viel Kontrast entstehen. Sind die Schriften zu ähnlich, heben sie sich nicht genug voneinander ab. Die Auswahl wirkt zufällig, als habe der Designer aus Versehen eine falsche Schrift eingestellt. Ist der Kontrast zu stark, wirkt dies unprofessionell – die Schriften scheinen beliebig nebeneinander gesetzt. Eine stimmige Schriftmischung hat also genau den richtigen Kontrast.

Der Kontrast zwischen den Schriften bestimmt die Harmonie – und auch, wie professionell ein Design wirkt (oben: zu wenig Kontrast, unten: zu viel Kontrast).
Der Kontrast zwischen den Schriften bestimmt die Harmonie – und auch, wie professionell ein Design wirkt (oben: zu wenig Kontrast, unten: zu viel Kontrast).
Der Spielraum dabei ist jedoch enorm, je nachdem, ob eher ein harmonischer oder ein extremer Eindruck gewünscht ist.

Links und Literatur

  1. Das #webtypobuch von Gerrit van Aaken
  2. Typekit
  3. Google Fonts
  4. Literary Bohemian (allerdings noch mit Grafiken…
  5. Web Design Manifest von Jeffrey Zeldmann…
  6. Cameron Chapman über Schriftkombinationen
  7. Claas Kalwa über die Anatomie von…
  8. Pixelgraphix
  9. Putzengel
  10. Jérôme Bodin
  11. BDG Stundensatzkalkulator

Finde einen Job, den du liebst zum Thema JavaScript, Webdesign

Alle Jobs zum Thema JavaScript, Webdesign
Schreib den ersten Kommentar!

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen