During the construction of this site, there are many important design decisions that need to be made. One of them is to decide the font size for each level of headings, i.e., typographic scale.
Investigation
The first thing I did was to read everything online about typographic scale. I will just skip the details and jump to my opinions:
- Modular scale should be followed
- Traditional scale is obsolete
- Golden ratio or double-stranded scale do not make any sense
- Vertical rhythm should be considered
Then a little explanation.
Modular scale (geometric series) is the way how our visual perception understands relative size. When a page is zoomed in or out, the perceived aboslue length changes, but the ratio remains the same. Rather than choosing modular scale, we actually think in terms of modular scale. There is no hard rule that the ratio of modular scale must be a constant, but a constant modular ratio is the simplest and provides consistency.
Traditional scale is actually modular scale of ratio 2 for size 6 7 8 9, with some extra and missing sizes. There is no reason why we restraint ourselves to irrelevant factors, instead, we should consider the constraints from our real problem. The same reason applies to the golden ratio and double-stranded scale.
Problem & constraints
What is a good typographic scale? For a Blog article, it should at least meet the following requirements:
- Discrimination: different headings can be easily distingushed
- Consistency: all the headings looks consistent by the same principle
Besides font size, line height of each level of headings should also be adjusted to meet the requirement of vertical rhythm. Line height affects the appearance of a heading, especially when the heading is wrapped and takes up multiple lines.
Modular scale solves part of the problem, but we still have to determine the value of the modular ratio and to make the line height as consistent as possible while maintaining vertical rhythm.
The typographic scale should also satisfy these constraints:
- The line height of each heading must be an integral multiple of the line height of body copy (vertical rhythm)
- The smallest heading must not smaller than the body copy
- The number of heading levels
- The maximum acceptable size of the top heading
Optimization
Design is a process exploring all the possible solutions (the design space) to find an optimal one, i.e. an optimization problem. If we can express the problem in a mathematical form, we can solve it by computation.
The constraints are already listed. The next thing is to express the objective function, which is the inconsistency of headings from each other. What is it?
Short answer: the standard deviation of relative line height.
Long answer: The line height of each heading is different, but the relative line height (line height divided by font size) of different headings can be the same, and when they are the same, the headings look consistent. To compare two numbers, you can just use the absolute value of the difference of the two numbers, but for a list of numbers, standard deviation is an effective measure for their inconsistency.
The caculation is easy for a computer, and can be done with brute force. The program just needs to exhaustively tries each possible heading sizes that satisifies all the constraints and evaluates the inconsistency. Finally, it sorts all the solutions by the inconsistency and find the best solution.
Here is the code (runable online): a Go program to calculate optimal typographic scale.
Example
In this site, I need to use maximum three levels of headings: H1, H2 & H3. I choose 19px/30px as body copy. The search range for H3 is from 1.2*19px to 1.5*19px, and the range for H3 is from 35 to 50. Finally the solution is:
Ratio: 1.3079
H3: 23px/1.3
H2: 30px/1.0
H1: 39px/1.5
Though the line height of H2 is still not ideal, it is already the best solution given the restrictions by vertical rhythm.
Conclusion
The approach can sccessfully find the optimal typographic scale under the precise problem definition in this article. It does not rely on any mysterious process or magic numbers, but only reasoning and computation.