TE
TechEcho
Home24h TopNewestBestAskShowJobs
GitHubTwitter
Home

TechEcho

A tech news platform built with Next.js, providing global tech news and discussions.

GitHubTwitter

Home

HomeNewestBestAskShowJobs

Resources

HackerNews APIOriginal HackerNewsNext.js

© 2025 TechEcho. All rights reserved.

Golden Ratio for Readable Web Typography

118 pointsby pastrover 13 years ago

13 comments

celoydover 13 years 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.<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>
评论 #3383916 未加载
评论 #3383470 未加载
评论 #3384852 未加载
评论 #3387362 未加载
HankMcCoyover 13 years ago
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>
评论 #3383854 未加载
mrgoldenbrownover 13 years 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.<p>"""In the equation above, the optimal line height is produced when h equals the golden ratio (φ). """
评论 #3383266 未加载
评论 #3383050 未加载
评论 #3383019 未加载
Deejahllover 13 years 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..."<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>
NHQover 13 years 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:<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
AnthonBergover 13 years 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.<p>This golden-ratio based heuristic is a good way to automatically come up with an initial model, and is therefore useful.
54mfover 13 years 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.<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.
dmerfieldover 13 years ago
It's difficult to trust an article on typography whose first paragraph ends with an orphan.
评论 #3383600 未加载
atacrawlover 13 years ago
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.
ricardobeatover 13 years 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.
ck2over 13 years ago
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
bungover 13 years ago
ESET NOD32 is blocking this site btw.
zmanjiover 13 years ago
I really wish this was baked into some SASS framework so I could get this for free.