Mathematically Derived Typography

for strict typographic systems tat follow coherent rules and hence appear visually balanced and coherent we can derive all all spacing from a few base variables, usually baseline font-size $s_b$ and a multiple $r$.

we then can define the line-height $l_b$ such that

and then the baseline grid $b$ as

this gives a good starting grid for body text. we then can derive headline sizes and spacing from these values. we scale text headline sizes as

we then space paragraphs between each other according to

with $\alpha \in [0.5, 1]$ - and maybe even with simply $\alpha = \frac{1}{r}$

we space headings from their body text such that they appear closer to the body they are attached to than the content above them to ensure belonging through proximity gestalt-principles. a common way of doing this would be to have twice the space above than below, such that for example

where $\lambda \in [0.5, 1]$ as well with maybe also for simplicity $\lambda = \frac{1}{r}$

all other spacing should then follow generally

1. Typical scalar values

$r$ is one of the key defining values of this typographic system as we try to derve as much from it as we can. it will set the visual density and cadence of the text, some typical values are:

• 1.2 - dense UI typography
• 1.25 - editorial/web
• 1.33 - classic print hierarchy
• 1.414 - $\sqrt{ 2 }$
• 1.618 - golden ratio