Golden Ratio Typography
Created on 2020-10-30T01:03:45-05:00
- Font size and line height are related.
- Longer line text fields need more inter-line spacing to remain readable.
- Nature appears to use golden ratios when ratios must be held at any scale.
Variables
- f: font size
- l: line height
- h: the ratio of font size to line height
- w: the width of a text field
The optimal line height is font size multiplied by phi (1.618.)
The optimal width of a text box is the optimal line height squared.
Tuning when you have only integers
If you have a text box width and need the line height:
h = phi - (1/2*phi) * (1 - (w/w*phi))
If you have a line height and need a text box width:
w = (optimal line height)^2 * [1 + w * phi * (h-phi)]
Round h or w to the nearest integer.
Golden spacing units
A "golden spacing unit" starts with the line height and are incrementally golden ratios larger or smaller.