
Golden Ratio for Readable Web Typography - pastr
http://www.pearsonified.com/2011/12/golden-ratio-typography.php
======
celoyd
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>

~~~
pearsonified
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-...](http://dropshado.ws/post/12971305087/webkit-zoomed-out-font-size-
threshold)); 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
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.

~~~
pearsonified
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.

------
HankMcCoy
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>

~~~
stderek
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

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

~~~
jacobolus
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.

------
Deejahll
"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>

------
NHQ
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

------
AnthonBerg
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.

------
54mf
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.

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

~~~
54mf
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
_[...] 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

~~~
54mf
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.

------
atacrawl
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.

------
ricardobeat
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
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

------
bung
ESET NOD32 is blocking this site btw.

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

