Typography
Fonts and font styles
DIN Next is the house font used by ETH Zurich for all web applications subject to the corporate design guidelines. You can obtain the licence for the web font and app font in the IT Shop. Alternatively, the system font Arial can be used instead of DIN Next.
For headlines and running text, we use the “Regular” style. To highlight information we also use bold, italic and bold italic styles. We only use these styles sparingly and where they aid comprehension. Underlining is only used for links.
Font size
The following font sizes are used for digital applications. Font sizes under 12 points are not permitted.
Responsive typography
Line spacing
For all digital touchpoints, line spacing depends on the font size and purpose of the application. Spacing between lines of text is given as a multipler that gets smaller as the font size increases.
Responsive font sizes
The size of the font increases as the size of the viewport grows. A responsive font size table defines how certain titles and text behave across different breakpoints. The table sets out how much the font size changes. This means that a webpage title, for instance, does not have a fixed size but rather changes according to the table. The font size will scale accordingly to adapt to different screen sizes.
To make this possible, the frontend doesn’t define the font size as a fixed value, but as a size calculated in relation to the size of the viewpoint. Our design templates use the values outlined in the table below.