Typography

Use typography to present content as clearly and efficiently as possible.

Overview

Too many type sizes and styles at once can spoil any layout. A limited set of type variations are supported that work well with each other.

Usage Guide

Legend

✅ recommended ⚠️ use with caution ❌ do not use

Headline Text

	xlarge	large	medium	small
On-boarding Wizard	✅	⚠️	⚠️	❌
Page Title	⚠️	✅	⚠️	❌
Section Title	❌	❌	✅	✅
Dialog Title	❌	❌	✅	❌
Drawer Title	❌	✅	✅	✅
Popover Title	❌	❌	❌	✅

Body Text

	xlarge	large	medium	small
Paragraph	⚠️	✅	⚠️	❌
Table Cell	⚠️	⚠️	⚠️	✅
Single Piece of Data	❌	✅	⚠️	⚠️
Helper Text	❌	⚠️	✅	✅
Meta Data	❌	⚠️	⚠️	✅

Pairing

Our Typography uses semantic naming to pair sizes which helps with the consistency in overall application as well as the visual hierarchy and space management. This pairing method is ideal for text components that are directly or semi-directly related or grouped together in a card or section.

Pairing Examples

Demo

Demo

Use same size for sibling items.

Demo

Deviation

In some cases where you need higher contrast between headline and body, headline can size up one or body can size down one. Do not deviate up with body text, the body text and headline size would be the same creating ineffective typographical hierarchy.