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.

Fu?r Headlines und Lauftext verwenden wir den Schriftschnitt Regular ¨C 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.

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.