Typografie im Flat Design | Die besten Fonts für lange Schatten

Unkategorisiert

Typografie im Flat Design

Getreu dem Motto “weniger ist mehr” verzichtet Flat Design auf zahlreiche Gestaltungsmittel, die im Skeuomorphismus noch Anklang fanden. Dazu zählen aufwändige Verzierungen oder dreidimensionale, die Wirklichkeit imitierende Elemente. Im Vordergrund stehen Simplizität und das (farbliche) Hervorheben einiger weniger Elemente. Durch grafische Reduktionen im Flat kommt daher der Typografie wieder eine größere Bedeutung zu. Schriften werden zu den Hauptelementen, die wesentlichen Botschaften entfalten sich am besten im Text. Folge: Das Thema Flat Design Typo gehört zur zentralen Fragestellung im Gestaltungsprozess, auch für unser Webdesign Berlin Team. Was gibt es für eine harmonische Flat Typographie zu beachten?

Typographie im Flat Design - Was gilt es zu beachten?

Flat Design Typo am Beispiel von adayinbigdata.com (Screenshot).

Flat Design Typo Regeln

Simplicity – das zentrale Schlagwort im Flat Design – wirkt sich natürlich auch auf die Wahl der Schrift(en) aus. Im Sinne eines Minimalistischen Webdesigns, das die Webseite insbesondere mit farbigen Flächen und Schaltflächen strukturiert, arbeitet man optimalerweise auch mit “simplen” Fonts. Mit dem Text sollen dem Besucher einer Website Impulse übermittelt werden. Was zählt, ist der Inhalt. Die gestalterischen Mittel bzw. die Schriftart darf die Botschaft nicht übertünchen, sondern diese diese unterstreichen. Unaufdringlich und mit schlichter Eleganz, dennoch interessant fürs Auge und einfach lesbar sollte das Schriftbild im Flat Design sein und sich harmonisch in die Gesamtgestaltung einfügen.

Die richtige Schriftart für Flat Websites finden.

Flat Design Fonts müssen mit der schlichten Eleganz und Farbenfreude der Gestaltung in ihrer Gesamtheit harmonieren, um die Message eindrücklich zu vermitteln.
Oft verwendet man nur eine Font-Familie, wie hier bei Ghost Games (Screenshot).

Die Idee des Simplen zieht sich auf allen Ebenen durch: In der Regel findet man auf Webseiten im Flat maximal zwei verschiedene Fontfamilien (wohingegen Designer in anderen Projekten zwei bis vier Schriftfamilien nutzen). Vor allem klare Schriftarten dominieren als Flat Design Fonts. Außerdem kennzeichnend: Speziell serifenlose Schriften mit mehreren Schriftschnitten werden in diesem Webdesign Trend bevorzugt. Die grellen Farben im Flat heißen im Umkehrschluss für die Flat Typo, dass Größenverhältnisse, Linien und Striche klar und ausbalanciert sind.

Serifen im Flat?

Auch wenn Novelty Fonts im Flat Design funktionieren können, sind es doch vielmehr serifenlose Schriften, die überwiegen. Insbesondere Schriften mit sehr dünnen oder sehr breiten Schnitten beherrschen das Bild. Serifenschriften sind eher selten anzutreffen; zu viel Aufmerksamkeit könnte die Verzierung auf sich ziehen. Hier gestaltet sich zudem die Suche für die passende Typographie dann wesentlich schwieriger.

Flat Design Typo am Beispiel des Webfonts «Montserrat» der argentinischen Designerin Julieta Ulanovsky.

Eine einheitliche, in der breite nicht variierende Schrift sowie Schriftstärke ist zudem einfacher zu lesen und passt mit den unterschiedlichsten Hintergründen zusammen. In unseren Projekten arbeiten wir häufig mit Flat Design Fonts wie

Lato
Open Sans
Montserrat
PT Sans
Source Sans Pro.

«Lato» – häufig im Flat Webdesign zur Anwendung kommendes Webfont von Łukasz Dziedzic.

Daneben werden häufig auch Proxima Nova, Helvetica oder Helvetica Neue als Flat Design Fonts genannt. Arial könnte sich hier ebenso einreihen. Für ein aussagekräftiges und Persönlichkeit ausstrahlendes Design eignen sich jedoch Webfonts mit mehr Pepp.

Novelty Typo im Flat Webdesign am Beispiel von «Impact Label».

Sofern Novelty Fonts zum Einsatz kommen sollen, empfiehlt es sich zwei Fonts für das Design zu wählen. Hierbei ist es ratsam auf eine Novelty Schriftart zu setzen, die einer serifenlosen (hinsichtlich Attributen wie klare Linien und einheitliche Striche) ähnlich ist, also auch nicht zu verspielt oder dekoriert erscheint. Diese sollte dann an den Stellen auftauchen, an denen der Text einfach und groß gehalten wird.

Lesbarkeit, Raum und Farbkontrast in der Flat Typografie

Da der Flat Stil vollkommen auf dreidimensionale Effekte (etwa Schlagschatten) verzichtet, ist eine eingängige Farbpalette zur Gestaltung umso wichtiger. Mutige leuchtende und helle Farben mit ähnlich hoher Sättigung kommen bevorzugt zum Einsatz. Mit Blick darauf, dass eine solche farbenfrohe Gestaltung in Kombination mit Flat Icons wesentliches Ausdrucksmittel im Flat Design ist, muss die Wahl der Schriftart hinsichtlich Schriftgröße bzw. -breite, Strichstärke und natürlich auch Schriftfarbe gut abgestimmt sein.

Am häufigsten finden sich Schwarz und Weiß als Schriftfarben auf Flat Webseiten. Wenn man bedenkt, dass die Schriftzüge eben sehr häufig auf farbigem Hintergrund positioniert werden, wundert diese Farbwahl in der Flat Design Typo kaum. Schließlich sorgt dieser Farbkontrast für eine bessere Lesbarkeit von Texten. Da eben nicht auf Schatten gesetzt wird, müssen sich Text und Hintergrund eben durch den Farbkontrast abheben.

Des Weiteren beeinflussen leuchtende Hintergrundfarben auch die Strichstärke und und Schriftgröße der Typographie im Flat Design: Fonts sollten sich durch gerade Striche auszeichnen und groß sowie kräftig genug sein, um sich gut lesen zu lassen. Wir vermeiden in diesem Zusammenhang kursive Schriftschnitte, da diese zu viel Unruhe in das sonst so „gerade“ Design bringen. Insgesamt sollte man Texten im Flat “Raum zum Atmen” geben. Ausreichend Whitespace, große Fonts, Variation in der Schriftgröße ermöglichen es den Botschaften, sich auf der Seite zu entfalten.