Grundlagen

Die Typografie ist hierarchisch ausgewogen strukturiert. Sie führt Nutzende intuitiv zu den gewünschten Informationen. Zur Gestaltung und Strukturierung von Inhalten nutzen wir die Schrift Helvetica Now Black und Roman. Die hier definierten Schriftstile bilden die Basis von Webseiten und deren Komponenten.

Schrift

Für alle Web-Anwendungen setzen wir die Schrift Helvetica Now ein. Zur Gestaltung und Strukturierung von Inhalten nutzen wir die Schriftschnitte Black und Regular. Black dient primär für Titel und Auszeichnungen, unterstrichen werden ausschliesslich Links.

Helvetica Now

• Black
• Regular

Lizenzbestimmungen

Lizenzen für Helvetica Now Text Regular und Black können beispielsweise bei Fontshop.com bezogen werden.

Ab 2023 kann die Staatskanzlei keine Lizenzen für Webfonts mehr an andere kantonale Stellen weitergeben. Webangebote ausserhalt von zh.ch müssen ihre eigenen Lizenzen beziehen.

Die Lizenzen für Editoren in Figma muss jede Organisation/Agentur selber kaufen.

Für Desktop-Lizenzen auf dem DAP ist das Amt für Informatik zuständig.

Schriftgrössen

Die aufgeführten Schriftgrössen und Zeilenabstände werden im Web standardmässig eingesetzt.

Zu beachten

Die Angaben gelten für die Designvorlagen. Die effektiven Grössen im Browser werden anhand der Gerätegrösse berechnet und können daher von den Vorgaben abweichen.

Schrift Skalierung

Die Grösse der Schriften wächst mit der Grösse des Viewports. Wie sich einzelne Titel und Texte über die verschiedenen Breakpoints hinweg verhalten, ist in Grössenkurven definiert. Diese Kurven geben vor, wie stark sich eine Schriftgrösse verändert. Ein Titel hat also nicht einfach eine fixe Grösse, sondern wird einer dieser Grössenkurven zugewiesen und skaliert dann entsprechend auf den unterschiedlichen Geräten.

Titel

Diese Textdarstellungen und Titelhierarchien verwenden wir im Web. Alle Texte sind linksbündig ausgerichtet.

H1 Web

• Der H1 für Webseiten ist Teil des Seitenkopfs
• Der H1 Web hat die Schriftgrössenkurve Huge
• Varianten: Positive/Negative

H1 App

• Der H1 für Web-Applikationen ist Teil des Inhaltsbereichs.
• Der H1 App hat die Schriftgrössenkurve Big.
• Positive Variante Schwarz.

H2 Web

• Der H2 für Webseiten ist Teil der Layoutspalte.
• Der H2 Web hat die Schriftgrössenkurve Big.
• Positive Variante mit und ohne Trennlinie.

H2 App

• Der H2 für Web-Applikationen ist Teil des Inhaltsbereichs.
• Der H2 App hat die Schriftgrössenkurve Medium.
• Positive Variante Schwarz.

H3 Web

• Der H3 für Webseiten ist Teil der Layoutspalte.
• Der H3 Web hat die Schriftgrössenkurve Medium.

H3 App

• Der H3 für Web-Applikationen ist Teil des Inhaltsbereichs.
• Der H3 App hat die Schriftgrössenkurve Regular.

H4 Web/App

• Der H4 für Webseiten und Web-Applikationen ist Teil der Layoutspalte.
• Der H4 Web/App hat die Schriftgrössenkurve Regular.
• Der H4 kann eine Nummerierung aufweisen.

H5 Web/App

• Der H5 für Webseiten und Web-Applikationen ist Teil der Layoutspalte.
• Der H5 Web/App hat die Schriftgrössenkurve Regular.
• Der H5 kann eine Nummerierung aufweisen.

Text

Lead

• Steht immer direkt unter dem H1.
• Der Lead hat die Schriftgrössenkurve BiggerRegular.
• Ausrichtung ist linksbündig.
• Wird bei Seitentypen angewendet mit einen Seitenkopf für Web-Anwendungen.

Lauftext

• Ausrichtung ist linksbündig.
• Der Text hat die Schriftgrössenkurve Regular.

Auszeichnung

• Die Auszeichnung setzt den Text in Black.
• Der Text hat die Schriftgrössenkurve BiggerRegular.
• Die Auszeichnung wird mit der Akzentfarbe dargestellt.

Listen

• Eine Liste hat maximal zwei Hierarchiestufen. 
• Einfache Links sind erlaubt. 
• Wenn immer möglich definieren wir kurze Beschreibungen für einen Listeneintrag (keine Texte mit vielen Zeilen).

Nummeriert

1. Die Aufzählung hat die Schriftgrössenkurve Regular.
2. Die Nummer wird in Black und in der Akzentfarbe dargestellt.

Aufzählung

• Die Aufzählung hat die Schriftgrössenkurve Regular.
• Nur Strichlisten sind zulässig (keine Punkte).

Checkliste

Vorteile:

• Die Aufzählung hat die Schriftgrössenkurve Regular.
• Der Listeneintrag wird mit dem Checkbox-Icon und in der Akzentfarbe dargestellt.

Legenden