A Radical Approach to Powerful Headings

In 2016 I attended CSSConf and saw Keith Grant's presentation "Stop Thinking in Pixels". When I later redesigned my website, I took inspiration from some of the concepts that he covered. Of particular note—and what I want to dive into in this post—was his section about typographic scale.

Why is it so important that we have an eighteen pixel font size for a sub header? Why is it so important that we have precisely twenty-four pixels for that page title? Why must the footer text be eight pixel--eight or twelve pixels?

And, I think if you dig deep enough the answer to that question comes from this book, "The Elements of Typographic Style", by Robert Bringhurst. This was published in the early nineties and it is the Bible of modern typography.

And, he says, "When you design with type you should use a scale." and he gives us as an example, he says, "You should start with small font sizes and it should grown increasingly larger as you go up." and he gave this illustration as an example.

And, I think we inadvertently, as an industry, took this example and said "Perfect! There's our font sizes! Sixteen, eighteen, twenty-one, twenty-four!" those are magic numbers and we implement—I'd say—ninety percent of our designs use these numbers. As if these magic numbers are what Bringhurst was talking about.

He wasn't talking about these numbers, he was talking about the relationship between them.

He was saying there should be some sort of mathematical scale from one font size to the next so that larger font sizes space out more and more, smaller font sizes are a little closer together, and this is how we should approach typography on the web.

Keith Grant

In Keith's talk, he continues on to talk about choosing a scalar and letting your font sizes be multiples of that scalar so that the ratios between them are some multiple of that scalar. He gives an example of using 1.25 with a few steps in either direction:

step value
4 2.44140625em
3 1.93125em
2 1.5625em
1 1.25em
0 1em
-1 0.8em
-2 0.64em
-3 0.512em
-4 0.4096em

As the table shows repeated multiplication. It's worth pointing out that repeating multiplicaton is exponentiation:

step exponent value
4 \(1.25^{4}\) 2.44140625em
3 \(1.25^{3}\) 1.93125em
2 \(1.25^{2}\) 1.5625em
1 \(1.25^{1}\) 1.25em
0 \(1.25^{0}\) 1em
-1 \(1.25^{-1}\) 0.8em
-2 \(1.25^{-2}\) 0.64em
-3 \(1.25^{-3}\) 0.512em
-4 \(1.25^{-4}\) 0.4096em

If you're writing raw CSS, you might end up using these values with code that looks something along the lines of:

h1 {
  font-size: 2.441em;
}
h2 {
  font-size: 1.931em;
}
h3 {
  font-size: 1.563em;
}
h4 {
  font-size: 1.25em;
}
h5 {
  font-size: 1em;
}
h6 {
  font-size: 0.8em;
}

But if you're using a CSS preprocessor, you can make use of the fact that this is exponentiation by using functions (example uses LESS):

h1 {
  font-size: 1em * pow(1.25, 4);
}
h2 {
  font-size: 1em * pow(1.25, 3);
}
h3 {
  font-size: 1em * pow(1.25, 2);
}
h4 {
  font-size: 1em * pow(1.25, 1);
}
h5 {
  font-size: 1em * pow(1.25, 0);
}
h6 {
  font-size: 1em * pow(1.25, -1);
}

I find it useful to store the various sizes in variables so that they can be used for more than just h1-6 elements:

@f1: 1em * pow(1.25, 4);
@f2: 1em * pow(1.25, 3);
@f3: 1em * pow(1.25, 2);
@f4: 1em * pow(1.25, 1);
@f5: 1em * pow(1.25, 0);
@f6: 1em * pow(1.25,-1);

And then further improving on this model, the ratio between levels can be abstracted into its own variable:

@ratio: 1.25;
@f1: 1em * pow(@ratio, 4);
@f2: 1em * pow(@ratio, 3);
@f3: 1em * pow(@ratio, 2);
@f4: 1em * pow(@ratio, 1);
@f5: 1em * pow(@ratio, 0);
@f6: 1em * pow(@ratio,-1);

