Golden Ratio Typography

Created: 2020-10-30T01:03:45-05:00

Return to the Index

This card pertains to a resource available on the internet.

• 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.