Golden Ratio for Readable Web Typography

I love the golden ratio. It has many applications in design. In fact, right now I’m writing a blog post about using it to cheaply generate non-repeating sequences of distinct colors.[0] And I have some background in typography; I’m conversant with things like Tschichold’s golden section.<p>But this is ridiculous. It’s making very broad claims without evidence. If it cited studies or provided compelling side-by-side comparisons, that would be one thing, but it’s just a bunch of assertions.<p>Design on a grid is good: it gives the reader a sense of neatness and improves legibility in a measurable way. And the specific proportions the author proposes for line height and length aren’t bad: following this advice blindly would actually give you something pretty okay. But it’s lazy. The author does nothing to show that φ is necessary at any point.<p>It isn’t shown <i>that</i>, let alone <i>why</i>, 1:φ would make a better base ratio than, say, 1:3/2 or 1:5/3.<p>It’s like one of those rhapsodic pseudoscientific health articles about how great some food is that never makes an actual claim beyond “said to be beneficial” and “may have restorative properties”.<p>0. Draft visualization: <a href="http://vimeo.com/34069290" rel="nofollow">http://vimeo.com/34069290</a>

I thought that design (blindly) based on Golden Ratio and the Fibonacci-Series was frowned upon here on HN<p><a href="http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm" rel="nofollow">http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm</a>

As far as I can tell, the following assertion (which is the basis for the rest of the math) is something we are to take on faith. How was it determined that this is the optimal ratio? That seems to me the most important question here, yet it is mentioned almost as an aside.<p>"""In the equation above, the optimal line height is produced when h equals the golden ratio (φ). """

"nature has given us a remarkable blueprint for beautiful and effective proportionality...Evident in plants, animals, the shape of galaxies, and even your DNA..."<p>The author is buying into unfounded hype and mysticism regarding the golden ratio. Debunked: <a href="http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm" rel="nofollow">http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm</a>

The author's results and auto-ratio-maker are based on an assumption ("educated guess") he makes in the middle about the ratio between line-height and line-width:<p>"With the help of basic mathematical modeling, you can make an educated guess that the relationship between the optimal line height and line width is exponential. Here’s the simplest equation to express that:"<p>The author chooses to square height to determine the "optimal" width, as the "simplest equation to express" the exponential.<p>But obviously the best educated guess would be W = Lh^GOLDEN RATIO

The lines are a little too narrow for the other parameters selected. But of course, any design guideline needs adjustment and human input, there are simply too many factors overall. Use method to create raw design, then refine.<p>This golden-ratio based heuristic is a good way to automatically come up with an initial model, and is therefore useful.

Personally, I've found that font size (in pixels) plus 10 pixels is usually a good place to start for line height, and I've read anywhere from 65 to 90 characters per line for optimal reading. There have are actual scientific studies out there on the concept of line length and readability, but I don't have any immediately available.<p>[Edit] On the article itself: I'm no mathlete, but that whole thing smells like bullshit. I'm sure I (or, rather, someone good at math) could pick a number at random (pi, 42, etc) and come up with a formula to generate the same numbers. I'm not sure "right because the Golden Ratio" is a valid conclusion.

It's difficult to trust an article on typography whose first paragraph ends with an orphan.

This is great. I love when people take common sense and apply it in uncommon ways. This would be <i>very</i> useful for responsive/adaptive designs.

Easier rule that gives similar results (~10%): `line-height: 1.5` for sizes up to 36px, ~1.2 for anything larger. Aka common-sense line heights.

fyi, my anti-virus (avast) goes nuts on that site<p>since it's a WP install, it might have been hacked<p>hmm maybe it's a false positive since it thinks it's a bad gif file

ESET NOD32 is blocking this site btw.

I really wish this was baked into some SASS framework so I could get this for free.