Login

Typography

Introduction

Last updated: 22 October 2024, 12:32 by Daniel Wysocki

Typography refers to the application of text styles to create clear hierarchies, organise information, and guide users through a product.

Principles

We use Nordea Sans as the primary typeface.

  1. Use Nordea Sans Small for body text and headlines which are up to 18px in size
  2. Use Nordea Sans Large for headlines and text which are larger than 22px in size

 

Nordea Sans font examples

 

Clear structure
  • Use left-alignment or centre-alignment for text. Nordea operates in countries where native users typically read from left to right
  • Use short sentences and limit the paragraph length¹
  • Set line height (line spacing) to at least 1.5 times the font size.² Use the defined Nordea Design System line height values
  • Use writing techniques and tips to structure text clearly
  • All text blocks should have a maximum width of 744px

 

Accessible
  • Ensure sufficient contrast between text and background³
  • Use short sentences and limit the paragraph length¹
  • Use writing techniques and tips to structure text clearly
  • Avoid using bolder font weights in smaller text sizes

Styles

Nordea Sans Small Regular

Mobile
Web
Text
Font size
Line height
.SmallRegular
font-small, regular

The quick brown fox jumps over the lazy dog

12px / 0.75rem
16px / 1rem
.MediumRegular
font-medium, regular

The quick brown fox jumps over the lazy dog

14px / 0.875rem
20px / 1.25rem
.LargeRegular
font-large, regular
The quick brown fox jumps over the lazy dog
16px / 1rem
24px / 1.5rem
.xLargeRegular
font-xlarge, regular
The quick brown fox jumps over the lazy dog
18px / 1.125rem
26px / 1.625rem

Textual link

Mobile
Web
Text
Font size
Line height
.SmallRegular
font-small, regular
12px / 0.75rem
16px / 1rem
.MediumRegular
font-medium, regular
14px / 0.875rem
20px / 1.25rem
.LargeRegular
font-large, regular
16px / 1rem
24px / 1.5rem

Nordea Sans Small Medium

Mobile
Web
Text
Font size
Line height
.SmallMedium
font-small, medium

The quick brown fox jumps over the lazy dog

12px / 0.75rem
16px / 1rem
.MediumMedium
font-medium, medium

The quick brown fox jumps over the lazy dog

14px / 0.875rem
20px / 1.25rem
.LargeMedium
font-large, medium
The quick brown fox jumps over the lazy dog
16px / 1rem
24px / 1.5rem

Nordea Sans Small Bold

Mobile
Web
Text
Font size
Line height
.MediumBold
font-medium, bold

The quick brown fox jumps over the lazy dog

14px / 0.875rem
20px / 1.25rem
.LargeBold
font-large, bold
The quick brown fox jumps over the lazy dog
16px / 1rem
24px / 1.5rem
.xLargeBold
font-xlarge, bold
The quick brown fox jumps over the lazy dog
18px / 1.125rem
26px / 1.625rem

Nordea Sans Large Bold

Mobile
Web
Text
Font size
Line height
.xxLargeBold
font-xxlarge, bold

The quick brown fox jumps over the lazy dog

22px / 1.375rem
30px / 1.875rem
.xxxLargeBold
font-xxxlarge, bold

The quick brown fox jumps over the lazy dog

26px / 1.75rem
32px / 2rem
.xxxxLargeBold
font-xxxxlarge

The quick brown fox jumps over the lazy dog

30px / 1.875rem
36px / 2.25rem
.xxxxxLargeBold
font-xxxxxlarge

The quick brown fox jumps over the lazy dog

36px / 2.25rem
44px / 2.75rem

Figma preview

Open in Figma

Guidelines to follow

Follow these guidelines to meaningfully apply typography principles:

Sources

  1. Nielsen Norman Group: Legibility, Readability, and Comprehension: Making Users Read Your Words
  2. Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.4.12 Text Spacing
  3. Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.4.3 Contrast (Minimum)