fibonacci a responsive grid with nothing in it but the sequence

the columns are the sequence

one grid holds this page: 8 columns, then 5, then 3, then 2, then 1 — the sequence walked backwards as the window narrows. the breakpoints are the sequence too: 1597, 987, 610, 377.

every row is a pair of neighbours. the wide block takes 5 and the narrow one takes 3; a size down they take 3 and 2, then 2 and 1, then 1 and 1. the split is always 1.6, so the page keeps its proportion at every width.

every size is 100vw × a fibonacci number ÷ 1597

that is the only formula here, and it is held between two neighbours so it never runs away. body type is 21 at 1597 wide and 13 at 987; the padding is 34, then 21, then 13; this bar chart is 377 tall, then 233, then 144. each breakpoint lands the whole page on the next number down. there is no other measurement.

φ 1.6180339887

pisa, 1202

leonardo of pisa wrote liber abaci to argue for arabic numerals against roman ones. the rabbits were an exercise a few pages in: a pair breeds a pair, every pair breeds from its second month, count the pairs at the end of the year. 1, 1, 2, 3, 5, 8.

the sequence was already old. pingala, virahanka and hemachandra had it in india centuries earlier, counting the ways to fill a line of verse with long and short syllables. europe got it with the numerals it was smuggled in beside.

137.507764° — the angle that never repeats

the type is the sequence

five sizes, and each one is its own name. below 1597 they slide down the sequence together: at 987 the display is 55 and the body is 13, and the page reads the same because everything moved by the same rule.

1/11.000000
2/12.000000
3/21.500000
5/31.666667
8/51.600000
13/81.625000
21/131.615385
34/211.619048
55/341.617647
89/551.618182

not everything is golden

the parthenon isn't. the nautilus isn't — it is a logarithmic spiral, just not this one. the apple logo isn't, whatever the diagram going around says. a credit card is 1.586. the ratio is exact inside the sequence and rare outside it.

this page uses it because a grid needs a rule that survives being resized, not because nature signed off on it. one of the two rectangles is golden. you cannot see which.

233 × 144
216 × 144