UI Concepts Framework · CHAPTER 6 OF 8
The typography system
Step 6 Define Typography
Start With the Brand Guidelines
Review the typography provided in the brand guidelines, but check whether it is practical for the software.
The goal is to maintain brand consistency without reducing readability.
Start With the Brand Guidelines
Review the typography provided in the brand guidelines, but check whether it is practical for the software.
The goal is to maintain brand consistency without reducing readability.
Brand Fonts May Not Work Everywhere
Upload video
Brand Fonts May Not Work Everywhere
Upload video
Use a Maximum of Two Fonts
More Fonts Create More Inconsistency
A software interface should use no more than two font families.
Too many fonts can weaken hierarchy, reduce consistency, and make the interface feel visually fragmented.
Heading - 1
Heading - 2
Heading - 3
Heading - 3
Heading - 4
Heading - 5
Sub-heading - 1
Sub-heading - 2
Sub-heading - 3
Sub-heading - 4
Sub-heading - 5
Use a Maximum of Two Fonts
More Fonts Create More Inconsistency
A software interface should use no more than two font families.
Too many fonts can weaken hierarchy, reduce consistency, and make the interface feel visually fragmented.
Heading - 1
Heading - 2
Heading - 3
Heading - 3
Heading - 4
Heading - 5
Sub-heading - 1
Sub-heading - 2
Sub-heading - 3
Sub-heading - 4
Sub-heading - 5
Option 1: Use One Font Family
Option 1: Use One Font Family
Expressive Font
Use two complementary font families when one font cannot handle both brand expression and interface readability.
Use two complementary font families when one font cannot handle both brand expression and interface readability.
Expressive Font
Typography Should Guide Attention
Typography Should Guide Attention
Test Typography in Real Screens
Do not finalise typography only by viewing a type-scale sheet. Test it inside the selected UI Concept screens, including:
- Dashboard
- Table
- Form
- Detail screen
- Empty state
- AI or chat interface
Name*
Email*
Where did you find us*
Upload video
Upload the introduction video here
Submit
Dashboard
Tables
Test Typography in Real Screens
Do not finalise typography only by viewing a type-scale sheet. Test it inside the selected UI Concept screens, including:
- Dashboard
- Table
- Form
- Detail screen
- Empty state
- AI or chat interface
Name*
Email*
Where did you find us*
Upload video
Upload the introduction video here
Submit
Dashboard
Tables
Typography Checklist
The Final Check Before moving to next process
Have you understood:
Has the brand typography been reviewed?
Is the font readable at 12 px?
Does it work in tables and forms?
Are no more than two fonts used?
Does the typography reflect the brand persona?
Is the hierarchy easy to understand?
The Final Check Before moving to next process
Final Step 6 Takeaway
Typography Should Make Complex Information Easier to Understand
The goal is not to apply the brand font everywhere.
The goal is to balance readability, hierarchy, task completion, and brand identity across the complete product.
Final Step 6 Takeaway
Typography Should Make Complex Information Easier to Understand
The goal is not to apply the brand font everywhere.
The goal is to balance readability, hierarchy, task completion, and brand identity across the complete product.