Is there any recommended books about using the Phi (Golden Ratio) for WebDesign?

I've seen a lot of layouts taking advantage of this proportion, but it would be great to read a book with a lot of examples and possible aplications of this math (and possible others) for WebDesign.

Thank you.


The Geometry of Design is not about the web specifically but it is a great book on proportion systems in layout and product design in general.

For what it's worth, phi is not the end all proportion. There's a lot more value in considering standard view port sizes or the proportions of the screen. The beauty of phi has been most notably exploited in the classical book industry where you can change the proportions of the media to work with your design solution.*

Designing Books has some excellent analysis on how to determine proportion systems based on the needs of the material. It's about printed books but there is much to learn about proportion and typography in all forms of design.

The Power of Limits is another excellent reference on the concept of proportion systems in general.

* The Form of the Book is a slim little gold mine on proportion and classical book layout.


There's not much to it. Wikipedia sums it up well:


Keep in mind that in the context of graphic design, it's somewhat of an arbitrary building block. As such, it seems to be abused much more than used meaningfully.

Barring nothing else to go off of, staring with the golden ration isn't a bad thing. Just don't let it cloud other more tangible objectives.


In terms of web design, it's even less practical than the fixed canvas you get with architecture or print design.

The catch is that in web design, you less often have control over limiting vertical divisions. While you can provide a hard-stop for widths, you usually need to accomodate flexibility in vertical content/layout flows. As such, the golden ratio tends to fall a part a bit.

I'd suggest that if you have absolutely nothing to start from, while the golden ratio could work, for web design, there's probably better foundations to consider such as the many CSS grid systems out there.

  • You're completely right about the tangible objectives. But I could use it as a starting template for design proportions... Thank you. – TCB13 Dec 18 '12 at 21:49
  • 1
    That is true, though I still think there might be better options. I've updated my answer with some web-design centric thoughts. – DA01 Dec 18 '12 at 22:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.