Responsive Typography

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.

Code Sample

Download the source code to follow along as we go.

View demo: http://bit.ly/rt-demo-prop

Download code: http://bit.ly/rt-code-prop

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 ...