As I get older, my disdain for small typography grows.
(It’s not just me. As you age, your pupils reduce in size, letting in less light and making it harder to see.)
This week, I decided to bump up the font-size on my site from 17px to 18px.
Because my entire site uses relative sizing, all I had to do was change a single value—the
font-size percentage on the
body tag—in my stylesheet.
The rest of the size uses
em values, so as the font size increased, the breakpoints and the font sizes on all of the other elements scaled up to match. Everything maintains an appropriate relative scale and sense of balance.
Why percentage for that
body value instead of
px? It makes it really easy for a visitor to change the default font size in their browser (from medium to, say, large). My base font size will be a percentage of their default size.
For example: at
100%, if they set their font size to
18px, my base font size becomes
18px. If I bump up my base font size to
18px my base font size becomes
20.25px (18 * 1.125 = 20.25).
What makes this system so beautiful is that it puts control with the users—where it belongs—while still maintaining the harmony and balance of the design system you put in place.
Get the Spare Parts Newsletter
Every week, I send out a short email packed with web development resources and interesting stuff from around the web.