Typography
Typography establishes hierarchy and readability throughout the checkout.
Font families
- Headings:
Swedbank Headline - Body text:
Arial
Ligatures are disabled:
'liga' off'clig' off
Title
Used for:
- Card titles
- Section headers in mobile layouts
Properties
- Font family: Swedbank Headline
- Font size: 20px
- Font weight: 700
- Line height: 28px (140%)
- Color:
--Text-Default
Body text
Used for:
- Descriptions
- Instructions
- Supporting text
Properties
- Font family: Arial
- Font size: 16px
- Font weight: 400
- Line height: 24px (150%)
- Color:
--Text-Default
Links
Links are visually distinguishable from body text and clearly indicate interactivity.
Links must:
- Meet contrast requirements
- Have visible focus indicators
- Not rely on color alone where ambiguity could occur