Typography
Typography is essential to communicate and establish hierarchies of content in pages while creating a consistent brand experience throughout our products.
Fonts
Zurich Sans and Ogg are Zurich's official type fonts. You can download the fonts from BlueRoom.
Zurich Sans
Use Zurich Sans as the default font for any type of text content, which is to say in headings, body copies and captions.
The font and the fallbacks is saved in a CSS variable called --zf-sans.
Regular
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
Italic
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
Ogg
Use Ogg in combination with Zurich Sans to emphasise important concepts on your headings. Keep in mind that Ogg can be used as “Display”, “H1” and “H2” only.
The font and the fallbacks is saved in a CSS variable called --zf-ogg.
A B C D E F G H I J K L M N O P Q R T S U V W X Y Z
a b c d e f g h i j k l m n o p q r t s u v w x y z
0 1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( )
Considerations
Text styles and hierarchy
To create an appropriate hierarchy and enhance legibility for your page content, make sure you use the correct style and text size:
- Headings: used to create levels of typographic hierarchies.
- Body: used for blocks of text, links, buttons and ZDS components.
- Caption: used to specify extra information.
Line height
Line height, also known as leading, controls the amount of space between baselines in a block of text. It helps to create a clear channel of white space between lines of text to guide the eye to start reading the next line. A text’s line height is proportional to its type size. All font styles have a predefined line height.
Paragraph spacing
Just as you can format spacing between lines in your document, you can adjust spacing before and after paragraphs. This is useful for separating paragraphs, headings and subheadings. Keep in mind that you can use larger spacing as a way to emphasise a title or paragraph. You can find more information in Spacing.
Justification
The font justification is a variable that can be changed according to your needs (left, center or right). Left justification is the easiest to read for the majority of the users. Avoid using fully justified content as it makes reading harder.
Color
Text colors serve a specific purpose and help communicate meaning. By default, text color on a light background should be Dark Blue, and White on a dark background.