Golden Ratio for Readable Web Typography(pearsonified.com)
pearsonified.com
Golden Ratio for Readable Web Typography
http://www.pearsonified.com/2011/12/golden-ratio-typography.php
13 comments
Everyone seems to be taking this article as gospel, but that is not the intent at all.
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.
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.
You are making a lot of bold claims about subconscious programming and mathematical symphonies and beautiful blueprints provided by nature that can be seen in art and architecture throughout history. This sounds a lot closer to gospel than incidental recommendations.
Replacing arbitrary numbers with arbitrary formulae doesn't make the whole thing much less arbitrary.
Replacing arbitrary numbers with arbitrary formulae doesn't make the whole thing much less arbitrary.
Fantastic! I certainly don't want anyone to think this is "incidental," because who the hell gets excited over that?
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.
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.
[deleted]
I agree with you. Yet, I am passing this on to my company's designers, if for no other reason than to convince them to stop filling 600px of space with little 12px text.
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.
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.
For the past year, I've told people that size 14, and most cases size 16, is the new size 12.
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.
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.
That's a really interesting video; I asked about this on math.stackexchange, and it already has one response about why φ is optimal for your color spacing.
http://math.stackexchange.com/q/93623/37
http://math.stackexchange.com/q/93623/37
Hey, that’s wonderful! I’ve linked back in the video description. Is there a place to ping you when I get the blog post up?
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.
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.
This distinct colors sequence thing reminded me of http://www.ridiculousfish.com/blog/posts/colors.html (which does not use φ, but...)
I thought that design (blindly) based on Golden Ratio and the Fibonacci-Series was frowned upon here on HN
http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
Blindly?
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
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
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.
"""In the equation above, the optimal line height is produced when h equals the golden ratio (φ). """
"""In the equation above, the optimal line height is produced when h equals the golden ratio (φ). """
There’s no empirical basis for the mystical claims about the golden ratio, and most of the examples from ancient buildings, famous artworks, attractive people’s faces, and so on are a result of selecting examples which match the pattern while ignoring those which don’t – yay numerology!
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.
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.
[deleted](1)
Especially as the line height recommended usually depends on the typeface as some are taller or shorter than others.
And then squaring to get the width has no basis at all. Its numerical bullshit.
And then squaring to get the width has no basis at all. Its numerical bullshit.
The lowercase phi (φ) is the accepted standard denotation for the golden ratio.
ok, but how do we know that the golden ratio is the optimal ratio for lines of text?
We don't know what's universally optimal, but we can test different ratios/mathematical bases and see what the results look like.
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.
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.
"nature has given us a remarkable blueprint for beautiful and effective proportionality...Evident in plants, animals, the shape of galaxies, and even your DNA..."
The author is buying into unfounded hype and mysticism regarding the golden ratio. Debunked: http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
The author is buying into unfounded hype and mysticism regarding the golden ratio. Debunked: http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
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:
"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
"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
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.
This golden-ratio based heuristic is a good way to automatically come up with an initial model, and is therefore useful.
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.
[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.
[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.
Short of rewriting the copy (which they could have done, of course), dealing with orphans on the web is kind of impossible. It's a valid point, but I wouldn't let that stop you from taking the rest of the article at face value.
[...] dealing with orphans on the web is kind of impossible.
Not at all! Just:
Not at all! Just:
html.replace(/\s+(\S+)$/mg, " $1")
Well, yeah, but anything is possible with regex. (EXCEPT PARSING HTML, I KNOW.) I meant more along the lines of your typical HTML/CSS markup.
This is great. I love when people take common sense and apply it in uncommon ways. This would be very 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
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
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
ESET NOD32 is blocking this site btw.
I really wish this was baked into some SASS framework so I could get this for free.
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