Non-linear font zooming

Applying a uniform linear zoom to typography can wreak havoc on mobile layouts—causing headings to become oversized and split awkwardly, while the smallest text can remain too... well, small. Crafted following Perrin Anto's (opens in a new tab) insightful accessibility presentation at CSUN 2024, my non-linear font zooming approach adjusts each font size individually to maintain visual hierarchy, reduce disruption, and maximize readability.

Playground

This is a linearly zooming font. When we make site-wide size adjustments, each level of our typographic scale will adjust at the same standardized rate.

Type scale

Heading 1

68 px

Heading 2

42 px

Heading 3

26 px

Paragraph

16 px

Small

10 px

Want to learn more about non-linear font scaling? Check out Non-Linear Font Scaling: When “Bigger” Isn’t Always Better .