Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
BreakpointsColourSpacingTypographyPrinciplesAccessibilityUsageTokens
Components
Patterns
About
Contributing
Resources

Typography

Typography tokens are used to define typographic style of headings, body text and HDS components.

Typography can be used to organise information and help users find their way around our services. For example using heading levels in a clear and consistent way helps users to understand the hierarchy and structure of the page.

Typography is also an essential part of the City of Helsinki brand identity. Helsinki Design system typography is based on the propiretary Helsinki Grotesk typeface. Preferably, no other typefaces should be used. The font licenses can be purchased from the Camelot Typefaces website.

Principles

  • Use black or white text colour depending on the background. Other text colours should be used intentionally, if at all.
  • Use typography consistently throughout your service, to ensure that the content hierarchy and structure is clear and easily understandable.
  • Use heading levels semantically. For example after h1, next heading on the same page should be h2, not h3. If needed, the appearance and visual hierarchy of headings can be altered separately from semantic structure with the font size tokens.

Accessibility

  • Always check that sufficient colour contrast between text and its background is maintained. All colour choices should comply with WCAG 2.1 Standard at AA Level contrast ratios.
  • Avoid placing text over images, especially in small sizes.

Usage

The HDS offers two different sets of font size tokens for heading and body text. The tokens define font size in rem values.

Heading sizes

The heading font size tokens are heading level agnostic. This allows you to fit the heading scale to the specific needs of the service. In addition to predefined default and small heading scale, custom scales can be also used.

Heading XL (52 px)

Heading L (36 px)

Heading M (24 px)

Heading S (20 px)

Heading XS (18 px)
Heading XXS (16 px)
Token sizepx valuerem valueDefault heading scaleSmall heading scale
Branding and user interface of most services.Information heavy layouts and admin interfaces.
Heading XL52 px3.25

Heading h1

Heading L36 px2.25

Heading h2

Heading h1

Heading M24 px1.5

Heading h3

Heading h2

Heading S20 px1.25

Heading h4

Heading h3

Heading XS18 px1.125
Heading h5

Heading h4

Heading XXS16 px1
Heading h5

Body text sizes

Body font size tokens allow more subtle variations of body text sizes for improved content hierarchy and legibility.

Body XL (20 px)
Body L (18 px)
Body M (16 px)
Body S (14 px)
Token sizepx valuerem valueUsage
Body XL20 px1.25Emphasising short introductory texts and other subtiles.
Body L18 px1.125Improving legibility of essential components, e.g. Text input and other form fields. Can also be used as the default body text size if the layout is not text heavy.
Body M16 px1Body text default.
Body S14 px0.875Conserving space in data heavy layouts and small components, e.g. Status label.

When choosing the body text size, start with the default Body M (16 px) token. It is a good starting point for most text heavy user interfaces. This is also the minimum for the body text size in Helsinki services. This body text size can be used on all screen sizes.

The smaller Body S (14px) token should only be used in secondary text content and inside components.

If your service is not text heavy, you can experiment with using the Body L, 18px token as the default body text size. In this case, it is recommended to use smaller Body M (16 px) token for mobile breakpoints breakpoint-s and breakpoint-xs.

Line height

Line height tokens can be used to control spacing between lines of text. The tokens define the ratio between line height and element font size.

Line height S (1) / Body font size M – This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens.

Line height M (1.2) / Body font size M – This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens.

Line height L (1.5) / Body font size M – This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens.

Line height XL (1.75) / Body font size M – This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens. This is an example text to demonstrate line height tokens.

Token sizeRatioUsage
Line height S1Buttons, navigation and other UI components.
Line height M1.2Headings, lead texts and short paragraphs (no longer than 2-3 sentences).
Line height L1.5Body text default. Optimal for longer text content and extended reading.
Line height XL1.75Smaller text sizes or if you need to emphasise text (i.e. quotes).

Font weights

HDS typography uses three font weights.

Regular (400)

Medium (500)

Bold (700)

Weightcss valueUsage
Regular400Body text default.
Medium500Used for labels in components e.g. Button and form components.
Bold700Heading default. Used to emphasise body text.

Tokens

CSSSASSvalueExample
--font-default$font-defaultHelsinkiGrotesk
--fontsize-heading-xl$fontsize-heading-xl3.25 remAa
--fontsize-heading-l$fontsize-heading-l2.25 remAa
--fontsize-heading-m$fontsize-heading-m1.5 remAa
--fontsize-heading-s$fontsize-heading-s1.25 remAa
--fontsize-heading-xs$fontsize-heading-xs1.125 remAa
--fontsize-heading-xxs$fontsize-heading-xxs1 remAa
--fontsize-body-s$fontsize-body-s0.875 remAa
--fontsize-body-m$fontsize-body-m1 remAa
--fontsize-body-l$fontsize-body-l1.125 remAa
--fontsize-body-xl$fontsize-body-xl1.25 remAa
--lineheight-s$lineheight-s1
--lineheight-m$lineheight-m1.2
--lineheight-l$lineheight-l1.5
--lineheight-xl$lineheight-xl1.75