Golden Ratio for Readable Web Typography

http://www.pearsonified.com/2011/12/golden-ratio-typography.php

by pastr • 15 years ago

118 30 15 years ago

zmanji• 15 years 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• 15 years ago

The lowercase phi (φ) is the accepted standard denotation for the golden ratio.

mrgoldenbrown2• 15 years ago

ok, but how do we know that the golden ratio is the optimal ratio for lines of text?

justincormack• 15 years 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• 15 years 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.

atacrawl• 15 years 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• 15 years 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

stderek2• 15 years 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• 15 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:

"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

celoyd2• 15 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.

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

Legion• 15 years 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.

stderek2• 15 years 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.

pearsonified3• 15 years 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-...); 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.

extension• 15 years ago

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.

cobbal• 15 years ago

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

celoyd2• 15 years ago

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.

akx• 15 years ago

This distinct colors sequence thing reminded me of http://www.ridiculousfish.com/blog/posts/colors.html (which does not use φ, but...)

dmerfield• 15 years ago

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

54mf3• 15 years 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• 15 years ago

[...] dealing with orphans on the web is kind of impossible.

Not at all! Just:

  html.replace(/\s+(\S+)$/mg, "&nbsp;$1")

EDIT: Bugfix, don't replace whitespace without any characters after, replace all occurrences in a multi-line text

54mf3• 15 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.

[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• 15 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.

This golden-ratio based heuristic is a good way to automatically come up with an initial model, and is therefore useful.

Deejahll• 15 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..."

The author is buying into unfounded hype and mysticism regarding the golden ratio. Debunked: http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm

bung• 15 years ago

ESET NOD32 is blocking this site btw.

ricardobeat• 15 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.

ck2• 15 years 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

Golden Ratio for Readable Web Typography

Related Stories