Leonardo Fibonacci was an Italian mathematician in the middle ages. He was really great at counting stuff, as you’d expect, and was responsible for Europe’s adoption of Arabic numbers to replace Roman ones—if it wasn’t for him your phone number would be much longer. And ordering a Chinese would take ages, but on the plus side you’d be really hungry by the time it came.
The other thing he did, though, was even better (maybe) than changing the face of mathematics in Europe forever—he nicked an equation off some Indians and put it in a book. That equation was this:
And what it gives you is this:
It’s a series of numbers, basically, and it’s everywhere in nature, from the arrangement of a pine cone to the flowering of an artichoke. It can even be used to describe the reproduction of idealized bees, which is bound to come in handy in the pub. And, fact fans, it was rapped by Mos Def in the song Astronomy (8th Light) by Blackstar.
Brilliant! But what does it have to do with design?
Well, each number in the series is made by adding the previous two together, and as the numbers get bigger and bigger the ratio between them gets closer and closer to 1.6180339887. Which is good, because 1.6180339887 is the Golden Ratio—and when the relationship between two things conforms to the Golden Ratio, everybody* loves it. Most interface designs are based around grids, so a ratio as precise as 1.6180339887 isn’t likely to be practical—the Fibonacci series enables classical proportions to be combined with grids in a relatively straightforward, maths-lite way.
So, by applying Fibonacci numbers to things like column widths in a website, you can create visual harmony without even having to think too hard. For example, this very page is based on an 8 column grid. The main column (this one) occupies five grid spans, while the right column occupies three. The primary navigation at the top of the page takes up two grid spans—if the logo was a bit smaller (so it only took up one grid span) you'd get a full sequence (1, 2, 3, 5, 8).
The width of containers is massively important in web design (well, all design, really), but it’s also important to consider how the stuff inside those containers looks. And, guess what, Fibonacci can help. He’s a pro. At the design stage, for example, you can make sure that line-height is 1.618 times copy size, and you can make your type sizes conform to the series.
Even if you need to accommodate standard ad sizes you’re alright, because most of them fit the Golden Ratio—for example, the IAB’s Vertical Rectangle size is 240 pixels by 400. Fibonacci actually founded the IAB, some 800 years before the internet was even invented**, which explains the relationship.
But once the design’s all done and you start putting stuff in it, is it too late to maths it up? Not really, no. Try making the width and height your rectangular images conform to the Golden Ratio. Then try making the overall width of the photo 1/1.618 times the width of the column in which it sits. Then re-crop it so that the foreground occupies 1/1.618 of the available height, or width, or area.
Don’t go too crazy though. Fibonacci numbers can be really useful, but they’re just numbers and as such they have their limits. If it looks better square, or with equal size columns, or whatever, don’t worry about it. Nobody will mind.
*citation needed
** citation needed
by Ben on 1st March 2010
Report comment
I love the collaboration of maths and art. I always use the “Rule of thirds” or “noughts and crosses” grid when taking my pictures, but this takes it to a new level.