Hero Image

Foundation

Typography

Wanted state

In the Design System, we use the following scale for our typography. In the long term, we want to implement this scale on all existing and upcoming sites that live under the Svenska Spel umbrella.

In the Design System all typography runs through the <Typography> component.

Size table

VariantDescriptionRemSize token

Headline-300

<h1>Default</h1>2.986 rem--fs-headline-300

Headline-200

<h2>Default</h2>2.488 rem--fs-headline-200

Subtitle-200

<h3>Default</h3>1.728 rem--fs-subtitle-200

Subtitle-50

<h4>Default</h4>1.2 rem--fs-subtitle-50

Subtitle-25

<h5>Default</h5>1 rem--fs-subtitle-25

Body-200

Use for ingress1.2 rem--fs-body-200

Body-100

<p>Standard</p>1 rem--fs-body-100

Body-90

Small text0.83 rem--fs-body-90

Body-80

Legal text0.694 rem--fs-body-80

Default spacing

All headline-XXX and subtitle-XXX has a default margin top of 1.5 times it's own size and a margin bottom of it's own size divided by 2.

All body-XXX has a margin top and a margin bottom of it's own size.

Remember that margins cancel each other out, so the element with the largest margin will determine the space between two adjacent elements if both have margins.

Cancel spacing

It's possible to cancel the default spacing by passing noMargin, noMarginTop or noMarginBottom to the typography component.

Current state

In the world of trinidad we currently have an old type scale where size ranges from 11 to 36 px - default size is 14 px. .f-content is used in cms-content to increase the font size and em is used instead of px.

Documentation of the old scale can be found here