In digital products, typography structures behaviour. It guides scanning rather than reading, enables decision-making, and reduces cognitive load. As products scale, type becomes a system — governed by tokens, variables and documentation. And beyond clarity and consistency, typography carries responsibility: accessibility, legibility and inclusion are not aesthetic preferences, but ethical design decisions.

typography-infrastructure.design/clarity
Grouping Hierarchy

Typography organises how interfaces are understood Users rarely read interfaces linearly.

Users rarely read interfaces linearly. They scan and interpret structure.

June 1, 2024   3min read

Grouping

The Psychology of Scanning

Most users follow specific scanning patterns, such as the F-Pattern or the Z-Pattern. Typography facilitates this by creating a clear sense of order. Without deliberate typographic choices, an interface becomes a "wall of text" that feels overwhelming and cognitively expensive to process.

Grouping

Users rarely read interfaces linearly. They scan and interpret structure.

In the world of UI design, words are more than just carriers of information; they are the architectural framework of the page. When a user lands on a screen, they aren't reading a novel from top-to-bottom. Instead, they are hunting for "anchors"—visual cues that tell them where they are and what they can do next.

Grouping

Conclusion

Good typography is often invisible. When done correctly, the user finds exactly what they need without ever realizing they were being guided. By designing for the "scanner" rather than the "reader," we create interfaces that feel intuitive, efficient, and accessible.

Desktop
typography-infrastructure.design/clarity
Show Tokens
text.display.heroInter 28/33 · 700 · -0.02em

Typography organises how interfaces are understood Users rarely read interfaces linearly.

text.subtitle.lgInter 15/23 · 400 · #888

Users rarely read interfaces linearly. They scan and interpret structure.

text.meta.smInter 12/16 · 400 · #bbb

June 1, 2024   3min read

text.heading.sectionInter 18/24 · 700

The Psychology of Scanning

text.body.mdInter 14/24 · 400 · #333

Most users follow specific scanning patterns, such as the F-Pattern or the Z-Pattern. Typography facilitates this by creating a clear sense of order. Without deliberate typographic choices, an interface becomes a "wall of text" that feels overwhelming and cognitively expensive to process.

text.lead.mdInter 15/23 · 600

Users rarely read interfaces linearly. They scan and interpret structure.

text.body.mdInter 14/24 · 400 · #333

In the world of UI design, words are more than just carriers of information; they are the architectural framework of the page. When a user lands on a screen, they aren't reading a novel from top-to-bottom. Instead, they are hunting for "anchors"—visual cues that tell them where they are and what they can do next.

text.heading.sectionInter 18/24 · 700

Conclusion

text.body.mdInter 14/24 · 400 · #333

Good typography is often invisible. When done correctly, the user finds exactly what they need without ever realizing they were being guided. By designing for the "scanner" rather than the "reader," we create interfaces that feel intuitive, efficient, and accessible.

Mobile
text.display.heroInter 20/24 · 700

Typography organises how interfaces are understood Users rarely read interfaces linearly.

text.subtitle.lgInter 13/20 · 400

Users rarely read interfaces linearly. They scan and interpret structure.

text.meta.smInter 11/14 · 400

June 1, 2024   3min read

text.heading.sectionInter 15/20 · 700

The Psychology of Scanning

text.body.mdInter 12/20 · 400

Most users follow specific scanning patterns, such as the F-Pattern or the Z-Pattern. Typography facilitates this by creating a clear sense of order. Without deliberate typographic choices, an interface becomes a "wall of text" that feels overwhelming and cognitively expensive to process.

text.lead.mdInter 13/20 · 600

Users rarely read interfaces linearly. They scan and interpret structure.

text.body.mdInter 12/20 · 400

In the world of UI design, words are more than just carriers of information; they are the architectural framework of the page. When a user lands on a screen, they aren't reading a novel from top-to-bottom. Instead, they are hunting for "anchors"—visual cues that tell them where they are and what they can do next.

text.heading.sectionInter 15/20 · 700

Conclusion

text.body.mdInter 12/20 · 400

Good typography is often invisible. When done correctly, the user finds exactly what they need without ever realizing they were being guided.

Health App
Contrast
Kerning
Good morning
Natalia
Heart Rate
72
bpm
Steps
8,431
of 10,000
Sleep
7.2
hours
Heart Rate
Last 24h
100 50 6am 12pm 6pm Now
Steps This Week
Weekly
M T W T F S S
Today's Activity
Active Calories
Goal: 450 kcal
382
Distance
Walking + Running
5.2 km
Exercise
30 min goal
24 min
Stand Hours
12 hour goal
9/12