Typo­gra­fie

Die Typografie ist der Schlüssel zur Smart Chip Marke. Sie prägt, wie Menschen unsere Botschaft sehen und verstehen. Die konsequente Verwendung unseres Schriftbildes sorgt für Klarheit und stärkt die Wiedererkennung, was vor allem mit unserem flexiblen und sich weiterentwickelnden visuellen Stil wichtig ist.

Schrift­art

Gute Lesbarkeit und Vielseitigkeit sind die obersten Prioritäten bei der Schriftauswahl. Unsere Hausschrift ist Manrope, sowohl in gedruckter Form als auch auf digitalen Geräten.

Manrope Regular

Manrope Bold

Manrope ExtraBold

Head­lines & Begleit­text

Wir unterscheiden zwischen zwei Anwendungsbereichen für unsere typografischen Regeln: Head­lines und Begleittext.

Head­lines sind die grossen Titel auf Postern, Plakaten, Bannern und mehr. Sie sollen Aufmerksamkeit erregen und die Leute dazu bringen, stehen zu bleiben, hinzuschauen und sich zu erinnern.

Begleittext ist alles, was über die Headline hinausgeht. Nachdem die Headline die Aufmerksamkeit erregt hat, liefert der Begleittext die Details.

Head­lines

Headlines sind dafür gemacht, flexibel zu sein. Ihre Grösse ist nicht in Stein gemeisselt und hängt stattdessen vom Rasterlayout, der Grösse des Containers und mehr ab. Mehr darüber erfährst du in dem Abschnitt über Layouts.

Schriftstärke

Headlines werden in der Regel in Manrope Regular gesetzt. Manrope Regular.

Wenn du eine Headline über ein Bild legst, kannst du für mehr Kontrast Manrope Bold oder Extra Bold verwenden.

Farbe

Du kannst einen Teil der Headline mit einem Farbverlauf aus der Farbpalette hervorheben. Das kann ein ganzer Satz oder einzelne Wörter sein, aber niemals die ganze Headline. Verwende die Farbe, um einen Punkt zu betonen.

Wähle einen Farbverlauf, der das Bild ergänzt. Er kann entweder eine dominante Farbe im Bild widerspiegeln, ein auffälliges Detail aufgreifen oder einfach zur Stimmung passen.

Achte auf einen möglichst hohen Kontrast und gute Lesbarkeit, wenn du eine Headline auf einem Bild platzierst.

Zwinge keine Farbe in den Text - wenn der Hintergrund unruhig ist, sollte der gesamte Text schwarz oder weiss bleiben, um so klar und lesbar wie möglich zu sein. Verwende farbigen Text nur, wenn er auf einem ausreichend ruhigen Hintergrund platziert ist.

Zeilenabstand & Laufweite

Der Zeilenabstand für Headlines entspricht in der Regel der Grösse der Headline. Eine Schriftgrösse von 50 pt ergibt einen Zeilenabstand von 50 pt, als Beispiel.

Wir lassen die Laufweite bei 0%.

Begleit­text

Begleittext sind alle Texte neben der Headline - Textzeilen, CTAs und mehr. Wie der Name schon sagt, ist der Begleittext dazu da, die Headline zu begleiten und zu unterstützen. Er ist nicht dazu da, die Aufmerksamkeit auf sich zu ziehen - das ist die Aufgabe der Headline. Stattdessen soll er zusätzliche Informationen so klar wie möglich vermitteln.

Absatzstile

Es gibt vier Absatzformate für Begleittext. Sie sind so gestaltet, dass sie eine maximale Lesbarkeit und eine klare Hierarchie gewährleisten und den Inhalt so leicht wie möglich lesbar machen.

Begleittext wird immer linksbündig ausgerichtet.

Haupttitel sind die grossen, aufmerksamkeitserregenden 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 Manrope Bold oder Extra Bold.

Untertitel werden verwendet, um Inhalte in Abschnitte zu gliedern und so die Navigation in den Informationen zu erleichtern. Du kannst sie auch verwenden, um wichtige Punkte hervorzuheben oder um auf wichtige Informationen aufmerksam zu machen.

Untertitel verwenden immer Manrope Bold.

Lauftext ist der Standardstil für Text.

Lauftext verwendet Manrope Regular, aber andere Schriftschnitte sind erlaubt, um Teile des Textes hervorzuheben, einen Punkt zu betonen und die Informationen so deutlich wie möglich zu machen.

Kleingedrucktes sind Fusszeilen, Haftungsausschlüsse und alles andere, was vorhanden sein muss, aber nicht im Vordergrund stehen soll.

Wie beim Lauftext sind alle Schriftschnitte 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 einen Standardwert von 20pt (Druck) oder 36px/2,24rem (Bildschirm).

Haupttitel sind zwischen 3 bis 4,5 mal so gross, also 30 bis 45 pt (Druck) oder 54 bis 81 px/3,36 bis 5,3 pm (Bildschirm). Wähle eine Grösse, die am besten zu deiner Textmenge passt.

Kleingedrucktes ist 0,6 bis 0,8 mal so gross.

Zeilenabstand & Laufweite

Haupttitel und Untertitel verwenden einen Zeilenabstand von 100%.

Lauftext bekommt etwas mehr Spielraum mit einem Zeilenabstand von 130%.

Die Laufweite ist immer 0%.

Farbe

Titel, Untertitel und Lauftext sind entweder 100% schwarz oder weiss, abhängig von der Farbe des Hintergrunds.

Kleingedrucktes ist in 70% Helligkeit auf hellen Hintergründen oder 30% Helligkeit auf dunklen Hintergründen gesetzt.

Wie bei den Headlines kannst du auch bei den Haupttiteln und Untertiteln eine Farbe aus der Farbpalette wählen, um Wörter oder Sätze hervorzuheben.

Zeilenumbrüche

Verwende Zeilenumbrüche zum Auflockern der Haupttitel und Untertitel. Das macht sie kompakter und gibt dem ganzen Text mehr Raum zum Atmen.

Titellänge

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 wahrscheinlich stattdessen ein Untertitel sein.

Auf einer typischen Seite gibt es nur einen Haupttitel.

Zeilenlängen

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.

Haupttitel und Untertitel überspannen immer die Spalten.

Beispiele

Dies sind einige Beispiele dafür, wie du unterstützenden Text verwenden und ihn mit Bildern und grafischen Elementen kombinieren kannst.

Beispiele für Headlines findest du im Abschnitt über Layouts.

Don'ts

Bitte vermeide die folgenden Fehler.

Achte darauf, dass die Buchstabenabstände nicht zu eng sind.

Achte darauf, dass die Buchstabenabstände nicht zu locker sind.

Verwende keine anderen Schriftarten.

Verwende nicht alle Großbuchstaben.

Richte den Text nicht rechtsbündig aus.

Füge keine Effekte wie Schlagschatten oder Konturen hinzu.