Modular scales: fantastic, but don’t overdo it

I’m a huge fan of the Modular Scale tool Tim Brown put together a few years ago, and I’ve used it on a number of projects to help me set up good vertical and horizontal rhythms on a number of sites I’ve designed. As soon as I read Brown’s original article at A List Apart (Off the top of my head, I know I used a scale on chriskrycho.com, independentclauses.com, jaimiekrycho.com, theinvitedbirth.com, and step-stool.io — which is to say, every site I’ve done a full design on in the last two years. Again: I’m a fan.)

That said, the modular scale can get away from you pretty easily if you’re not careful. I’m working on a couple different designs at the moment — the one for Step Stool and one for the simple, clean theme I’ll be distributing with Step Stool for anyone who cares to download and use it. (Wouldn’t that be fun — to discover one of my designs on some random blog or site? I can see where WordPress theme designers get their kicks.) In both cases, the modular scales I’ve generated have been pretty robust.1 As a result, I ended up with a rather ridiculous SASS file with the modular scale embedded for both of them, with tons of sizes that I’ll never use.

More importantly, though, most of those sizes I should never use. This struck me tonight as I was looking at the Typeplate framework. One of the neat little SASS mixins they have defines a limited set of heading sizes — just nine sizes total, in fact. By contrast, the modular scale tool will happily spit out a table with 36 different values on it. Let’s be honest: if I use all 36 of those values, or even if I don’t choose from among them discerningly, my site is going to be just as much of a mess as if I eyeballed it. (Probably more.)

The trick, then, is to use the principles of good typography with the tools available to make good choices about which sizes from the scale to use. (Limitations are often one of the most powerful tools in any creative process.) As the folks over at Typecast put it:

Limiting your typographic scale can improve your typography considerably. And rather than arbitrarily plucking type sizes out of the air, ratios will ensure your intervals are consistent and your scale harmonious.

The modular scale tool gives you the latter bit. Limiting the number of pieces from the scale, and choosing those elements sensibly? That, you have to do yourself.


More reading


  1. In case you’re curious: the Step Stool scale and the Clean theme scale

Discussion

  • Hey,

    Valid point you make

    I’d be interested to know what properties you’re using modular-scale output with (e.g. font-size, height, margin, padding, width etc.)

    Yours hopefully,

    • Lewis, sorry about the long delay. Busy week! I actually try to use the scale for pretty much everything you listed; I even use the relations for setting percentages.

        • It certainly can. I don’t hold myself to the scale rigorously, either; there are times when I think the scale just looks off a bit and eyeball it. My specific point in this post was not to end up with a gazillion sizes. When I want a nice huge padding at the top of a view, however (for example), a lot of times I’ll go back to the scale and grab something in the range I’m looking for, because I know it will tend to help with the visual rhythm of the page in a small but meaningful way.

          Tooling-wise, I basically just use the original modular scale tool Tim Brown put up around the time he posted that article, and embed the sizes I do want in my SASS. We’ll see if I stick with that or come up with another solution at some point in the future.

Discussion is closed at this time.