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 h1
s 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 ...
Get Responsive Typography now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.