UX Audit

Wir trainieren dein Team? Buch unsere Workshops, Trainings und Coachings.

Zeigt her!
Close

Typografie in flat Design

9. Juli 2013, von stephan
Liechtenecker Büro

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?
flat-typography

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.

Du willst mit jemanden über das Thema plaudern?

Einen kostenlosen Termin mit CEO Susanne vereinbaren!

Stephan

Meine Rolle bei Liechtenecker: langgedienter Frontend-Veteran Wenn es weder IT noch Digitalisierung gäbe, wäre mein Beruf: Förster ohne Kontakt zu Menschen! Mein Herz schlägt für: die Arterien.
Keine Kommentare vorhanden.
Kommentar verfassen
Name
Mail
Web
Captcha
Erfolgreich!
Fehler!
Technologie – Blogbeitrag

Generative AI: Eine Web-App in 50 Bahn-Kilometern

18. April 2024, von stephan

Es ist früher Donnerstagabend am Wiener Franz-Josefs-Bahnhof. Schwärme an Pendlern strömen in die Züge. Die Menschen wirken erschöpft und müde. Viele nutzen die Zeit im Zug um ein Buch zu lesen oder einfach nur aus dem Fenster zu schauen. Die Zugfahrt nach dem Büro ist für mich meistens die Zeit, offene Tasks abzuschließen, Tickets zu verschieben und zu kommentieren oder E-Mails zu beantworten. Doch heute soll das anders sein.

Jetzt lesen
Liechtenecker Leseliste #62 mit Susanne Liechtenecker
Inspiration – Podcasts

Folge #62 mit Susanne Liechtenecker

27. November 2020

In Folge 62 besinnt sich Susanne auf die Anfänge dieses Podcasts und begrüßt keinen Gast, sondern erzählt über das Buch "Jäger, Hirten, Kritiker" von Richard David Precht und warum es sie inspiriert hat.

Jetzt anhören
Close