Text styles ​

...

The font sizes are adjusted based on the viewport width, following the ZDS breakpoints

Heading ​

...

Variables ​

Heading tags ​
Headings ​

Overrides ​

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 /Headings.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 ​

...

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

...

<h1 z-heading="display">

Heading Test

We can use a dark version of the headings by using z-heading="dark" or z-heading="display:dark". But this will be only having an effect on light theme

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 xs (extra small), s (small), m (medium) and l (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

Extra small

400 Regular

Large

Medium

Small

Extra small

500 Medium

Large

Medium

Small

Extra small

600 SemiBold

Large

Medium

Small

Extra small

700 Bold

Large

Medium

Small

Extra 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 s (small) and l (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