Typografie
Schriftart und Schriftschnitte
Für alle Webanwendungen im Coporate Design wird die Hausschrift der ETH Zürich «DIN Next» eingesetzt. Die Lizenz für den Web-Font und den App-Font kann über den IT-Shop bezogen werden. Alternativ zur Din Next kann die Systemschrift Arial oder Helvetica verwendet werden.
Für Headlines und Lauftext verwenden wir den Schriftschnitt Regular – zur Auszeichnung Bold, Italic und Bold Italic. Wir verwenden Auszeichnungen sparsam und nur dort, wo es dem raschen Erfassen des Inhalts dient. Unterstreichungen sind ausschliesslich der Auszeichnung von Textlinks vorbehalten.
Schriftgrössen
Folgende Schriftgrössen werden für digitale Anwendungen eingesetzt. Kleinere Schriftgrössen als 12 Pixel sind nicht zulässig.
Responsive Typografie
Zeilenabstand
Bei digitalen Touchpoints ist der Zeilenabstand von der Schriftgrösse und dem Anwendungszweck abhängig und wird in einem Multiplikationsfaktor angegeben. Der Multiplikationsfaktor des Zeilenabstands verkleinert sich mit wachsender Schriftgrösse.
Grössenkurven
Die Grösse der Schriften wachsen 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 keine fixe Grösse, sondern wird einer Grössenkurven zugewiesen. Auf unterschiedlichen Bildschirmgrössen skaliert die Schriftgrösse gemäss dieser Definition.
Um die Schriftgrössen auf den unterschiedlichen Screengrössen zu steuern, wird im Frontend eine Schriftgrösse nicht als fixer Wert definiert, sondern als berechnete Grösse, die im Verhältniss zum Viewport steht. In Designvorlagen sind die Werte anhand der unterstehenden Tabelle als stabile Werte angewendet.