Typografie fürs Webdesign

Typografie – was hat es mit diesem Begriff auf sich? Die meisten Website-Betreiber legen ihren Schwerpunkt auf Inhalte, weniger auf die grafische Aufbereitung. Mal hier, mal dort wird ein Bild eingebaut, das war’s auch schon. Im modernen Webdesign hat die Schrift jedoch eine große Bedeutung, denn mit ihr können Sie Texte gekonnt in Szene setzen: In diesem Artikel erfahren Sie alles über Schriftarten, Schriftgrößen und Schriftmischungen.

Drei Regeln für Typografie

Der Musternutzer googelt nach einem bestimmten Begriff. Es werden ihm mehrere Vorschläge angezeigt und er klickt auf den zweiten Link. Nun erblickt er ein tolles Bild, das sein Interesse weckt – aber der Text. Er ist viel zu klein und der blaue Hintergrund macht das Lesen unmöglich. Daher verlässt er die Website und entscheidet sich lieber für die Konkurrenz.

1. Ein Text muss einladend wirken
2. Inhalte und Schriften sollten sich ergänzen
3. Der Leser muss Informationen leicht aufnehmen können

Um das zu erreichen, sollten Sie die folgenden Tipps umsetzen.

Schriftarten im Webdesign

Verwenden Sie 2 bis 4 verschiedene Schriftarten.

Das Auge liest mit und es ist verwirrt, je mehr es „mitdenken“ muss. Der Wechsel einer Schriftart (engl. Fonts) sollte immer klar definiert sein, wie etwa bei einem wörtlichen Zitat. Bei Ratgebern ist es sinnvoll, bestimmte Fachbegriffe schriftlich hervorzuheben. Willkürliche Schriftwechsel sind zu vermeiden.

Anstatt die Schriftart unnötig zu ändern, können Sie einzelne Textbausteine kursiv, fett oder farblich markieren. Für das Auge gestaltet sich solch ein Wechsel deutlich angenehmer.

Tipp: Mehr Fonts sind nur bei bestimmten Textformen (Newsblog, Partyflyer) zu empfehlen.

Die Wahl der richtigen Schriftart

Im Webdesign sind diese Fonts häufig anzutreffen:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Times New Roman
• Trebuchet MS
• Verdana

Alle Schriftarten haben ihren eigenen Charakter, nicht jede passt zur anderen. Einige Fonts sind äußerst eigenwillig. So scheidet Comic Sans häufig aus gestalterischen Gründen aus. Courier ist eine eigenwillige Schrift, die eher altmodisch wirkt:

#1. Courier

Diese Schrift wurde ursprünglich für Schreibmaschinen verwendet. Alle Buchstaben sind gleich weit voneinander entfernt, weshalb sie zu den Monospace-Schriften gehört. Diese Tatsache verleiht ihr einen schwerfälligen Eindruck. Sie sollte nur in Einzelfällen eingesetzt werden, um etwa den Spruch eines alten Denkers zu unterstreichen.

#2. Georgia

Eine Alternative ist Georgia, die für Harmonie und klare Darstellungen steht. Gerade bei Blogs oder Zeitschriften erfreut sich diese Antiqua-Schriftart einer enormen Beliebtheit. Moderne Fonts wie Georgia sind proportionale Schriftarten, das heißt, die einzelnen Buchstaben haben unterschiedliche Entfernungen. Somit entfällt der schwerfällige Eindruck im Webdesign, den etwa Courier hat.

#3. Times

Der Font Times zählt zu den Antiqua-Schriften und hat Serifen – das sind kleine Striche an den Buchstabenenden. Ein Vorteil von Serifen besteht in der leichteren Lesbarkeit. Jedoch ist das eine Geschmacksfrage, da die Unterschiede minimal sind. Unabhängig davon wirkt Times seriös und gediegen. Die Schrift eignet sich für Artikel in Zeitschriften und Zeitungen. Für einen Blog ist sie ebenfalls zu empfehlen.

#4. Arial

Courier, Georgia und Times sind Serifenschriften. Anders sieht es bei Arial oder Verdana aus, die zu den Groteskschriften (auch Sans Serif) zählen. Die Atmosphäre wirkt etwas nüchtern, dafür aber moderner als bei Times. Für Onlineshops ist sie eine gute Wahl oder generell für Bildunterschriften.

Beachten Sie immer die Punktgröße des Textes:

Serifenschriften sind bei kleinen Größen schlechter lesbar. Daher sollten Sie für kleine Textbausteine Schriften ohne Serifen verwenden. Arial oder Verdana sind gute Beispiele fürs Webdesign. In der Regel genügt jeweils eine Schriftart für die Überschriften, für den Fließtext und für die Menüpunkte. Die Typografie sollte sich auf drei Größen beschränken. Verzichten Sie auf überaus kleine oder große Textgrößen, da ein zu kleiner Textabschnitt in manchen Browsern winzig erscheinen kann.

Testen Sie einen Text in verschiedenen Browsern – mit unterschiedlichen Versionen!

Kombination von Schriftarten

Die Schriften sollten sich weder zu ähnlich sehen, noch sich zu sehr voneinander unterscheiden. Altertümliche oder statische Fonts passen eher weniger zu dynamischen und modernen Schriftarten.

„Generell ist die Kombination einer Antiqua- mit einer Groteskschrift passend.“

Einige Fonts fallen größer aus als andere. Zudem sollten Sie die Größe der Schriften auf Ihre Zielgruppe abstimmen. Ein Werbemittel für Senioren sieht sicherlich anders aus als der moderne Reiseblog eines 28-Jährigen.

Gängige Fontgrößen im Webdesign:

• 6 bis 8 Pixel: Bildtexte und Hinweise
• 10 bis 14 Pixel: Fließtexte
• 15 Pixel aufwärts: Überschriften

Für normale Artikel ist die Fontgröße 12 oder 13 zu empfehlen.
Tipp: Kursive Schriften sind schwer lesbar und nicht leicht zu kombinieren. Muss es unbedingt kursiv sein, sollten Sie eine sehr große Schriftgröße wählen.

Fazit

Es existiert keine ultimative Schriftformel, da jedes Projekt individuell ist. Ein Onlineshop erfordert eine andere Typografie als der Versicherungsblog.

Einige Grundregeln helfen Ihnen weiter:

1. Was möchten Sie mit Ihrer Website ausdrücken?
2. Suchen Sie eine Schrift zu diesem Gedanken! (Finanzseiten benötigen andere Fonts als lustige Spaßblogs)
3. Wählen Sie zwei bis drei passende Schriftarten aus
4. Wofür sind die Fonts bestimmt? (Fließtexte, Überschriften)

Wichtig ist, die Typografie einheitlich und übersichtlich zu gestalten. Damit sich der Besucher auf Ihrer Website wohlfühlt und gerne wieder vorbeischaut.