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.
- Use Nordea Sans Small for body text and headlines which are up to 18px in size
- Use Nordea Sans Large for headlines and text which are larger than 22px in size
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
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
Guidelines to follow
Follow these guidelines to meaningfully apply typography principles:
Sources
- Nielsen Norman Group: Legibility, Readability, and Comprehension: Making Users Read Your Words
- Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.4.12 Text Spacing
- Web Content Accessibility Guidelines (WCAG) 2.1: Success Criterion 1.4.3 Contrast (Minimum)