While this is pretty good so far, we can do even better.

I often find that the ratio that I actually care about is the font-size of the h1 to the font-size of the body.

For example:

$$\frac{\text{h1}}{\text{body}} = 2$$

Updating @ratio: 2 wouldn't help us with how the code is currently set up because @f1 would turn into \(2^4 = 16\).

In this instance what we want is to find \(x\) such that

$$x^4 = 2$$

Taking the fourth root of both sides leaves us with:

$$x = \sqrt[4]{2} = 2^{\frac{1}{4}}$$

Using this value for @ratio gives us:

@ratio: pow(2, 1/4);
@f1: 1em * pow(@ratio, 4);
@f2: 1em * pow(@ratio, 3);
@f3: 1em * pow(@ratio, 2);
@f4: 1em * pow(@ratio, 1);
@f5: 1em * pow(@ratio, 0);
@f6: 1em * pow(@ratio,-1);

That's not all. We can make use of some alternative notations to make the power relationships cleaner:

$$(2^{\frac{1}{4}})^4 = 2^{\frac{4}{4}} = 2^1 = 2$$

$$(2^{\frac{1}{4}})^0 = 2^{\frac{0}{4}} = 2^0 = 1$$

If we update our variables to use the second form of power notation, the ratio can stand alone:

@ratio: 2;
@f1: 1em * pow(@ratio, 4/4);
@f2: 1em * pow(@ratio, 3/4);
@f3: 1em * pow(@ratio, 2/4);
@f4: 1em * pow(@ratio, 1/4);
@f5: 1em * pow(@ratio, 0/4);
@f6: 1em * pow(@ratio,-1/4);

This allows us to easily change the h1:body font-size ratio.


Different Baselines

So far I've been making the assumption that h1 has a font-size of 2em and that h5 has a font-size of 1em, but what if you want a different heading to have the 1em font-size?

Let's take a look. Here I'm updating the powers so that @f4 is the baseline font and @f1 is 2em.

@ratio: 2;
@f1: 1em * pow(@ratio, 3/?);
@f2: 1em * pow(@ratio, 2/?);
@f3: 1em * pow(@ratio, 1/?);
@f4: 1em * pow(@ratio, 0/?);
@f5: 1em * pow(@ratio,-1/?);
@f6: 1em * pow(@ratio,-2/?);

With @f1 we want

$$2^{\frac{3}{x}} = 2$$

$$2^{\frac{3}{x}} = 2^1$$

$$\frac{3}{x} = 1$$

$$x = 3$$

Likewise, if we want @f6 to be the baseline:

@ratio: 2;
@f1: 1em * pow(@ratio, 5/?);
@f2: 1em * pow(@ratio, 4/?);
@f3: 1em * pow(@ratio, 3/?);
@f4: 1em * pow(@ratio, 2/?);
@f5: 1em * pow(@ratio, 1/?);
@f6: 1em * pow(@ratio, 0/?);

$$2^\frac{5}{x} = 2^1$$

$$\frac{5}{x} = 1$$

$$x = 5$$


line-height

This is all well and good for font-size, but what about line-height?

Personally I find that scaling on powers of fourth-roots of two is quite attractive.

Anyone who's familiar with line spacing in Microsoft Word may recall that some of the default options were:

  • 1
  • 1.15
  • 1.5
  • 2

1 is usually too tight and makes for dense walls of text that don't track easily. Even 1.15 tends to be a bit short, however it's important to note that:

$$1.15 \approx 1.1892 \approx 2^\frac{1}{4}$$

From there, 1.5 tends to look decent, but in the wild I've found 1.4 to be quite common. Again, it's important to note that:

$$1.4 \approx 1.4142 \approx 2^\frac{2}{4} = \sqrt{2}$$

I find it interesting that, without any appearance of having intentionally done the math, it seems that many have gravitated toward numbers that fit nicely on this particular scale.


Conclusion

So far from my own usage, I've found that using fractional powers of two has worked quite well to produce a visually appealing hierarchy where each level is distinct without being overwhelming.