Text styles
...
The font sizes are adjusted based on the viewport width, following the [ZDS breakpoints](../foundations/breakpoints.md.
Heading
...
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 cna 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 z-heading="display">
Heading Test
<h1>
Heading Test
<h2>
Heading Test
<h3>
Heading Test
<h4>
Heading Test
<h5>
Heading Test
<h6>
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>
arexs
(extra small),s
(small),m
(medium) andl
(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
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>
ares
(small) andl
(large). - The values for
<?weight>
are the same as for th body style.
The value is also set in the font
CSS attribute. Example: