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> 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