5 ms·

Golden Ratio for Readable Web Typography

118 points by pastr 15y ago

zmanji 15y ago
I really wish this was baked into some SASS framework so I could get this for free.
mrgoldenbrown 15y ago
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 (φ). """
- ghurlman 15y ago
  The lowercase phi (φ) is the accepted standard denotation for the golden ratio.
  - mrgoldenbrown 15y ago
    ok, but how do we know that the golden ratio is the optimal ratio for lines of text?
    - pearsonified 15y ago
      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.
- justincormack 15y ago
  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.
- jacobolus 15y ago
  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.
  - deleted 15y ago
    [deleted]
    - jacobolus 15y ago
      Not for the ones typically cited, such as Leonardo’s work, or the Parthenon, they didn’t. Some artists certainly did. Le Corbusier (architect) based a lot of his designs on it, for example, as did Jan Tschichold (typographer). Anyway, they weren’t working from anything empirical, but from their own mystical preferences.
atacrawl 15y ago
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.
HankMcCoy 15y ago
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
- stderek 15y ago
  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
NHQ 15y ago
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
celoyd 15y ago
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. 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 http://vimeo.com/34069290
- Legion 15y ago
  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.
  - stderek 15y ago
    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.
- pearsonified 15y ago
  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-size-threshold 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.
dmerfield 15y ago
It's difficult to trust an article on typography whose first paragraph ends with an orphan.
- 54mf 15y ago
  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.
  - yesbabyyes 15y ago
    [...] dealing with orphans on the web is kind of impossible. Not at all! Just: html.replace(/\s+(\S+)$/mg, " $1") EDIT: Bugfix, don't replace whitespace without any characters after, replace all occurrences in a multi-line text
    - 54mf 15y ago
      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.
54mf 15y ago
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.
AnthonBerg 15y ago
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.
Deejahll 15y ago
"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 http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm
bung 15y ago
ESET NOD32 is blocking this site btw.
ricardobeat 15y ago
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.
ck2 15y ago
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

118 points by pastr 15y ago

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

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 (φ). """

ghurlman 15y ago
The lowercase phi (φ) is the accepted standard denotation for the golden ratio.
- mrgoldenbrown 15y ago
  ok, but how do we know that the golden ratio is the optimal ratio for lines of text?
  - pearsonified 15y ago
    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.
justincormack 15y ago
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.
jacobolus 15y ago
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.
- deleted 15y ago
  [deleted]
  - jacobolus 15y ago
    Not for the ones typically cited, such as Leonardo’s work, or the Parthenon, they didn’t. Some artists certainly did. Le Corbusier (architect) based a lot of his designs on it, for example, as did Jan Tschichold (typographer). Anyway, they weren’t working from anything empirical, but from their own mystical preferences.

atacrawl 15y ago

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.

HankMcCoy 15y ago

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

stderek 15y ago
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

NHQ 15y ago

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

celoyd 15y ago

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. 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 http://vimeo.com/34069290

Legion 15y ago
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.
- stderek 15y ago
  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.
pearsonified 15y ago
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-size-threshold 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.

dmerfield 15y ago

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

54mf 15y ago
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.
- yesbabyyes 15y ago
  [...] dealing with orphans on the web is kind of impossible. Not at all! Just: html.replace(/\s+(\S+)$/mg, " $1") EDIT: Bugfix, don't replace whitespace without any characters after, replace all occurrences in a multi-line text
  - 54mf 15y ago
    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.

54mf 15y ago

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.

AnthonBerg 15y ago

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.

Deejahll 15y ago

"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 http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm

bung 15y ago

ESET NOD32 is blocking this site btw.

ricardobeat 15y ago

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.

ck2 15y ago

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