Typography

Tallinn Design System typography is based on the Lab Grotesque  typeface. The font licenses can be purchased from the Letters from Sweden website.

If the use of Lab Grotesque is not possible (for example in documents, emails, presentations etc), it may be substituted with Arial.

Heading styles

All headings in TDS use fluid type scale. Font size is fixed for mobile and desktop screens and scales smoothly between them. CSS media queries are not used for headings.

Display heading

Display heading is used for large headlines on hero banners.

Do not use for regular page headings.

Font weight: bold (700)

Line height: 1.1

Regular headings

Regular headings are used for page/section headings, subheadings and less prominet headings on hero banners.

Use heading levels semantically. For example after <h1>, next heading on the same page should be <h2>, not <h3>. Heading styles by themselves are level agnostic, that means Medium size heading could be <h1> and Large could be <h2>, if need be.

• Large — main page headings (h1). Can also be used for section headings on home pages for example.
• Medium / Small / xSmall — subheadings in articles and forms, card headings etc.

Font weight: bold (700)

Line height: 1.2

Text styles

TDS has two types of text styles, body text and UI text.

Body text styles are primarily used for the main content on a page. UI text styles are used for any text labels in buttons, forms, navigation components etc.

Text styles have font sizes defined for small and large screens and responsive sizing is handled by CSS media queries.

Body text

UI text

Body text

Default font weight is regular (400), bold (700) can be used to emphasize parts of text. Line height has a same unitless value for all styles.

• Large — lead text in articles. Can also be used for block quotes or for highlighting other short content.
• Medium — primary body text.
• Small — less important body text. Can also be used as a primary text style in large data tables and other data heavy layouts.

Do not use body text styles for labels in buttons, forms and navigation components. Use UI text styles instead.

Font weight: regular (400) / bold (700)

Line height: 1.5

UI text

Both regular (400) and bold (700) weights can be used. Line height is defined separately for all styles in rems.

Do not use UI text styles for article body copy. Use body text styles instead.

--ui-text-md-mobile: 1rem;