Skip to content 
Light [300] Regular [400] Medium [500] SemiBold [600] Bold [700] Light Italic [300] Regular Italic [400] Medium Italic [500] SemiBold Italic [600] Bold Italic [700] Regular [400]
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.
Emojis โ
One of the main problems when it comes to the use of emojis between platforms and devices is the consistency of these. To avoid this, we provide an easy way of ensure consistency by using the Noto Color Emoji font in every emoji instance in your texts.
You can import the Emojis.css stylesheet from @zurich/design-tokens:
ts
import '@zurich/design-tokens/Emojis.css';Or via CDN:
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://zds.zurich.com/0.5.15/@zurich/design-tokens/Emojis.css" />
</head>
</html>So instead of the system ones:
๐ถ๏ธ๐ง๐ข๐๐ง๐ญ๐ท๐๐ซ๐ฅ
You will visualize these:
๐ถ๏ธ๐ง๐ข๐๐ง๐ญ๐ท๐๐ซ๐ฅ
Here you have all the available icons.
This allows also the use of emoji ligatures.
Flags emojis โ
In order to avoid the Windows restriction not showing flags when emojis are used, you can import the Flags.css stylesheet from @zurich/design-tokens:
ts
import '@zurich/design-tokens/Flags.css';Or via CDN:
html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://zds.zurich.com/0.5.15/@zurich/design-tokens/Flags.css" />
</head>
</html>Then, you will be capable of visualizing these flags (country-related but also other ones), no matter the OS:
๐ช๐ธ๐ฎ๐จ๐ช๐บ๐ด๓ ง๓ ข๓ ณ๓ ฃ๓ ด๓ ฟ๐จ๐ญ๐ช๐ญ๐ต๐ธ๐น๐ผ๐ญ๐ฐ๐ป๐ฆ๐ฎ๐ฒ๐ฌ๐ฎ๐ต๐ท๐บ๐ณ๐ฆ๐ถ
And also Windows available flags like:
๐ณ๏ธโ๐๐ณ๏ธโโง๏ธ๐๐ดโโ ๏ธ
Compatibility
Notice that even when this is compatible with the unified emojis, the flags override the unified emojis:
System:๐ช๐ธ๐ณ๏ธโ๐๐ฌ๐ฎ
Emojis:๐ช๐ธ๐ณ๏ธโ๐๐ฌ๐ฎ
Flags:๐ช๐ธ๐ณ๏ธโ๐๐ฌ๐ฎ
Flags + Emojis:๐ช๐ธ๐ณ๏ธโ๐๐ฌ๐ฎ
This approach uses Mozilla's Twemojis polyfill.