One of my favourite parts of this article is Rob’s own introduction to the concept of a “scale”. We see it everywhere; an introduction to the modular scale, typographic scale, <i>whatever\ scale, but it’s the first time I see someone taking their sweet time to define the why on a scale:
a scale is “a graduated range of values forming a standard system for measuring or grading something.” A piece of music using a particular scale—a limited selection of notes with a shared mathematic relationship—can effect a certain emotional tenor. Want to write a sad song? Use a minor scale. Changed your mind? Switch to a major scale and suddenly that same song is in a much better mood.
The process of creating that scale begins by asking what the type needs to do, and what role contrasting sizes will play in that. Rob shares his own personal flow of work when it comes to defining his own scale for most of his projects, which consists of four main positions:
- Captions, metadata and labels
- Body text, low level headings
- Mid-level headings
- Top-level headings
As with any scale, a unit of measurement is necessary in order to create a graduated range. If an interval of, let’s say, 1.5 is chosen, that leaves the previous positions like so:
- 12px (18 ÷ 1.5)
- 18px (base size, body text)
- 27px (18 × 1.5)
- 40.5px (27 × 1.5)
(and for all the web designers out there cringing at those pixel values, don’t worry, the author shares a Sass map conversion utility that enables us to use this with any unit).
It’s important to mention that in this process, the choice of a typeface comes later, not before defining the scale. This is important in letting the scale dictate the need for the correct typeface based on their geometry, rather than just how it looks:
Having the scale in place gave me a framework for the next step: evaluating prospective typefaces. Typeface selection and pairing are more art than science, and a nebulous art at that. Many designers have documented their methods, and their successes speak for themselves, but I’ve never found a formula that consistently works for me, and the journey is different every time.
What follows is a very careful consideration of the design process between choosing an adaptive/responsive layout, taking into account the scale into the choice of the number of columns. At least while CSS Grid isn’t 100% into place yet, this is a good technique to fallback to, so do keep reading if you’re curious about the design and CSS implementation process (warning: Sass math 🤓 ahead).
A final word and wise advice: as with anything typography-related, nothing is a perfect science, and eyeballing tweaks are often still required. The most important aspect really is constructing a solid foundation that’s not a pain in the ass to modify.
It’s also worth mentioning that, while overfastidiousness would seem to be the provenance of systems thinking, sometimes you just have to eyeball it. After creating my typographic scale, I bumped up the smallest size an arbitrary amount, from 12px ($scale0/$interval) to 13.5px ($scale0/($interval/2)). It deviates from the scale’s interval, but it looks better. The system is the foundation, but it doesn’t have the final say—I do. It’s okay to go with your instincts and color outside the lines.