Verwendung von Schriften

5 Faustregeln für professionelle Typografie

Lassen Sie uns über Typografie reden. Über Schriften für die Website, das Blog und für Printprodukte. Denn noch immer krempeln sich manchmal die Fußnägel hoch bei dem, was typografisch so 'verbrochen' wird. Und noch immer dominiert 'Arial' das Web. Diese Langeweile ist nicht nötig. Aber zunächst die wichtigsten Basics:
5 Faustregeln für professionelle Typografie
Donnerstag, 20. März 2014VonElke Fleing

Typografie ist nicht zu Unrecht seit langem eine Wissenschaft für sich. Hier ist ein kurzer Überblick über die Geschichte der Typrografie:

Man kann eine Menge falsch machen, wenn es um den Einsatz von Schriften, Schriftgrößen und -formatierungen geht und Aber mit sehr wenigen Faustregeln kann man zumindest so viel richtig machen, dass ein professioneller Eindruck entsteht.

Faustregel 1: Möglichst nur 2 verschiedene Schriften
Eine für die Überschriften, die ruhig ein wenig verspielter sein darf und bei der extrem gute Lesbarkeit nicht unbedingt das einzige Kriterium zur Auswahl sein muss. (Nein, das heißt NICHT, dass Comic Sans eingesetzt werden sollte, das heißt es auf keinen Fall)

Und eine zweite Schrift für den restlichen Text: Fließtext, Listen, nummerierte Listen, Bildunterschriften – alles eben. Diese Schrift sollte unbedingt sehr gut lesbar und möglichst gar nicht verspielt sein.

Und nein, Sie fördern nicht in Ihren Ruf, besonders kreativ zu sein, wenn Ihre Druckwerke oder Websites möglichst viele schicke Schriften zieren – im Gegenteil.

Faustregel 2: Im Web ohne Serifen, gedruckte Texte mit
Beide Regeln sind der besseren Lesbarkeit geschuldet.

In Büchern, Zeitungen und Zeitschriften und allen anderen gedruckten Werken lassen sich Schriften mit Serifen (das sind die kleinen Häkchen an den meisten Buchstaben) besser lesen. Typische Beispiele für Serifenschriften sind die gute alte Times New Roman oder die Georgia.

Am Bildschirm hingegen bringen Serifen nur Unruhe ins Schriftbild, dort lassen sich serifenlose Schriften wie Arial oder Verdana flüssiger entziffern.

Faustregel 3: Überschriften-Hierarchie sollte sich im Schriftbild spiegeln
Es gibt Hauptüberschriften und Zwischenüberschriften verschiedener Hierarchiestufen. Im Web werden diese mit H1 (für ‘Headline’ 1) bis Hn abgekürzt. Je größer die Zahl, desto untergeordneter die Überschrift.

Und diese Hierarchie sollte sich auch im Schriftbild zeigen, das heißt: Die H1 sollte am mächtigsten und auffälligsten sein, eine H5 deutlich kleiner und unauffälliger.

Springt man hier und lässt zum Beispiel eine H4 stärker ins Auge fallen als eine H2, verwirrt man den Leser.

Faustregel 4: Sparsam sein mit Schrift-Formatierungen
Es gibt diverse Möglichkeiten, Text innerhalb eines Fließtextes hervorzugheben. Man kann ihn kursiv setzen, das wird zum Beispiel gern für Zitate genutzt. Man kann ihn halbfett auszeichnen, das wird gern zur Betonung einzelner Wörter oder Halbsätze angewendet.

Man kann ihn unterstreichen, ebenfalls, um  die Wichtigkeit kurzer Passagen zu betonen und man kann Text mit dem gleichen Ziel in GROSSBUCHSTABEN setzen.

All das bringt extreme Unruhe in einen Text und stört den Lesefluss. Mit solchen Formatierungen sollte also immer extrem sparsam umgegangen werden.

Im Web verbieten sich Unterstreichungen noch aus einem anderen Grund: Fast jeder Leser vermutet hinter einem unterstrichenen Wort einen Hyperlink, den man klicken kann. Ist es aber einfach nur ein unterstrichenes Wort, entsteht Verwirrung.

Und auch die Schreibung in GROSSBUCHSTABEN birgt neben der extrem schlechten Lesbarkeit eine zusätzliche kulturelle Tücke. Verwendet man reine Großschreibung im Fließtext, fühlen sich viele Leser dadurch angeschrien, weil Großschreibung die gängige Kennzeichnung für ‘jemanden Anschreien’ im Chat ist.

Faustregel 5: Konsistentes Corporate Design auch in der Typografie
Heutzutage ist es einfacher denn je, auch in Sachen Typografie ein Corporate Design zu entwickeln und dieses medienübergreifend konsistent zu halten. Weniger geschwollen ausgedrückt: Es empfiehlt sich, für Printdrucksachen und  für Webtext dieselben Schriften zu verwenden.

Google (Web-) Fonts und Skyfonts – das Dreamteam für Web- und Desktopschriften

Die wahrscheinlich einfachste Möglichkeit, wie man dieselben – und dennoch etwas ungewöhnlicheren – Schriften sowohl für Print-Texte als auch für Webtexte verwenden kann, ist die Verwendung der Google Fonts.

632 Fonts-Familien bietet Google zur freien Verwendung an – eigentlich müsste da für jeden Geschmack Passendes dabei sein. Und während es früher noch ziemlich aufwendig war, die Schriften in Websites einzubinden, funktioniert das heute sehr einfach.

Wie man die Fonts manuell einbindet, wird bei SEOVisions im Artikel Webfonts per CSS richtig einbinden sehr anschaulich erklärt.

Und für WordPress-Sites gibt’s inzwischen Plugins, mit denen das Problem gelöst werden kann, zum Beispiel WP Google Fonts.

Aber auch ein Download der Google Fonts auf den Desktop und damit für den Einsatz von zu druckenden Texten ist inzwischen möglich und zwar mittels des kleinen Programms Sky Fonts, das man sich vorab installiert. Danach einfach die gewünschten Google-Schriften downloaden und fertig.

Wie genau es funktioniert, wird in diesem Mini-Tutorial gezeigt.

Sämtliche Google-Fonts, das WordPress-Plugin und auch SkyFonts sind außerdem gratis, so dass man eigentlich wirklich gar keine Ausrede mehr hat, seine Texte nicht typografisch schick zu präsentieren.

Bild oben: Shutterstock, Font

Elke Fleing

Elke Fleing aus Hamburg liefert Texte aller Art, redaktionellen Content und Kommunikations-Konzepte. Sie gibt Seminare, hält Vorträge und coacht Unternehmen. Bei deutsche-startups.de widmet sie sich vor allem Themen und Tools, die der Erfolgs-Maximierung von Unternehmen dienen.