O'Reilly logo

Responsive Typography by Jason Pamental

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Chapter 7. Proportion: Make It Scale, Make It Right

In case you haven’t figured it out by now, I’ll come clean here: I’m a big believer in Responsive Web Design. It’s the only way I know to provide the best experience across the increasingly fragmented landscape of devices and capabilities that is the new normal on the Web today. But most of the advice you’ll find about Responsive Design ignores relative scale in typography.

I find that really jarring, because in my experience, it’s not just the absolute sizes of your type and spacing that must change as screen sizes shrink; the proportions between them must change, as well. So I’ve come up with a responsive relative scale to help you achieve a more readable page regardless of device or resolution.

Out of Step and Size

For many of us, once we calculate a balanced and readable typographic scale and rhythm for our initial design, we turn our attention to tweaking floats and widths in the layout for other breakpoints.

What often gets missed is proportion. On every device, our h1s are three times (3em) the size of the body, every h2 is 2.25em, and so on.

The problem is that as the screen size shrinks and fewer elements are visible, the relative scale between elements becomes exaggerated. What’s needed is greater subtlety and flexibility to maintain a more balanced proportion and better readability across ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required