16

Chris Pearson makes a number of claims in his article Secret Symphony: The Ultimate Guide to Readable Web Typography, which I find fascinating, and I would like to know: are the formulas he proposes applicable and useful when using TeX?

Specifically, Pearson asserts that there is a relationship between the font height (or x-height), line height and line width whereby using the golden ratio one can with two of the above calculate preferable variables for displaying text on the web for improved appearance and reading.

I thought the article was fascinating and well written, and though I am not qualified to comment on the merits I also found the criticisms and comments to support a well thought out methodology on the hypothesis (utilization of the golden ratio to lay out text).

Pearson even put together a web-site to calculate the relevant Cascading Style Sheet variables.

Pearson has posited the following equations:

(1) for calculating the line-height:

Line height ratio tuning equation

(i.e. h = \varphi - \frac{1}{2\varphi}\left( 1 - \frac{w}{w_\varphi} \right))

and

(2) for calculating the line width:

Line width tuning equation

(i.e. w = {l_\varphi}^2[1 + 2\varphi(h - \varphi)])

where h is the font height, w is the line width, l is the line height, and φ is the golden ratio.

Pearson then goes on to state:

Golden Ratio Typography can be used to fine tune the typography of any medium!

Are the above formulas applicable and useful when using TeX? Insofar as this is a useful methodology for determining the relationship between line width, line height and font height, can it be applied to TeX and if so how?

There are some apparent considerations in the article because it caters to presentation on the web and which considerations are not relevant to typesetting with TeX, notably with respect to the need to round line height and other variables on the web, and the need to use font-height because x-height is unavailable. Are there others?

  • Simple as \vsize=1.6180\hsize. – morbusg May 19 '13 at 13:56
  • @morbusg: From the comments in the article [this not the proper approach because] font size, line height, and line width are all dependent variables. In other words, you cannot change one without changing the other two. The reason why the equation you suggest is incorrect is the sine qua non of the article. :) – Brian M. Hunt May 19 '13 at 14:02
  • Line width (\hsize) can be set 1.5*alphabet size in em or 2*font size in picas. Or, those are one way… ~66 chars per line optimal – morbusg May 19 '13 at 14:08
  • @morbusg: I am not sure that's right - what's your source for 66 CPL? Generally, longer line lengths are read faster, but shorter line lengths are preferred. This is supported by e.g. Duchnicky & Kolers, 1983; and, Dyson & Kipping, 1998. These articles both concluded that 75 and 100 characters per line were read faster. In particular "Dyson also noted that when testing subjects, people preferred the 55 character line length, again, despite the fact that they read longer line lengths faster." 66 CPL seems oversimplified - does it give optimal reading speed, or user retention/preference? – Brian M. Hunt May 19 '13 at 14:26
  • So… every variable's definition is dependant on eachother? I don't think you can do that with TeX. There must be thousands of studies regarding "optimal" line widths, some of the more absurd (~100cpl) seem to be ham-fisted with no mention of line height, for example. My source for "optimal" 66cpl is Robert Bringhurst's The Elements of Typographic Style. But like the formula in your question, everything affects everything. – morbusg May 19 '13 at 14:37
17

(I made the mistake of reading the article ...)

I've never read any Official Source on typography. Obviously, as a TeX practitioner (and one-time amateur calligrapher) I'm interested in typography but my knowledge is zero and therefore my typographic wisdom is based entirely on "I know what I like when I see it". I am, however, a professional mathematician.

Let's take the article step by step:

The first segment builds up to the claim:

The mathematical proportions of your typography are vitally important to how readers perceive both your site and your content.

Even as a mathematician I'd consider the use of "vitally" to be hyperbolic in nature. However, we'll let that pass for now.

The second segment introduces font size, line height, and line width. After discussing them a bit, the author says:

This leads to an important conclusion: As font sizes increase, line heights must also increase in order to maintain the geometric proportions of a paragraph. In other words:

Font size and line height are proportionally related.

Now to say that x and y are proportionally related means x is a multiple of y. That's a lot stronger than saying "as x goes up so does y". The latter simply means that each is an increasing function of the other but there are a lot more increasing functions than just linear. As any good TikZer knows, you don't want things to always scale linearly - see the section on arrows (74.1.2 in PGF v2.10).

(The relationship that I would expect here is that it is the separation between the lines that is the one to focus on and I would anticipate some sort of logarithmic relationship.)

The line width gets a similar treatment but with the weaker conclusion:

For any font size, the line height must increase as the line width increases.

Now we come to the crux of the matter, the assertion:

When nature needs a proportion to relate things and to provide order on any scale, it tends to use the golden ratio.

