Typography

Usage

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

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

Principles

• Use black (--color-black-90) or white (--color-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 are 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 the 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 the 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 scales, custom scales can be also used.

You can use helper classes provided in the Core package to match each heading size with the correct line height and letter spacing.

Heading scales

The heading font size tokens allow two different heading scales to be used. The default heading scale is suitable for desktop screen sizes. The small heading scale is used on mobile devices and it can be also used on information-heavy user interfaces (e.g. admin panels).

Body text sizes

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

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 a smaller Body M (16 px) token for mobile breakpoints breakpoint-s and breakpoint-xs.

Line height

Line height tokens can be used to control the spacing between lines of text. The tokens define the ratio between line height and element font size. Note that HDS heading and text tokens use their line-height values to ensure line-height applies to 4 point grid. You can use helper classes provided in the Core package to match each heading and body text style with the correct line-height.

Font weights

HDS typography uses three font weights.