Golden Ratio for Readable Web Typography
pearsonified.com
pearsonified.com
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.
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.
It isn’t shown that, let alone why, 1:φ would make a better base ratio than, say, 1:3/2 or 1:5/3.
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”.
0. Draft visualization: http://vimeo.com/34069290
The failure to validate the ratio as "optimal" is a very valid criticism, but at the very least, what they're claiming as "optimal" is pretty darn good IMO.
Yet, some designers, especially designers outside the design space (designers you find in places like insurance companies) still crush size 12 fonts into large spaces.
Drives me crazy. Not only is it hard to read, it's essentially invisible on monitors with high resolutions.
It is an exploration into the idea of basing typographical proportions on the golden ratio; it is NOT saying that the results are the only (or even the best!) way to set type.
Personally, I found the results to be compelling—paragraphs set with the Golden Ratio Typography Calculator look good to my eye (and in fact, trying to understand why certain text looks good and other text looks bad is the reason why I started this research in the first place).
In the comments of the article, I've expounded upon some of the questions posed here, and I hope you'll take the time to explore those if you're so inclined.
For example, some of you have deftly pointed out the lack of clear support for the w = l^2 relationship. I'm going to cover my reasoning behind this in a future post, but I didn't want a heavy focus on mathematics to take away from the impact of the article.
In the meantime, check out the first image on this page (http://dropshado.ws/post/12971305087/webkit-zoomed-out-font-...); the ends of each line of text combine to form a classic x^2 curve. This supports the claim that w = l^2 (but it does not prove it true, obviously).
Most people simply won't read (or even be able to follow) a barrage of mathematical reasoning, modeling, and graphs. That's why I left most of those things out of this article. However, these things are the hallmarks of the research I've done thus far.
Finally, there is a huge benefit to this approach to typography that is worth expounding upon here.
By establishing a mathematical basis to relate typographical variables, you can predict and control type with algorithms instead of relying upon arbitrary selection from designers.
This opens up the doors for sophisticated tools (like the Golden Ratio Typography Calculator) or even cooler stuff, like design controls that allow users to experiment with different fonts/sizes while adjusting all typographical and spatial values based on the resulting line height of the primary text (this is the vertical baseline grid on steroids).
For me, the bottom line is this: Designers rely on arbitrary selection for things like line heights and line widths, and I am convinced there's a better way to go about this.
Research like this is only the tip of the iceberg, obviously, but at the very least, I will continue to ask the tough questions and to challenge the baseless status quo.
Replacing arbitrary numbers with arbitrary formulae doesn't make the whole thing much less arbitrary.
I'm excited about this research and especially about the idea of understanding typography through mathematics.
As far as "arbitrary formulae" are concerned, Golden Ratio Typography does take one giant leap past the arbitrary selection of line heights and/or line widths:
The font size, line height, and line width are all constrained and related to one another mathematically. This relationship ties the three dimensions together in a way that arbitrarily selected values for these dimensions cannot.
Thumbnail sketch: people often want to generate sequences of distinct colors for data visualization, for example for successive map layers. You can make a sequence of n trivially: pick n evenly spaced points on the color wheel. But things get trickier when you add two practical requirements: handle infinite n, and produce colors such that any contiguous dozen or two are always reasonably distinguishable. You can do a fair job by interleaving or using randomness, but when I tried I ended up with code that was (1) more complex and carrying more state than I thought was reasonable for something so simple-seeming or (2) a bunch of unreadable bitwise operations and such. Plus, there’s clear approach to optimality.
The golden angle comes to the rescue by being “the most irrational number”. As you immediately spotted, any irrational number will have no repeats. But clearly, one quite near a ratio of small integers will soon have many apparent repeats: for example, 1:1.50000004917813... might be technically fine, but perceptually it’s the same small set of colors for a long time. So what’s special about φ for our purposes is that, speaking informally, it’s as far as you can get from ℚ.
Therefore, given any angle on the color wheel, we can simply add the golden angle and be assured of (1) a quite different color and (2) more quite different colors as we recurse, until we’re packing the color wheel so densely that we’re simply fighting the eye’s inability to distinguish similar colors.
I think this might be useful to dataviz people, who often seem to resort to fairly Byzantine methods. I’ve noticed several Stack Overflow threads on color sequences that gave only more complex and less useful ones.[0]
And I think this counts as a place where using φ in the real world has a clear justification. So we’re up to one….
0. For example:
· http://stackoverflow.com/questions/309149/generate-distinctl...
· http://stackoverflow.com/questions/773226/generate-unique-co...
· http://stackoverflow.com/questions/470690/how-to-automatical...
· http://programmers.stackexchange.com/questions/44929/color-s...
However, some of these people want values distributed in perceptual 3-space, which is more than this golden angle method can do by itself.
I wouldn't say that this article is blindly based on the golden ratio.
It has merit.
But while on the subject of frowned upon...
Do you know what else was frowned up at one point?
The Sun being the center of our solar system.
Just because it's frowned upon doesn't mean it's not true :-P
"""In the equation above, the optimal line height is produced when h equals the golden ratio (φ). """
To my eye, Golden Ratio Typography seems to hit the sweet spot.
In a future article, I'm going to talk about the notions of a "sweet spot" and a "good eye for design" and show how these concepts point to the existence of universal subjective preferences.
And then squaring to get the width has no basis at all. Its numerical bullshit.
It just happens to be a fairly reasonable ratio for a lot of purposes (and happens to be the ratio ϕ = a/b such that ϕ = a/b = (a + b)/a), and sometimes therefore an easy rule-of-thumb. Use it or don’t use it. You won’t be missing some secret of the universe.
The author is buying into unfounded hype and mysticism regarding the golden ratio. Debunked: http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
"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:"
The author chooses to square height to determine the "optimal" width, as the "simplest equation to express" the exponential.
But obviously the best educated guess would be W = Lh^GOLDEN RATIO
This golden-ratio based heuristic is a good way to automatically come up with an initial model, and is therefore useful.
[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.
Not at all! Just:
html.replace(/\s+(\S+)$/mg, " $1")
since it's a WP install, it might have been hacked
hmm maybe it's a false positive since it thinks it's a bad gif file