Now, the golden ratio does appear to crop up a lot "in nature". I'm not going to go into why that is (though there's a lot of interesting reading essentially saying that it turns up because we look for it: if a constant appears somewhere between 1.6 and 1.7, the error is probably sufficiently large that declaring it to be the golden ratio is as good an answer as any other). But this isn't about nature, it's about aesthetics and as for aesthetics then "Most people prefer it" is actually a reasonable starting point. In fact, I'd far rather the author had said "I did some tests and people quite liked the golden ratio one" than trying to justify it based on "nature". (For another read on the aesthetics of the golden ratio, take a look at https://photo.stackexchange.com/q/8965/1422 on the Photography sister site.)

So there is no justification for using the golden ratio other than "[the author] quite likes it". But that's fair enough. Let's take that as an axiom rather than a proposition.

With that axiom and the axiom of proportionality, the assertion that the line height should be 1.618 times the font size is a reasonable conclusion. Then we get to the assertion about 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: w = l^2

(Here w is line width and l is line height. Recall that l = 1.618 f where f is the font size.)

What is intriguing here is the statement "basic mathematical modeling [sic]". What mathematical modelling? Well, we have to do a bit of guesswork here. In the comments when queried about the square rule, the author links to http://dropshado.ws/post/12971305087/webkit-zoomed-out-font-size-threshold. In the follow-up article (http://www.pearsonified.com/2012/01/characters-per-line.php) there is a similar graphic.

