Skip to content 
Text styles
...
The font sizes are adjusted based on the viewport width, following the ZDS breakpoints
Heading
...
Variables
Heading tags
Headings
Overrides
Attention!
This text style is not included in the /base.scss version of the @zurich/design-tokens library, but it is if you use /index.css. You can also import it individually using /HeadingTags.css, but will require anyway the use of /base.css;
For applying the styles no CSS is required, they will use directly the <h*> tags. If we want to emphasize a word or set of words in the heading with the Ogg font style, you can use the <em> tag inside <h1>, <h2> and <h3>. It won't have any effect on <h4>, <h5> and <h6>.
Here are some examples of the outputs.
<h1>Heading Test
<h2>Heading Test
<h3>Heading Test
<h4>Heading Test
<h5>Heading Test
<h6>Heading Test
z-heading
If you don't want to override the values, or you simply want to have more control over the text style applied to each heading, you can use the z-headingattribute with the value of the corresponding heading to directly apply the style.
z-heading="72"Heading 72
z-heading="60"Heading 60
z-heading="48"Heading 48
z-heading="44"Heading 44
z-heading="36"Heading 36
z-heading="32"Heading 32
z-heading="30"Heading 30
z-heading="28"Heading 28
z-heading="24"Heading 24
z-heading="22"Heading 22
z-heading="20"Heading 20
There's alo a special z-heading value called display:
<h1 z-heading="display">Heading Test
Body
...
The font can be use with the CSS variable pattern --zf-body-<size> or width weight modifier --zf-body-<size>--<?weight>.
- The values for
<size>are16(small),18(medium) and20(large). - The values for
<?weight>are300(forlight),500(formedium),600(forsemibold) and700(forbold). If a weight modifier is not provided, the weight would benormal(400).
The value is set in the font CSS attribute. Example:
300 Light
Large
Medium
Small
400 Regular
Large
Medium
Small
500 Medium
Large
Medium
Small
600 SemiBold
Large
Medium
Small
700 Bold
Large
Medium
Small
Caption
...
As it happens with the body font styles, these ones are also set up with the same mechanisms. This time the format is --zf-capt-<size> (for normal or 400 of font weight) or with weight modifier --zf-capt-<size>--<?weight>.
- The values for
<size>are12(small) and14(large). - The values for
<?weight>are the same as for th body style.
The value is also set in the font CSS attribute. Example:
300 Light
Large
Small
400 Regular
Large
Small
500 Medium
Large
Small
600 SemiBold
Large
Small
700 Bold
Large
Small