Typografie in flat Design

Bild

Durch den Flat-Design-Trend im Web werden alle Extras die früher verwendet wurden, um einer Seite „mehr Pepp“ zu verleihen, also z.B. Ribbons, Stitches, starke Texturen oder andere Elemente des Skeuomorphismus, ausgespart. Umso wichtiger ist es also bei einem Flat Design die wenigen Elemente die man hat,  gut und gekonnt einzusetzen. Das Motto dabei: Weniger ist mehr!
Eines der wichtigsten Elemente davon ist die Typografie. Aber welche Schriften sind am beliebtesten und wie kann man Schrift im Designkontext am besten einsetzten?

Auswahl der richtigen Schriften im Flat-Design

Speziell serifenlose Schriften mit mehreren Schriftschnitten werden bei diesem Trend bevorzugt. Am beliebtesten sind dabei Schriften mit sehr dünnen und besonders breiten Schnitten. Besonders spektakulär wirken Light-Schnitte eher auf Retina-Displays.
Am häufigsten eingesetzt werden heuer und in diesem Zusammenhang: Proxima Nova, Helvetica, Helvetica Neue oder Open Sans. Auch altbekannte Schriftarten wie Arial funktionieren ziemlich gut bei Flat-Design, als Designer sollte man jedoch versuchen, eine andere, besondere Schrift auszusuchen, um bei der Vielzahl an Designs hervorzustechen.
Neben der Auswahl einer passenden sans-serifen Schrift kann auch eine Scriptschrift als Eyecatcher verwendet werden – zum Beispiel für Überschriften. Serife Schriften zu verwenden ist auch kein Fehler, jedoch kommen diese viel seltener bei Flat-Designs vor, da die Auswahl der richtigen Schrift, viel schwieriger fällt als bei Schriften ohne serifen.

Nicht mehr als 2 Schriften

Prinzipiell wird von uns dazu geraten, nicht mehr als 2 verschiedene Schriften (mit unterschiedlichen Schriftschnitten) einzusetzen, damit das Design nicht unruhig wird. Ebenfalls gibt es den Trend bzw. Tipp, keine Novelty Schriften (also stark ornamentierte Schriften)  zu verwenden – das stimmt aber im Detail nicht so ganz: Man kann sehr wohl diese Schriften verwenden um Highlights zu setzen (oder wenn sie natürlich in der CI der Firma vorhanden ist), sollte jedoch eine sans-serife Schrift als Ausgleich dazu verwenden. Die gewählte Novelty Schrift sollte selbst nicht allzu unruhig sein.

Lesbarkeit

Besonders wichtig ist der Farbkontrast. Da bei Flat-Design großteils auf einfarbige große Flächen gesetzt wird, ist die Schriftfarbe meistens schwarz oder weiß. Außerdem sollte auf das Größenverhältnis der Schriften geachtet werden. Typografie in Flat-Design kann von sehr groß, bis zu sehr klein gehen, jedoch sollte auf ausreichend Whitespace – um die Schrift herum – geachtet werden. Schriften in einem Flat-Design dürfen niemals „eingeklemmt“ wirken und brauchen genug Platz um sich zu entfalten!
Bitte vermeidet kursive Schriftschnitte, diese bringen zu viel Unruhe in das sonst so „gerade“ Design. Wichtig ist es auch sich für die Benutzung der Schriften ein Schriftenraster, sowie Guidelines zurecht zu legen, damit man konsistent bleibt. Microsoft hat zum Beispiel sehr ausführliche Guidelines zur Typografie, da diese das Herzstück von Metro Design und Windows 8 ist (zb. 42pt für Überschriften – Lightschnitt, 20pt für Untertitel – Regularschnitt, etc).

Icon-Fonts

Neben Schriften gibt es außerdem zahlreiche Icon-Fonts, welche speziell für Flat-Design eingesetzt werden können. Der Vorteil hierbei ist klar: Die Icons sind immer gestochen scharf, wie auch die Schriften & man ist viel flexibler und auflösungsunabhängiger. Hier überzeugen vor allem Modern Pictograms,Entypo und Pictos.

Typografie als Hauptelement bei Flat Designs

Typografie gilt bei Flat-Design als wichtigstes Gestaltungsmittel und sollte somit vor dem Einsatz sehr gut studiert werden.  Mindestens wäre es sinnvoll soviel Zeit für die richtige Auswahl der Schriften einzuplanen, wie in die Auswahl der Farbpaletten und Bilderwelten. Die richtige Schrift soll ins Gesamtbild der Website passen, nicht hervorstechen, aber die Aussage der Website unterstreichen.