Now the first thing you learn in a maths degree is to ask: "What are the axes?". They are fascinating here. The x-axis is linear but the y-axis is not! Roughly speaking, the y-axis puts the value n at height n + (n-1) + (n-2) + ... + 1 (modulo the fact that it doesn't start exactly at 0). This is because the line corresponding to font size n is stacked on top of the line corresponding to font size n-1, and if you imagine a stack of boxes where the nth box is of height n then the nth box is at position n + (n-1) + (n-2) + ... (depending on exactly where you put the mark on the box then the first term might vary). There's a formula for this. This sum is n(n+1)/2. And this is roughly n^2. So the graph ends up plotting n against n^2 (modulo some constant of proportionality) and all that is being observed is that If you take the same box and scale everything proportionally, everything scales proportionally..

So the "mathematical model" is misinterpreted.

Now it would be tempting to say that the actual relationship between line width and font size is proportional. But the problem with this is that the "model" is the following:

"Take a scalable font, typeset a sentence in that font at varying font sizes (with no line breaks). Measure the resulting line widths."

The key here is that as the font is scalable, everything simply gets scaled linearly. So it is no wonder that a linear relationship is found.

The formulae arrived at so far can be used to determine any two of the quantities from the third. The final section deals with the situation where you know two of the quantities and want to optimise the third. There is no derivation of the formulae, but they look a bit like first-term Taylor approximations. But however it is derived, the point is that (in the opinion of the author) these are not the optimal equations to use. These are only to be used if there are some other constraints (say, the width of the page). So these are, in fact, a red herring.

Let's sum up. We have the axioms:

  1. Font size and line height are proportionally related.
  2. For any font size, the line height must increase as the line width increases.
  3. When nature needs a proportion to relate things and to provide order on any scale, it tends to use the golden ratio.

From which the deductions are l = 1.618 f and w = l^2.

As I've hopefully made clear, the second deduction w = l^2 is dubious. And moreover the first axiom is actually a deduction from the statement:

As font sizes increase, line heights must also increase in order to maintain the geometric proportions of a paragraph.

which is likewise a dubious deduction.

So in answer to your actual question:

Are the above formulas applicable and useful when using TeX?

I would answer a flat No. The author is correct in pointing out that there are a variety of quantities under our control and that we ought to be aware of them. But TeX already gives us ways to control these variables via the fontsize, the \baselineskip (and \lineskip), and \textwidth. Indeed, the LaTeX command \fontsize takes two arguments since the relationship between fontsize and lineheight (aka baselineskip) is not assumed to be linear.

Far better is to experiment with these values for yourself and test them on people to see which provide a reasonable reading experience.


Inspired by morbusg's answer, here's some code for playing around with what this golden ratio looks like. As well as comparing different font sizes, it's also worth comparing the same font size but for different fonts. The geometry package is because at 20pt, the line width is quite large.

\documentclass{article}
%\url{http://tex.stackexchange.com/q/115076/86}
\usepackage[paperwidth=100cm]{geometry}

\usepackage{fontspec}
\setmainfont{TeX Gyre Pagella}

\ExplSyntaxOn
\DeclareDocumentCommand\golden { m }
{
  \begin{minipage}{\fp_to_dim:n {#1*#1*1.618*1.618}}
  \fontsize{#1}{\fp_to_dim:n {#1 * 1.618}}\selectfont
  \hissmile
  \end{minipage}
  \bigskip
}
\ExplSyntaxOff

\newcommand\hissmile{%
Laura stood across the street waiting for the people to come out from the picture-show. She couldn't have said just why she was waiting, unless it was that she was waiting because she could not go away. She was not wearing her black; she had a reason for not wearing it when she came on these trips, and the simple lines of her dark-blue suit and the smart little hat Howie had always liked on her, somehow suggested young and happy things. Two soldiers came by; one of them said, ``Hello, there, kiddo,'' and the other, noting the anxiety with which she waited, assured her, ``You should worry.'' She looked at them, and when he saw her face the one who had said, ``You should worry,'' said, in sheepish fashion, ``Well, I should worry,'' as if to get out of the apology he didn't know how to make. She was glad they had gone by. It hurt so to be near the soldiers.
}

\begin{document}
\golden{10pt}

\golden{12pt}

\golden{20pt}

\end{document}
  • 2
    If we were actually to use l = 1.618 f and w = l^2 with an 11pt fontsize that would mean fontsize/leading times measure of 11/17.8 × 27: I just used this setting: looks like a rather narrow column with doublespacing - not very pleasing... – clemens May 20 '13 at 10:52
  • @cgnieder I had thought of posting some images typeset at various values - given by the "golden ratio" formulae and in TeX's normal choices - but I ran out of steam. Once I'd realised that the maths was dubious, I decided to focus on that and leave the typography to others more knowledgeable than myself. – Loop Space May 20 '13 at 11:08
  • 2
    It's not too wise to wrap up typography in maths too tight, anyway. To quote the typographer Paul Brenner in Die Kunst der Typographie (translation by me): “The belief in counting and measuring in all arts seduces to the most crude mistakes.” (He goes on about this (including the golden ratio) for a page or two.) – clemens May 20 '13 at 11:38
  • @cgnieder I agree with that sentiment. Just because we can measure something doesn't mean that it is helpful to do so, particularly if there is a loosely related something that we truly value but can't measure. Then the thing we can measure can become a substitute for the thing we truly value leading to all sorts of skewed behaviour. – Loop Space May 20 '13 at 11:45
  • 1
    Re: Nature and golden ratio: Vi Hart's explanations. – morbusg May 20 '13 at 14:41
6

It is very important to note that the formulas in the question are like that because:

There’s one little problem here, though: The web isn’t nearly as precise as these equations.

You see, web designers are constrained to using integer values for things like font size, line height, and line width (this will be the case until sub-pixel rendering becomes a reality).

With TeX, we don't need those "correction" equations.

Here is my try (plain-XeTeX), but note I couldn't make TeX perform some calculations (hopefully I understood correctly):

% Our test subject font:
\font\tenrm="Minion Pro:mapping=tex-text" at 11bp \tenrm
\font\tenit="Minion Pro/I:mapping=tex-text" at 11bp

\baselineskip=1.618\fontdimen6\font
%
% \hsize=\dimexpr\baselineskip*\baselineskip
% Doesn't work, but it is:
\hsize=319.148446488500742pt

\vsize=1.618\hsize

% Repeat for typeblock width in relation to paper width, etc.

\input TeX/his_smile
\bye

enter image description here

(Text from Project Guteberg)

  • Great post. Rounding issues aside, it would be very interesting to see an example employing the equations where resulting text is decidedly sub-optimal. – Brian M. Hunt May 20 '13 at 15:07
  • 3
    @Brian: Well, I'd probably go as far as to say that the example presented above is sub-optimal. Note how the x-height doesn't come into play anywhere, and it should. Neither paper width/height, which also should. Also font design weight/line width should somehow be accounted for. The base measure of font-size * \phi gives IMHO too much for line height. Of course all these are stylistic decisions which might work well in some situations while not so well in others. (For example, imagine reading a 1k-page book set in the above style) – morbusg May 20 '13 at 15:25
  • @morbusg: I agree. This is close to pleasing, but just a little bit too much space. I think this constitutes quasi-empirical support for Andrew's argument of incoherence in the claim. – Charles Stewart May 20 '13 at 15:30
  • For what it's worth, using the x-height seems to yield better results i.e. \baselineskip=1.618\fontdimen5\font – Brian M. Hunt May 20 '13 at 16:43
  • @Brian: Heh, I actually tried that before posting the answer, but I realized that with the example 11bp font, 1.608 * 4.82573pt = 7.80803114pt (where 4.82573pt is the x-height aka \fontdimen5); So it's smaller than the font height, which means that the \baselineskip won't even come to effect, instead \lineskip will. – morbusg May 21 '13 at 13:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.