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> are 16 (small), 18 (medium) and 20 (large).
  • The values for <?weight> are 300 (for light), 500 (for medium), 600 (for semibold) and 700 (for bold). If a weight modifier is not provided, the weight would be normal (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> are 12 (small) and 14 (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