Google Fonts
Schriftart
Gute Lesbarkeit und Vielseitigkeit sind die obersten Prioritäten bei der Schriftauswahl.
Unsere Hausschrift ist Manrope.
Absatz
Stile
In einem typischen Design gibt es vier Absatzstile. Sie sind so gestaltet, dass sie maximale Lesbarkeit und eine klare Hierarchie gewährleisten, damit der Inhalt so einfach wie möglich lesbar ist.
Text wird immer linksbündig ausgerichtet, nie im Blocksatz.
Haupttitel
Das sind die grossen, Aufmerksamkeit erregenden Titel. Sie sind kurz (in der Regel nicht länger als fünf Wörter) und es sollte nur einen pro Seite geben.
Haupttitel verwenden immer Manrope Bold.
Untertitel
Untertitel werden verwendet, um Inhalte in Abschnitte zu gliedern und so die Navigation durch die Informationen zu erleichtern. Du kannst sie auch verwenden, um wichtige Punkte hervorzuheben und die Aufmerksamkeit auf wichtige Informationen zu lenken.
Untertitel verwenden immer Manrope Bold.
Lauftext
Dies ist der Standardabsatzstil für Text.
Lauftext verwendet Manrope Regular, aber andere Schriftgrössen sind erlaubt, um Teile des Textes hervorzuheben, einen Punkt zu betonen und die Informationen so deutlich wie möglich zu machen.
Kleingedrucktes
Fusszeilen, Haftungsausschlüsse und alles andere, was vorhanden sein muss, aber nicht im Vordergrund stehen soll.
Wie beim Lauftext sind alle Schriftstärken erlaubt, wobei Manrope Regular der Standard ist.
Grössen
Verwende die Grösse des Lauftextes als Richtwert für die anderen Grössen. Die Standardgrösse für Lauftexte ist 10pt (Druck) oder 18px/1.12rem (Bildschirm).
Untertitel sind zweimal so gross. Das bedeutet eine Standardgrösse von 20pt (Druck) oder 36px/2.24rem (Bildschirm).
Haupttitel sind zwischen 3 bis 4,5 mal so gross, das heisst 30 bis 45pt (Druck) oder 54 bis 81px/3.36 bis 5.3rem (Bildschirm). Wähle eine Grösse, die am besten zu deiner Textmenge passt.
Kleingedrucktes ist 0,6 bis 0,8 mal so gross.
Farben
Titel, Untertitel und Lauftext sind entweder 100% schwarz oder weiss, abhängig von der Farbe des Hintergrunds.
Fusszeilen, Bildlegenden und ähnliches sind in 40% schwarz auf hellen Hintergründen oder 70% schwarz auf dunklen Hintergründen gesetzt.
Für visuelles Interesse kannst du den Titel und die Untertitel mit einem Farbverlauf versehen, der zu deinem Design passt. Du kannst den gesamten Titel/Untertitel einfärben oder einzelne Wörter hervorheben.
Die genauen Farbcodes findest du im Kapitel über Farben in diesem Brand Guide.
Wenn du dem Untertitel eine Farbe gibst, verwende dieselbe Farbe, die du für den Rest der Seite oder des Abschnitts verwendet hast. Mische nie verschiedene Farben.
Abstände
Um die richtige Zeilenhöhe für deinen Lauftext zu erhalten, füge 30% zur Grösse hinzu. Ein Text mit 10pt hätte also eine Zeilenhöhe von 13pt und ein Text von 18px/1.12rem hätte ~23px/1.5rem (aufgerundet).
Die Zeilenhöhe für Untertitel ist gleich gross wie die Schriftgrösse. Das bedeutet sie ist Grösse des Lauftextes * 2.
Die Zeilenhöhe für Haupttitel ist 90% ihrer Grösse. Mit anderen Worten, sie ist (Lauftextgröße * 3-4,5) * 0,9
Der Abstand zwischen Titel und Untertitel sowie zwischen Untertitel und Lauftext sollte weder zu gross noch zu klein sein. Es gibt keine feste Regel, aber eine gute Faustregel ist, einen vollständigen Lauftext-Zeilenumbruch einzufügen.
Titel &
Untertitel
Halte Haupttitel kurz. Sie sollten prägnant sein und die Aufmerksamkeit mit nur wenigen Wörtern, in der Regel nicht mehr als fünf, fesseln. Wenn dein Titel länger ist, sollte er stattdessen ein Untertitel sein.
Auf einer typischen Seite gibt es nur einen Haupttitel.
Verwende Zeilenumbrüche, um Titel und Untertitel aufzulockern. Das macht sie kompakter und gibt dem gesamten Text mehr Raum zum Atmen.
Kolumnen
Unterteile langen Lauftext in zwei Spalten, aber nicht mehr. So bleiben die Zeilenlängen überschaubar. Ziele auf 45 bis 75 Zeichen (einschliesslich Leerzeichen und Satzzeichen) pro Zeile.
Titel und Untertitel erstrecken sich immer über die Spalten.
Beispiele
Hier sind einige Beispiele dafür, wie du Typografie einsetzen und mit Bildern und grafischen Elementen kombinieren kannst.
