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
Variant | Description | Rem | Size 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 ingress | 1.2 rem | --fs-body-200 |
Body-100 | <p>Standard</p> | 1 rem | --fs-body-100 |
Body-90 | Small text | 0.83 rem | --fs-body-90 |
Body-80 | Legal text | 0.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