Phi-ling Up Your UI

Monday, November 19, 2007 -

Math isn't just for breakfast anymore. In fact, it turns out, there's a lot you can actually do with Math, aside from using it to sound like you know a lot of stuff. Turns out that the Universe has some pretty nice, symmetrical goodies woven into the fabric of its underpants - goodies such as

• Pi - a constant that lies at the core of radial geometry. We all know what Pi is, and so does Carl Sagan who used Pi as the final Universal God-given Palimpsest in his book "Contact" (if you haven't read it - smack yourself and go get it). One of the neatest endings to any book I've ever read.
  
• e - the Economist's best friend and magical mystery power underlying a lot of human phenomena like population growth and Google's IPO. Yes indeedy, when Google IPO'd a few years back, they decided it would be fun to raise e-billion dollars ($2,718,281,828).

My favorite of all, however, is Phi - The Golden Ratio. If you don't know about Phi, well it's just "one of those things" that is pretty startling:

Some of the greatest mathematical minds of all ages, from Pythagoras and Euclid in ancient Greece, through the medieval Italian mathematician Leonardo of Pisa and the Renaissance astronomer Johannes Kepler, to present-day scientific figures such as Oxford physicist Roger Penrose, have spent endless hours over this simple ratio and its properties. But the fascination with the Golden Ratio is not confined just to mathematicians. Biologists, artists, musicians, historians, architects, psychologists, and even mystics have pondered and debated the basis of its ubiquity and appeal. In fact, it is probably fair to say that the Golden Ratio has inspired thinkers of all disciplines like no other number in the history of mathematics.

- Mario Livio, The Golden Ratio: The Story of Phi, The World's Most Astonishing Number

What is Phi? It's a natural ratio of proportion, found literally EVERYWHERE in nature (from Wikipedia):

In mathematics and the arts, two quantities are in the golden ratio if the ratio between the sum of those quantities and the larger one is the same as the ratio between the larger one and the smaller. The golden ratio is approximately 1.6180339887.

• The proportion of your lower arm to your upper arm is Phi.
• A nautilus shell's symmetry is based on Phi.
• The ratio of successive Fibonacci numbers is Phi.
• A DNA molecule is 34 angstroms long by 21 angstroms wide for each full cycle of its helix. These are Fibonacci numbers and are also governed by Phi. If you cut a DNA spiral into cross-section, the resulting shape is a decagon - two pentagons shifted 36 degrees. Pentagon geometry is based on Phi:
  
• A 5-sided star (pentagram) is comprised of four unique line segments (red, green, blue, and pink below). The ratio of these is Phi:
  
• Our understanding of beauty is based on symmetry, and this symmetry is based on the natural ratio of Phi. Artists and architects throughout time have known this, and have based their work using it's symmetric properties. Most of what we consider "beatiful" about the human face all begins with Phi:
  

Phi, as it turns out, is literally at the heart of symmetry and what "pleases the eye". All of the features that we find appealing in each other (the Universal Beer Goggles) are all based on Phi. OK - enough trivia.

How To Phi Up Your UI
The heart of HTML is math, and given that, we can use Phi until we go batty. All you have to do is start off with the largest element and then divide by 1.618 for each of the smaller elements. Below I've created an HTML table with the width set to 100% (since most pages these days are elastic). I've nested another table inside of it that is in a 1.618 ratio to the outer.

Since this table is elastic, all I need to do is make sure the larger of the cells in each table is 100%/1.618 = 62% (rounding) and the browser will do the rest:

Fonts
The next thing you can do is get your Header bits right. If we decide that we want our text on our page to be .9em (which is pretty standard. And use ems btw since they size properly with browser settings), we can multiply by 1.618 to grade up our H tags:

• This is the standard text

• H2 (.9 * 1.618)

• H1 (.9*1.618 + .9)

Phi is an utterly fascinating number and if you have nothing to do - Google it and learn something new today!