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

• “More Meaningful Typography,” Tim Brown, A List Apart
• “Scale and Rhythm,” Iain Lamb — itself both an essay and a tool for demonstrating both scale and rhythm
• “Contrast Through Scale,” Christopher Murphy, Typecast

Just a quick note that I’ve updated my original post on custom Kindle fonts with info for the Touch and Paperwhite (at least if you have current firmware).

The default Android browser does not love soft hyphens (Unicode: U+00AD, HTML: ­ or ­). This means, for anyone using the good old PHP Typography tool or its WordPress plugin equivalent, wp-typography, that you’re in trouble if you have mobile viewership at all. While it’s nice to have a sensible hyphenization algorithm at play – the sort that can prevent widows – it’s a bad idea to be running anything that doesn’t support mobile these days. Read on, intrepid explorer →

The standard typeface for the Kindle, Caecilia, works well enough: it’s a well-designed, high contrast slab serif that matches the needs of the low-contrast, low-resolution Kindle screens well. It’s also not even close to being a really great reading face. The new Kindle Paperwhite has gorgeous typography, by all accounts, but if you have an older Kindle, you don’t have to buy a new one to start getting some of the benefits of better typography.

I recently discovered that it is possible, with a fairly small amount of effort, to put whatever fonts you like on your Kindle, without jailbreaking. Here’s how. Read on, intrepid explorer →

One of my great pet peeves with Arial is the relationship between ‘r’ and ‘n’ when set next to each other. If one compares rn and m, they’re nearly identical. The kerning is off, and the letters designed too similarly.

My mind glitches every time I see them in writing – particularly when the alternative is nonsensical or bizarrely out of place, as in the common abbreviation of postmodern as ‘pomo’, which has the unfortunate lookalike of ‘porno’ in Arial. Certainly not the sort of mistake one wishes one’s readers to make.

Typography matters.

Occasionally, I’ll be reading a website and just wish I could use another, better font. I can, of course… I can go look up the element on the page that I want to change, use the developer tools to dynamically alter the page, and go back to my reading. This is a pain in the neck, though, and sometimes I want to use fonts that I don’t necessarily have on my computer – like “Athelas,” the font that Readability uses to display its body text, and which they get using Typekit. Read on, intrepid explorer →