Typography
To ensure consistency, the Design System includes a set of typography styles that can be used in all components and products.
Values
We have CSS custom properties and 'Figma Variables' for font-size, line-height and font-weight.
Although you can style text using these directly, it is recommended to use our defined styles, as these apply the suggested font size + line-height pairings.
- In Figma these are provided as 'Text styles'.
- In development these are provided as scss mixins.
Style pairing / Typography mixins
| style | font-size | line-height |
|---|---|---|
| style-0-5 | --font-size-0-5 | --line-height-0-75 |
| style-0-75 | --font-size-0-75 | --line-height-1 |
| style-1 | --font-size-1 | --line-height-1-5 |
| style-1-5 | --font-size-1-5 | --line-height-1-5 |
| style-2 | --font-size-2 | --line-height-2 |
| style-3 | --font-size-3 | --line-height-2-5 |
| style-4 | --font-size-4 | --line-height-3-5 |
| style-5 | --font-size-5 | --line-height-4 |
| style-6 | --font-size-6 | --line-height-4-5 |
| style-7 | --font-size-7 | --line-height-5 |
| style-8 | --font-size-8 | --line-height-6 |
| style-9 | --font-size-9 | --line-height-6-5 |
font-size
| Property | Value | px eqv. (1rem = 16px) |
|---|---|---|
--font-size-0-5 | 0.5rem | 8px |
--font-size-0-75 | 0.75rem | 12px |
--font-size-1 | 1rem | 16px |
--font-size-1-5 | 1.25rem | 20px |
--font-size-2 | 1.5rem | 24px |
--font-size-3 | 2rem | 32px |
--font-size-4 | 2.5rem | 40px |
--font-size-5 | 3rem | 48px |
--font-size-6 | 3.5rem | 56px |
--font-size-7 | 4rem | 64px |
--font-size-8 | 4.5rem | 72px |
--font-size-9 | 5rem | 80px |
line-height
| Property | Value | px eqv. (1rem = 16px) |
|---|---|---|
--line-height-0-75 | 0.75rem | 12px |
--line-height-1 | 1rem | 16px |
--line-height-1-5 | 1.5rem | 24px |
--line-height-2 | 2rem | 32px |
--line-height-2-5 | 2.5rem | 40px |
--line-height-3 | 3rem | 48px |
--line-height-3-5 | 3.5rem | 56px |
--line-height-4 | 4rem | 64px |
--line-height-4-5 | 4.5rem | 72px |
--line-height-5 | 5rem | 80px |
--line-height-5-5 | 5.5rem | 88px |
--line-height-6 | 6rem | 96px |
--line-height-6-5 | 6.5rem | 104px |
font-weight
| Property | Value |
|---|---|
--font-weight-regular | 400 |
--font-weight-bold | 700 |
Implementation
Figma
If the Design System Library has been added to your file, these 'Text styles' should be available for you to apply to text elements.
Development
Load the typography mixins into your stylesheet:
@use "@raspberrypifoundation/design-system-core/scss/mixins/typography" as
typography;
Use the mixin in your styles:
.some-text {
@include typography.style-3;
}
.some-bold-text {
@include typography.style-3(bold);
}
More detailed development usage can be found in the Core Storybook.
Inspecting typography in Figma
In Figma 'Text styles" can be applied to text elements. 'Styles' in Figma can be thought of an equvialent to mixins as it combines a selection of styles.
For example, when the style-1 is applied to a text element the following Figma Variables (CSS custom properties) are applied:
- Font family:
font-family-primary - Font size:
font-size-1 - Line height:
line-height-1-5 - Font weight:
font-weight-regular
So when inspecting a text element in Figma in dev mode, you will see a CSS code snippet that looks like this:
/* regular/style-1 */
font-family: var(--font-family-primary, Roboto);
font-size: var(--font-size-1, 1rem);
font-style: normal;
font-weight: var(--font-weight-regular, 400);
line-height: var(--line-height-1-5, 1.5rem);
The CSS comment shown at the top of the code snippet should be used to inform you of what mixin to use. So in this example, that would be:
.text {
@include typography.style-1;
}
regular/... appears in the CSS comments as this comment is generated using the the groups used in Figma to organise the 'Styles'. Unfortunately there is not currently better way for us to present this or a way to just provide a code snippet for the mixin.
Guidelines
Style pairings
In designs we try to use the style pairings where possible for consistency. However it is you can use custom pariring if the required, but still try to stick to using the predefined font-size and line-height variables.