Warum Webdesigner auch Typografen sein müssen

In den letzten Wochen wurde die Webwelt ja mit dem üblichen Thema zu Jahresbeginn überschwemmt: Webdesign Trends 2013. Darin versuchen Webdesigner Trends für das aktuelle Jahr vorherzusagen. Hier die Themen, die auch Einfluss in die Typografie haben, kurz zusammengefasst:

Responsive Web

Besonders der Ansatz Mobile First wird näher verfolgt. Ich denke bis zum Ende des Jahres wird das anfänglich frische Thema Mainstream werden. Nicht die Seiten mit responsive Webdesign werden auffallen, sondern jene ohne.

Minimalismus

Reduzierung auf das wichtigste, keine Spielereien, weniger Illustrationen, weniger Overload.

HMTL5 Experimente

Vor allem Interaktivität liegt 2013 im Trend. Motion Design wird einen Schritt weiter gehen mit HTML5, da der Browsersupport immer besser wird. Schlagworte dazu: Parallax Scrolling, Collapse Header.

Zu guter Letzt natürlich: Typografie

Immer mehr Webseiten setzten auf gute Typografie, besonders 2013 wird das zum Thema. Besonders wichtig wird die Lesbarkeit.

Bild

Um auf das Thema näher einzugehen, erzähle ich kurz was ich vorige Woche beim Surfen entdeckt habe. Jeder kennt die Zeichenschriften mit denen man die Kindergeburtstage verbracht hat, um Freunden eine geheime Nachricht zukommen zu lassen. In meinem Fall war das meistens die Schriftfamilie Dingbats. Ich habe mich immer gefragt für was (außer Geheimnachrichten – die sicher Ihre Daseinsberechtigung hatten) diese Zeichenschriften wirklich gedacht waren. Nun gibt es wirklich einen Einsatzbereich – Iconschriften für Webdesign. Das ist wahrscheinlich den Dingbats-Machern auch aufgefallen & man glaubt es kaum – es gibt einen Relaunch von Dingbats, der Schriftschnitt heißt jetzt Dingbats Erler. Nicht nur, dass die Icons optimiert wurden, sie entsprechen auch dem aktuellen Trend. Sie beinhalten sogar Outline Icons und ihr Aussehen wurde konsistenter. Weiters wurden die Iconthemen angepasst, zb gab es früher Icons von Disketten sowie Radio Kasetten, diese wurden alle ausgetauscht und auf den aktuellen technischen Stand gebracht. Iconschriften liegen besonders 2013 im Trend, da man mit ihnen flexibler in den verschiedenen Auflösungen arbeiten kann und nebenbei Datengröße einspart. Man kann sich sogar eigene Iconfonts zusammenstellen, wie auf Pictos.

Zum Thema Größe

Der Trend geht zu sehr großer Typografie dieses Jahr. Alles was besonders riesig und übertrieben ist ist richtig. Besonders die Berechnung der passenden Schriftgrößen macht Typografie im Web nicht so einfach. Die Einführung von responsive Webdesign hat das ganze noch schwieriger gemacht. So reicht es nun nicht mehr aus einfach nur die Pronzentzahl der font-size im body zu erhöhen. Man muss für jede Media Query eine eigenen font-size für den body und die einzelnen Unterelemente berechnen. Um das ganze etwas zu erleichtern gibt es nützliche Tools dafür wie pxtoem oder jQuery Plugins wie slabText oder Fittext.
Besonders wichtig ist, dass bei unterschiedlichen Auflösungen neben der Schriftgröße auch die Zeilenhöhe geändert wird. Bei längeren Zeilen braucht man zum Beispiel eine größere Zeilenhöhe als bei kürzeren, da der User länger braucht um vom Ende der Zeile wieder zum Anfang zu springen. Richtige Zeilenhöhe erhöht also die Leserlichkeit. Durch die Möglichkeiten von Media Queries kann diese in jeder Auflösung optimal angepasst werden.
Der eindeutige Trend der serifenlosen Schriften geht zu der Schriftfamilie Proxima Nova. Viele namhaften Agenturen und Websites verwenden diese als Webfont. Sie ist sehr gut leserlich & bietet 126 (!) verschiedene Schnitte. Auch sehr beliebt ist die Helvetica Neue die auch viele Schnitte besitzt und gleich wie Proxima Nova in vielen minimalistischen & cleanen Webdesigns eingesetzt wird. Für beide Schriften muss aber eine Webfontlizenz erworben werden (zB. Typekit oder fonts.com).
Eine kostenlose Alternative zu diesen beiden Schriften bietet Fontsquirrel und Google Webfonts mit der Open Sans an, die es in 13 verschiedenen Schnitten gibt mit denen man sehr gut auskommt.
Außerdem kann man erkennen, dass serifenlose Schriften im Web immer mehr Verwendung finden. Gegen jede Annahme ist es jedoch egal ob man eine serifenlose oder eine serifen Schrift verwendet. Mit der richtigen Schriftgröße und dem passenden Zeilenabstand sind beide Varianten gleich gut lesbar. Acht geben muss man nur auf Webseiten mit vielen unterschiedlichen Elementen, da lässt eine Serifenschrift das Gesamtbild noch unruhiger wirken. Bei minimalistischen Webdesigns hingegen kann man auch sehr gut Schriften mit Serifen einsetzten.

Fazit

Die richtige Einschätzung/Verwendung der Schriftarten, Schriftgrößen und Zeilenhöhe bedarf einer intensiven Auseinandersetzung mit dem Thema Typografie. Das Verständnis von responsive Webdesign, in Kombination mit Typografie Kenntnissen ergibt die beste Voraussetzung für ein benutzerfreundliches und gut lesbares Webdesign. Denn eines darf man nicht vergessen, auch 2013 heißt es wieder „Content is king“ – und es gilt diesen mit bester Lesbarkeit aufzubereiten.