Equilateral triangle of font size, line length and height

Question

I've come across this quiz on betterwebtype where you get a slider to adjust one of three parameters: font size, line height (leading) and line length to make "the perfect paragraph".

While the quiz is interesting, it doesn't actually tell you what the correct solutions are (although you can look at the source code if you know it's there), nor does it explain the formula (if any) to apply to your own work.

Until now, I've mostly gone with the convention of setting a line length of at most 50em and a line height of 1.2 in my own notes; applying this convention to many blog-type websites certainly improves readability for me. But it seems like choosing these parameters depending on the font size (and font face too, I'd guess) can give an even better choice.

Is this "equilateral triangle" thing a standard tool of typography, or just something this site made up? Are there any rules of thumb for how to balance line length, font size and leading (perhaps taking into account the x-height and other factors)?

I realise the true answer is going to be more "do what looks right, and it depends on the situation" than "just stick these numbers into this formula and you'll get it perfect", but seeing that someone made a quiz where you score points for how close you get to their "right answer" makes me think there's at least a rule of thumb for this kind of thing.

Answer 1

I didn't know this triangle rules, but...

The basic rules when working in a textbook publishing company are:

• Optimal leading= 120% (font size + 20%)
• Optimal column length= 1.5 alphabet = 27 x 1.5 = ≈40 CPL (characters per line)
• Maximum tracking= +25%
• Minimum tracking= -25%
• Avoid (or forbidden) fonts horizontal or vertical distortions, instead use the family options as condensed or expanded.

There are a few more, these are the main ones. Rules are not prohibitions, but a limit, from there choosing other different options are... ¿design?.

But web is different:

• Optimal line-height= 160% (font size + 60%) = Font size x 1.618 (golden ratio)
• Optimal line length= 2.5 alphabet = 27 x 2.5 = ≈68 CPL
• Letter-spacing= in books design, the tracking is often used for fitting the text in a certain space, a column or a page or just to adjust a paragraph. In web design these limits don't exist, so the letter-spacing is relegated to an aesthetic use in most cases.

Here a link to test online, the explanation at https://medium.com/@zkareemz/golden-ratio-62b3b6d4282a

Note: the 27 characters alphabet is the spanish one, that's why the mathematical operations results are approximate. The numbers are 40 CPL in text books, 70 CPL in web.