Right now, there’s a mathematical symphony happening on your website.

Every single one of your readers is **subconsciously aware** of this symphony, and more important, they are all pre-programmed to respond to it in a particular way.

The question is this:

Is your site’s symphony pleasing and inviting to your readers, or does it turn them off and make it harder to communicate with them?

### The Mathematical Symphony of Typography

As it turns out, this symphony is not unique to websites. You “hear” it every time you read a book, newspaper, magazine, or web site—every place where typography exists.

At first glance, you might think that typography and math have nothing to do with one another. After all, typography consists of letters and words, and math is…well…numbers.

But the truth is, typography is a combination of artistic letterforms and mathematical proportions, an exquisite marriage of form and function.

When the mathematical proportions of your typography are harmonious, your site—and your content, specifically—look appealing to readers.

Conversely, when the proportions of your typography are imbalanced, your content isn’t as attractive to readers, and your site seems cluttered and disorganized.

The bottom line is this:

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

So how can you tweak the proportions of your typography to create a beautiful mathematical symphony?

Let’s take a trip down the typographical rabbit hole and find out!

### The 3 Fundamental Dimensions of Typography

Every paragraph you’ve ever seen has 3 primary dimensions. The first two, **font size** and **line height**, are vertical in nature.

Figure 1. How font size and line height work in web browsers. Font size is measured from the top of a capital letter (S) to the bottom of descending characters (y). Half the line height extends both up and down from the centerline of the text.

The third dimension, **line width**, is horizontal.

Figure 2. Line height and line width form the vertical and horizontal dimensions of typography.

Taken together, these 3 dimensions are responsible for how you perceive typography.

To get a feel for how these dimensions work together, it’s helpful to look at a few text samples where one dimension is varied and the others are held constant. This way, you’ll be able to see the effect that each dimension has on the other two.

In Figure 3 below, the line height and line width are fixed, and the font size is varied from 13 to 16px.

Figure 3. With the line height and line width held constant, it’s clear that larger font sizes require larger line heights to maintain both proportion and readability.

In the first paragraph of Figure 3, the line height is large enough relative to the font size to produce generous whitespace between the lines of text. However, in the second paragraph, the line height is not large enough relative to the font size to yield sufficient whitespace, and it looks cramped as a result.

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.

In the next example, the font size and line height are fixed, and the line width is varied from 233 to 466px.

Figure 4. As the line width is increased, the text becomes harder to read because the line height has not been increased to offset the effect of the width.

Despite the fact that the line heights are the same in the two paragraphs of Figure 4, their readability is quite different because of the differing line widths.

As the line width gets longer, it becomes more difficult to perform a return sweep (the movement of the eyes from the end of one line to the beginning of the next) *unless the line height is also increased to account for this effect*.

Research confirms this conclusion, too. In a 2004 study from the University of Reading (how ironic), Mary C. Dyson states:

Long line lengths are said to need more interlinear spacing to ensure that the eyes locate the next line down accurately when executing a return sweep…

Bottom line? It’s clear that line heights and line widths are mathematically related in some way. More specifically:

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

But what is the *exact* mathematical nature of this relationship?

### Harmonious Proportions and the Golden Ratio

Answering this question might be easier than it first seems because **nature has given us a remarkable blueprint for beautiful and effective proportionality**.

Evident in plants, animals, the shape of galaxies, and *even your DNA*, this proportionality blueprint is so pervasive that humans have noticed it for thousands of years. We’ve used it, too—it can be seen in art and architecture throughout history.

So what is this incredible proportion that “really ties the room together?”

I’m talking, of course, about the golden ratio.

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

With typography, the goal is to relate font size, line height, and line width in an aesthetically pleasing and orderly way.

Could it be, then, that the golden ratio is applicable to typography as well?

### The Mathematics of Golden Ratio Typography

As you probably guessed, the answer is an emphatic **yes**! Here’s how it works:

First, the **font size** (*f*) **and line height** (*l*) **are proportionally related** through a ratio (*h*). Mathematically, this is about as simple as it gets, and the basic equation looks like this:

In the equation above, the **optimal line height** is produced when *h* equals the golden ratio (*φ*). This insight gives us the following equation:

Unfortunately, just knowing the optimal line height for a given font size is not enough.

Earlier, you saw that all 3 typographical dimensions—font size, line height, and line width—affect one another. Therefore, **you cannot talk about line height or font size without also considering the line width**.

Based on this reasoning, there must also be an **optimal line width** that corresponds to the optimal line height from the equation above.

Problem is, you don’t know the exact relationship between line width and line height. All you know for sure is that the line width is significantly greater than the line height.

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:

This is remarkable because now, for the first time, you have a solid mathematical basis for the relationship between font size, line height, and line width.

**Note to designers:** Golden Ratio Typography is intended to serve as a *basis* for proper typesetting. Factors such as x-height and other typeface metrics also influence typography and should be considered in finalized designs. Golden Ratio Typography provides the most rational starting point for adjustments of this nature.

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

The above equations all yield highly precise decimal values, and simply rounding the answers to the nearest integer produces significant errors that will cause your resulting typographical proportions to be imprecise.

The bottom line is that **the web is not optimal**, and therefore, the optimal equations presented above are insufficient for fine-tuning your typography in the real world.

Ultimately, if you want precise Golden Ratio Typography on your website, then you’re going to need some tuning equations.

### Fine-tuning Golden Ratio Typography for the Web

To understand how typographical tuning works, let’s look at an example.

For a font size of 16px, the perfect line height is achieved when *h* equals the golden ratio. This yields a value of 25.88854px for the optimal line height. Using this value, you can then determine that the associated optimal line width is 670.21670px.

If you tried to use these values in your site’s CSS, you’d encounter problems.

Because it only resolves integer values, the web cannot display a line height of 25.88854px. Instead, the best you could do for the line height is 26px.

But 26px is greater than the optimal line height given by the equations, and as you’ve seen, you cannot change the line height—not even a little bit!—without also changing the associated line width (otherwise, the resulting proportions would not be precisely “golden”).

Therefore, the process of rounding the line height from 25.88854px to 26px requires that the resulting line width be greater than 670.21670px.

**This is the essence of typographical tuning:**

If your line width is shorter than the optimal width, then your corresponding line height must be less than the golden ratio. Conversely, if your line width is longer than the optimal width, your corresponding line height must be greater than the golden ratio.

Here’s a graph to help illustrate this concept for the most commonly-used font sizes:

Figure 5. As line widths increase, line heights must also increase to preserve geometric proportions and readability. The horizontal gray line in this graph represents the golden ratio (*φ*), and you can see how line heights behave relative to this value for the most commonly-used font sizes. Click to enlarge.

Mathematically speaking, the typographical tuning equations are more complicated than the equations you’ve already seen. Fortunately, I’ve done the heavy lifting here, so you can focus on the concept and the results.

Ultimately, you need two tuning equations for the different scenarios you will encounter while setting typography. Depending on the situation, you’ll need to determine:

- The adjusted line height, given a font size and line width
- The adjusted line width, given a font size and line height

Here are the equations to do just that:

Using the second equation above, you can determine the adjusted line width for the aforementioned example situation of a 16px font size with an integer line height of 26px.

The adjusted width, which will maintain golden typographical proportions for this scenario, is 685.32505px. For use on the web, this must be rounded to 685px.

Let’s look at another example that will hit closer to home (and this is how you can tune the typography on your own website right now):

What if you wanted to use a 16px font size in a content width of 550px? What should your adjusted line height be in this case?

Here’s how you’d solve that problem:

The answer here is 25.00169px. Once again, this value must rounded to the nearest integer for use on the web, and this results in an adjusted line height of 25px.

### Golden Ratio Typography Calculator

Obviously, doing a bunch of math every time you deal with typography will get tiresome very quickly.

To remedy this, I’ve created the Golden Ratio Typography Calculator, which makes it incredibly easy to determine the perfect typography for *any* situation!

Smart and versatile, the calculator will give you golden typographical recommendations based on the input you provide.

If you enter only a font size, the calculator will show you the optimal line height and line width for that font size.

If you enter only a width, the calculator will show you the best and second-best font size/line height combinations for that width.

If you enter both a font size and a width, you get the whole shebang:

- Optimized typography for your font size and width
- The best typography for the width you’ve provided
- The second-best typography for the width you’ve provided
- The optimal typography for the font size you’ve provided

Go play around with the Golden Ratio Typography Calculator and explore finely-tuned typography like never before!

### The Incredible Impact of Golden Ratio Typography

I hinted at this earlier, but I want to make it clear: The stuff I’ve shared with you today doesn’t just apply to the web. In fact…

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

Books, newspapers, magazines, websites, e-readers, you name it—they can all benefit from the improved proportions that Golden Ratio Typography provides.

And now, as you begin to view the world through the lens of Golden Ratio Typography, you’ll notice countless opportunities for typographical optimization.

### The Bottom Line

Golden proportions are evident throughout the universe, and they occur in places where form and function combine to produce a beautiful, effective, and useful result.

Remember the mathematical symphony of typography?

By employing Golden Ratio Typography, you’ll ensure that your site has a **golden symphony** that will appeal to everyone.

188 comments… read them below or add one

Holy Crap! I have a lot to learn. I have absolutely never put this much thought into typography before. Now I’ve gotta check out my site and see how badly I have messed it up.

Fascinating stuff. Thanks a lot for your hard work, Chris.

I first heard about this from husband, who is a builder.

We see the same ratios in buildings, mostly in older building before manufacturing homes took over. When we see a building that resonates with us, the golden ratio is always there.

Check out the book, The Old Way of Seeing, by Jonathan Hale.

It’s about time the online world catches up with the rest of the universe.

Keep up the great work.

Thanks for the book recommendation, Jenn. I love historical tie-ins :D

Awesome post! I especially love that you have created a tool to help with the calculations =) I look forward to using it for my work and in helping the web look more beautiful (or readable)!

Allen

Epic post Chris! It’s obvious you spent a ton of time on this. Thanks, I learned a lot!

You sir are a gentleman and a scholar. You honor the passing of the late Steve jobs with this article. I can’t wait to employ these techniques on my own sites.

Holy cow homeh!

This is outstanding. I love the calculator.

Now it’s time to see how the top magazines / papers stack up to the golden ratio.

Fantastic work man. Definitely pushing the web to be a better place.

Very useful, I love the calculator!

“In the equation above, the optimal line height is produced when h equals the golden ratio (φ).” [citation needed]

How do you know that phi is the optimal ratio for line height? Is there research on this? You can assert that 1.6 produces good results, but you can’t just randomly claim it is optimal. Optimal under what conditions?

Peter, there’s nothing for me to cite because I’m the first person to conduct a unified mathematical analysis on the 3 dependent typographical variables (font size, line height, and line width).

Your point about the golden ratio line height is valid in a universal sense, but

in the context of Golden Ratio Typography, the optimal line height is assumed to occur when the font size and line height exhibit golden proportions.This only happens when

hequalsφ.Finally, I’m not asking you to believe anything I say without thinking for yourself. I encourage you to look at the output of the Golden Ratio Typography Calculator and see what you think of the resulting text (its aesthetic appeal and its readability, specifically).

Unfortunately your calculator doesn’t allow me to choose different values for h to do the experiment you propose. For example, does h = 1.5 look better than h = 1.6? How about 1.7, or 2? You say you have conducted a unified mathematical analysis, yet in the article 1.6 appears suddenly and without justification, as though you have pulled 1.6 out of the sky, as you assert most designers do in your sample text. I’m comfortable with someone saying “I chose these particular ratios and they look nice.” I’m not comfortable with the claim that those are ratios are therefore mathematically optimal.

1.6 doesn’t appear out of anywhere. That’s 16, and that corresponds to a font size of 16px.

He’s speaking of the golden ratio (1.61xxx) and he’s right it seems to arrive unexplained, at least in this piece.

Mike and Peter, this article is an exploration into the idea that the golden ratio can be used in typography.

I’m not saying that this is the best (or the only) way to set type, but I do think the results are quite compelling.

The most basic mathematical relationship in typography is between the font size and the line height. In order to provide sufficient whitespace between lines of text (this enhances readability), the line height must be proportionally larger than the font size.

In other words, you need a ratio to relate the font size to the line height, so why not try the golden ratio? That’s the premise behind this article.

A mathematical analysis doesn’t get us any closer to an understanding of what is optimal. All it does is give you a hypothesis as to what might be optimal (which you must then test).

I’ve been having a play with the calculator for a while now, and I find the resulting output to be too variable to be useful. For example, Verdana (small x-height) vs Gill Sans (large x-height) produce two completely different layouts. See my comment below for more on this.

I agree that there are optimal ratios between the 3 variables, but I hope you don’t cling on to them all being of a Golden Ratio (and letting it skew your conclusions).

Seems to me you’ve missed this part:

“Note to designers: Golden Ratio Typography is intended to serve as a basis for proper typesetting. Factors such as x-height and other typeface metrics also influence typography and should be considered in finalized designs. Golden Ratio Typography provides the most rational starting point for adjustments of this nature.”

Notice the terms “basis” and “starting point”.

Exactly.

Our own blog is all about the content (hard news), and until recently, I never gave all that much thought to the finer points of typography, such as the relationship between line width and line height on the blog. I’ll have to keep a sharper eye on that in the future.

Chris, I saw this a few weeks ago already and I’m impressed.

Nice to finally read a original blog post about it. I already used your tool for a couple of sites and obeying “your” rules definitely changes things to the better.

I hope to see this little piece of code to be implemented in the upcoming Thesis 2.0 :-)

Keep on your good work. In some ways you are literally solving the fundamental problems of the web.

Thank you for doing so.

As a precocious child I could recite phi to more decimal places than was altogether healthy. And I was toying with the same idea as this a while back, but got bogged down with ems, lost the moment, gave up, and forgot all about it.

Well played for taking the time to see it through to the end. A fine bit of work, Sir!

I salute you!

Thanks, Mike!

I’ve been mulling over this post for a few minutes now. Here are my thoughts:

1. You are in danger of starting with a conclusion and working backwards to validate it. You should start with a hypothesis and test that hypothesis.

2. Why choose font SIZE as the basis for the calculations? It is an arbitrary choice. If anything, I would prefer to see X-HEIGHT used, since small differences in ascenders and descenders of a font can disproportionately skew the resulting ratios.

3. “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.” Hmmmm.

4. Browsers/CSS3/W3 now have a different definition of what a pixel actually is, due to the vast array of screen resolutions. A 16px font is no longer defined by being 16 pixels high (yes, it is confusing). So there’s no need to round to integers to satisfy the browsers.

Amelia, thanks for your thoughtful comments!

1. It’s important to note that Golden Ratio Typography is (and probably always will be) a hypothesis.

The hypothesis rests on the assertion that the golden ratio provides the optimal proportional relationship between typographical variables. In the article, I’ve simply explored the mathematics behind this assumption, and as you’ve seen, the results are simple, clear, and compelling.

2. In this case, font size is a more rational basis for the calculations because it’s accessible through CSS, while other typeface properties (like x-height, ascender height, or descender depth) are not.

I’ve done a lot of thinking about x-heights and typeface metrics, and I will illuminate my conclusions in a future post about my ongoing typographical research.

The bottom line is that, depending on the x-height of the typeface, a line height adjustment up or down from the calculator’s recommendations may be necessary.

In the meantime, I’ve added a note about this in the section entitled, The Mathematics of Golden Ratio Typography.

3. I’m glad somebody commented on the exponential relationship, as that’s a

veryinteresting piece of this mathematical puzzle. I’ll cover this in detail in the aforementioned (and forthcoming) article about my typographical research.Ultimately, the evidence for the exponential relationship is compelling. If you look at the first image here, you can actually see an exponential curve formed by the end of each line of text.

4. Indeed, the definition of a pixel is nebulous at best. Despite this, all browser rounding behavior is not created equal. Specifying exact integer values is the only way to avoid rounding differences between browsers and to ensure continuity across platforms.

Also, the relationship between line height and line width is extremely sensitive. If you change the line height a little bit, you have to change the line width a lot.

Since browsers will only render integer line height values, we must make width adjustments based on these integer values.

In other words, the rounding

isnecessary for both font sizes and line heights.Fantastic post. How does this influence kerning and tracking? By this I mean, do you only adjust tracking within the confines of the ratio being applied first?

Paulio, I never adjust tracking on the web. Sometimes, I’ll adjust the kerning on headlines that are sufficiently large (for instance, I like to kern Helvetica bold at sizes of 26px and up).

However, Golden Ratio Typography doesn’t really effect either of these two facets of typesetting.

Every typeface that I’d ever consider using comes with pre-defined kerning pairs (and ligatures), and so there’s rarely a need to think about these things when typesetting text for the web.

To answer your question specifically, I would not adjust tracking, but if I were ever to do it, I would only do so after applying Golden Ratio Typography.

Holy crap, dude.

Does it really contribute to the readers perception? Does it increases conversion in a webshop, for example?

Great questions, Jan-Willem. I have been asking myself the same things, and I plan to conduct a few studies to see what those answers might be.

In one preliminary study (where I did not achieve statistical significance), Golden Ratio Typography did not affect time on page or conversions either positively or negatively.

Despite this, I haven’t tested GRT on a landing page-style sales page, and that’s what I plan to do next.

Yeah … no.

For one, your method gives extremely wrong results for short and very long paragraphs.

For two, your method appears to be largely assertion, and there are measurement-driven studies of this matter – one of which you half-cite – which have extremely different conclusions. (They give the clear expectation that 55 letters +- 10 is virtually always desirable, and that comes from half a dozen different sources with different measurement methodologies.)

For three, web designers are absolutely not locked into integer values for their metrics, and no, actually, fractional pixel offsets don’t have dramatic impacts on type layout and proportion. Typically those impacts are less than three percent, if you do the math. For instance, in your own example with the 25.888px “ideal” line height, using 26 pixels results in an error of 0.112 pixels of placement, or less than half of one percent, or one pixel every just-over-eight lines aggregated.

Frankly, if you’d test, it’s quite likely that you actually can’t see that difference in vertically off-aligned a/b splitting.

Fourth, “when subpixel rendering [sic] becomes a reality” was more than a decade ago. You might mean subpixel alignment, but of course that was the case *before* pixel alignment hinting began; it’s actually a catastrophic error to want this, as it leads to blurry blobs of grey instead of letters, and hilariously misaligned letterforms, something someone a little older and more experienced with screens than you can tell you about. Here’s a primer: http://www.microsoft.com/typography/TrueTypeHintingWhat.mspx

Now, the idea that line height should imitate the golden ratio is frankly obscene. If you’d like, you can read the work of Jan Tschichold, the man who laid out the rules that basically all modern book designers use; he prefers 1.3:1, rather than your (frankly hideous) golden ratio of 1.618. You’ve more than doubled the standard intercharacter gap, and it’s just awful.

On top of that, it’s not clear how you got the idea that this was in any way a good ratio. I mean you can pick any mathematical constant and call it “perfect,” and it’ll have the same impact. Why not pi? Why not e? Why not the cube root of seven?

“With typography, the goal is to relate font size, line height, and line width in an aesthetically pleasing and orderly way.”

He says, going on to recommend a variety of different heights based on random constants and relationship to paragraph width, as if he had never seen a magazine with a float.

“The adjusted width, which will maintain golden typographical proportions for this scenario, is 685.32505px. For use on the web, this must be rounded to 685px.”

This is of course complete nonsense. Not only are fractional pixels legal, but they’re quite useful. Maybe you didn’t know this, but a CSS pixel is *not* a screen pixel. It hasn’t been for more than a decade. Go look up what the viewport is, or try transitioning an iPhone 3 webpage to iPhone 4.

Then you go on to suggest that various different paragraphs, given different widths, should have different line spacing. This is the fast route to looking like you’re doing your layout on Aldus Pagemaker on a Mac 4. This is absolutely god-awful. No, you should *not* have one paragraph at 25.888 and another at 25.003, and for you to say this in the same article where you claim 25.888 will cause serious problems vs 26 is just bizarre.

“If your line width is shorter than the optimal width, then your corresponding line height must be less than the golden ratio. Conversely, if your line width is longer than the optimal width, your corresponding line height must be greater than the golden ratio.”

Amusingly, basically none of your web page, including this quote, actually follow this rule. I suspect this is because you tried it, and realized how awful it looked.

“To remedy this, I’ve created the Golden Ratio Typography Calculator, which makes it incredibly easy to determine the perfect typography for any situation!”

I wonder if you even care that every single book design manual gives completely different advice. “Hi, I have a blog, so my opinion, based on no research or prior knowledge, should be declared perfect.”

What’s maybe the worst part of this is that there is in fact a legitimate, geometrically driven ratio based approach to height setting. It’s even called “the golden proportion,” and based on the golden ratio. You can find it in Tschichold’s books, as well as in the work of a dozen other people who actually measured this stuff and figured it out, instead of mis-representing opinion as fact.

It’s just that you don’t have any idea what you’re talking about, so you decided to make some crap up, and accidentally stumbled all over yourself.

What a depressing mess.

Prediction: “what’s that? Critical of me? I’m not posting it!”

Here’s the deal:

People look at 55 +- 10 as desirable because they believe it looks less assuming, and they think they can read it faster.

What people think isn’t always in line with the truth though…

In reality, people read longer line lengths faster, thus making longer line lengths more optimal.

The trick is, you must start an article with a shorter line length so you get people to start reading your stuff. Then, you widen your content out so they can continue reading it as fast as possible.

(You might think people will stop reading, but copywriters have long known that once you get people to read the first few sentences, they’re more likely to finish what they started).

“People look at 55 +- 10 as desirable because they believe it looks less assuming, and they think they can read it faster.”

No, they don’t. This is just you making up stories to fill in for your lack of knowledge, in order to justify an opinion you presented falsely as fact.

Here are a bunch of studies you haven’t read, but which you are falsely presenting bases for. These all give roughly the same number as ideal (+- 15%,) and take varying ideas on extremes, essentially all of which exclude your position. These numbers have held true for magazines, books and screens, and are based in many cases on carefully designed double blind tests with pre-test stated metrics for expectation, such as measured reading speed and measured comprehension. Sometimes these studies operate over hundreds of people.

Bernard, M., Fernandez, M. and Hull, S. (2002), The effects of line length on children and adults’ online reading performance, Usability News, 4.2.

Cohn, H. (1883), Die Hygiene des Auges in den Schulen, Leipzig.

Duchnicky, J.L. and Kolers, P.A. (1983). Readability of text scrolled on visual display terminals as a function of window size, Human Factors, 25, 683-692.

Dyson, M.C. and Haselgrove, M. (2001), The influence of reading speed and line length on the effectiveness of reading from a screen, International Journal of Human-Computer Studies, 54, 585-612.

Dyson, M.C. and Kipping, G.J. (1998), The effects of line length and method of movement on patterns of reading from screen, Visible Language, 32, 150-181.

Dyson, M.C. and Kipping, G.J. (1997), The legibility of screen formats: Are three columns better than one? Computers & Graphics, December, 21(6), 703-712

Javel, E. (1881), L’evolution de la typographic consideree dans ses rapports avec l’hygience de la vue, Revue Scientifique, 1, 802-813.

Tinker, M.A. and Paterson, D.G. (1929), Studies of typographical factors influencing speed of reading: Length of line, The Journal of Applied Psychology, 13(3), 205-219.

Weber, A. (1881), Ueber die Augenuntersuchungen in den hoheren schulen zu Darmstadt, Abtheilung fur Gesunheitspflege, Marz.

Youngman, M. and Scharff, L. (1998), Text width and margin width influences on readability of GUIs.

http://psychology.wichita.edu/surl/usabilitynews/72/LineLength.asp

Nanavati, Anuj A.; Bias, Randolph G. (Date unknown), Optimal Line Length in Reading–A Literature Review, Visible Language, v39 n2 p121-145 2005

Shaikh, A.D. (2005),. The effects of line length on reading online news, Usability News, 7.2

Shaikh, A. D. and Chaparro, B. S. (2004). A survey of online reading habits of Internet users. Proceedings of the Human Factors and Ergonomics Society 48th Annual Meeting, 875-879.

.

“What people think isn’t always in line with the truth though…”

Tell me about it. For example, here we’ve got a blog author with no data, no research, no studies, no metrics, no criteria, no measurements, really nothing more than a few beliefs presented as facts and an incorrect graph.

And when confronted with facts and questions, first he “tells us the story” which is in fact completely wrong, and then he ignores all the questions put to him with insinuations that things he’s never actually read are just somehow wrong.

.

“In reality, people read longer line lengths faster, thus making longer line lengths more optimal.”

Funny, when people measure it, that’s actually the opposite of the data they receive.

Does it embarrass you that you’re making claims without having researched them?

I bet it doesn’t.

.

“The trick is, you must start an article with a shorter line length so you get people to start reading your stuff. Then, you widen your content out so they can continue reading it as fast as possible.”

Prove it.

If you actually want to – and I basically guarantee you’ll just stick your fingers in your ears, ignore the data, ignore the research, stomp your feet and insist that you’re right – then you can do so easily.

Get a hotspot reader with analytics, and A/B split your readers. Use a cookie so they don’t get randomly switched back and forth. Choose your sample size before you do the test, so that you don’t end up closing the test on the first large variation you see, because then you have a random result. In my opinion, catching 200 uniques should be good enough.

And then just watch how long your pages take to read. Unlike you, I’ve actually done this, and reading speed peaks for my blog around 56 characters per line.

But hey, you “just know,” right?

Cough.

.

“(You might think people will stop reading, but copywriters have long known that once you get people to read the first few sentences, they’re more likely to finish what they started).”

Non sequitur. “You might think the sky is plaid, but it’s actually usually blue or black.”

That’s nice. Maybe next you can clue me in on what 2+2 is at the end of another series of unjustified, unmeasured assertions which fly in the face of all available research.

In terms of posturing, that wasn’t very successful.

You do a good job “sounding” like you know what you’re talking about, veiling your nonsense with research citations you obviously have not read, and I HAVE read.

Let’s start at the top…

You said, in response to my comment about people reading longer line lengths faster:

“Funny, when people measure it, that’s actually the opposite of the data they receive. Does it embarrass you that you’re making claims without having researched them?”

Aside from being rude and obnoxious, it’s quite clear you didn’t read the studies you cited. It actually seems like you went to one study, grabbed the bibliography, and pasted it here to sound smart.

Anyway, insults aside, here’s a direct quote from the research you presented from Dyson’s “The influence of reading speed and line length on the effectiveness of reading from screen”

“Line length has also been found to affect reading rate on screen (Duchnicky & Kolers, 1983; Dyson & Kipping, 1998). Both studies, although using different display technologies, found that longer line lengths (about 75 and 100 characters per line, respectively), were read faster than very short lines.”

And if you want some more proof… In the paper “The Effects of Line Length on Reading Online News” by A. Dawn Shaikh, she states this:

“Reading time was converted to words per minute. Results from a one-way within subjects ANOVA showed that there was a significant main effect of line length on reading speed, F (3, 57) = 3.45, p = .02, η2 = .15. The 95 cpl (M = 178.82, SD = 41.83) articles were read significantly faster than any of the other line lengths (35 cpl M = 167.21, SD = 33.66; 55 cpl M = 167.38, SD = 33.96 ; 75 cpl M = 169.44, SD = 33.48) (Figure 1).”

Again, longer line lengths are read faster than shorter line lengths.

But you know what, let’s take it back to the research you cited one more time. The research you “seemingly” have read, but based on the facts, and your nonsensical claims, it appears you haven’t.

You cited Youngman and Scharff, and here’s another quote:

“Youngman and Scharff (1999) used 12-point type and found that with no margins, when compared with 4 and 6 inch line lengths. Again, an 8-inch line length elicited ￼￼the fastest overall reading speed. users preferred the 4-inch.”

What’s the bottom line?

Longer line lengths are read faster than shorter line lengths. Period. End. of. story.

Now let’s talk about my hypothesis of beginning a blog post with shorter line lengths…

As you’ll notice in most of this research, despite people reading longer line lengths faster, they prefer shorter line lengths. This was shown in my quote from Youngman above (people preferred the 4-inch, despite reading the 8 inch the fastest).

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.

Since that’s their preference, it’s in your best interest as a website owner to give them that.

However, as I’ve clearly shown you, shorter line lengths are read slower than longer line lengths.

So if you want your content to be read faster, it would make sense to use longer line lengths. The research proves it.

But you can’t discount what people want… people prefer shorter line lengths, and that’s why you must begin an article with a shorter line length to get them reading.

And once you’ve got them reading, they’ll finish, as I said.

I do like your tactic though. Try to overwhelm people with data, and hope they haven’t read it. That might work somewhere else, but not here buddy :-P

I’m glad to see this article has stimulated some actual thought. :D

This is one of the most informative comment disagreements I’ve seen in a long time. Thank you for actually reading the information and making a valid argument. People who don’t have the time to read the content linked from the many sources listed in the previous comment may have otherwise taken the statements above as false and discounted the original post, which I find to be amazing.

I find this very interesting on a personal level as well as from a web designer’s perspective. I read a lot, both on screen & on page. I find that I will not read a website that runs edge to edge, using the whole screen. It’s overwhelming. There is something to be said about white space. Also, I find that even though I read fast, I find that my lines get crossed if the lines are longer. I’m certain this has to do with an astigmatism, which makes long line reading more difficult over time to read than shorter lines.

I’m glad for this “Golden Ratio” explanation. I know from my experience in designing websites, choosing the right font as well as the right amount of space around that font, keeps readers reading. That’s what we want!

Thank you for all this great information!

Oh, and one more thing, if you’d like to have a conversation like an adult, without insults, I’m down.

Not sure why you resorted to them first, but hey, I won’t hold a grudge.

Or, you can continue with your aggressive behavior, and that’s fine too. But next time, come at me with specific quotes and data.

Hehe, that really shut him up didn’t it :D

Ay, gettem, Derek.

This entire argument rests on the assumption that the golden ratio produces (subjectively) superior results to unspecified alternatives.

The stuff further down relies on the “educated guess” (conjecture) that the “optimal” relationship between line width and font size is (l*g)^2.

Nowhere is either of these conjectures proven or derived from proven premises.

Nowhere is effective font size computed in terms of the geometry of the typesetting of a specific line. For example, what if a line contains no descenders at all — no y, j, g? What if it is all caps? What if there is just one descender? How about ascenders? What if the glyphs are heavier or lighter than another font? How do line height and width relate to kerning and letterspacing? What if the nominal pixel size for any given font is likely to relate to its typographic footprint differently from an alternative font? None of these geometric specificities are considered here. In non-formulaic typesetting, they are *always* considered for sufficiently important layouts. That’s why you should pay a good graphic designer if money is on the line.

The author may be enthusiastic, but his tone of dead certainty is pure snake oil. He has simply assumed his own conclusion.

That’s not to say that this formula isn’t potentially one way to improve your layouts better, especially if you don’t already have a good eye. But there are many solutions to the problem of good layout and typography, and human readers are quite diverse in their tastes and visual acuity.

Mike, the purpose of this article was to introduce people to the idea of Golden Ratio Typography and the math behind it.

It is in no way comprehensive, as a complete redux of my research would be many thousands of words and would bore anyone to tears.

I’m compiling a research page where I will explore the mathematical basis for Golden Ratio Typography in excruciating detail. For now, though, let’s talk about the exponential relationship between the optimal line height and optimal line width.

Since you don’t know the relationship between height and width, you start with the most reasonable mathematical models: linear and exponential.

A linear model would look like this: w = l * x, where x is some factor that describes the linear relationship between width and height.

The most basic exponential model is: w = l^2.

These two models intersect when x (from the linear equation) equals the line height, l. Therefore, the only way you could be correct—regardless of the model you started with—is if x = l.

Furthermore (and I found this quite surprising!), you can look at the behavior of text and observe this exponential behavior, too. Check out the first image here, and you’ll see that the end of each line of text forms a classic x^2 curve.

Now, as far as descending and ascending characters are concerned, here’s the deal: Descending characters are included in the font size (though some typefaces have longer descenders than others, and this makes the typeface look smaller than other typefaces that have shorter descenders).

Ascenders usually only extend a tiny amount above the cap height and are not included in font size measurements, and because of this, they are not considered in this analysis.

In a previous response above, I talked about x-heights and how they’re definitely worth considering in future research on the subject of Golden Ratio Typography (in fact, I’ve already done a bunch of research here).

Finally, I added a note to the section of this article entitled, “The Mathematics of Golden Ratio Typography.” This note provides a common-sense exception to the issues you’ve stated above, and I agree with you in saying that they are worth considering in any formal design.

“Descending characters are included in the font size (though some typefaces have longer descenders than others, and this makes the typeface look smaller than other typefaces that have shorter descenders).

Ascenders usually only extend a tiny amount above the cap height and are not included in font size measurements, and because of this, they are not considered in this analysis.”

This=extremely important information when it comes to choosing the correct typefaces for a specific use and implementing them gracefully.

This is some of the simplest information, yet is always overlooked in posts about typography.

Interesting article. Why not just use the golden ratio as an em for your line-height?

body {

font-size: 16px; (or whatever is optimal for your column width)

line-height: 1.618em; (golden ratio)

}

Ryan, there are two reasons why this isn’t the proper approach:

First, multiplying font sizes by the golden ratio yields numbers that extend to many decimal places, and as I stated in the article, web browsers will round these values to the nearest integers. The rounded value has a different relationship to the font size than the golden ratio, and that brings us to the next reason…

Second, font size, line height, and line width are all dependent variables. In other words, you cannot change one without changing the other two.

Because web browsers will round off any line height values that are not integers, you must adjust the line width to compensate for any rounding that occurs.

This is the reason why the tuning equations are necessary for real-world application of Golden Ratio Typography.

Arial Narrow 8 px is what I use for all my websites. I want to fit as much text into a small location as possible.

Reading what I write should be a a reward for those willing to endure my font size.

Hell of a way to vet your audience, my man :D

Haha, plus one for Mr Guthrie.

Mr Pearson: I’m interested to see what your thoughts are on the matter of size ratios for P:H1:H2:H3 etc. I have often wondered what might be offered as an optimal formula for these. Does any kind of standard exist in the industry of printed media?

Regardless, I would love to read an article written by you on the topic.

I explored this shit back in the 1500′s yo. Focus your energy on what you’re good at (a new Thesis release).

Sorry you can’t see the ingenuity and passion at work here, Albrecht. This is the kind of thinking behind Thesis, and that’s a big reason why it’s as popular as it is.

Hey Albrecht. I remember seeing some paintings of you in my art history class. How are those sketches working out for you?

I appreciate the effort and the time invested in this post and your calculator, but there’s a major flaw in one of your variables.

You say that “font size is measured from the top of a capital letter to the bottom of descending characters”. And you base your calculations on that assumption. Unfortunately, that’s not the truth. This is the definition of font height, which is different from font size. Font size is font height plus internal leading, a measure that can vary greatly from font to font. When you set a dimension value in CSS (or any software, for that matter), you’re setting font size. That means one font at 16px can look way bigger or way smaller than another one with the same size, because both do not have the same height. You can’t precise your calculations, because you don’t have the real height information.

This article explain the differences: http://www.emdpi.com/fontsize.html

Guilherme, I agree with the premise of your argument, and I even addressed the notion of x-height (the biggest determinant in how one font looks relative to another at the same size) in my response to Amelia above.

Regarding font sizes, I did quite a bit of testing here, and I’m comfortable with the basic assertion that font size is roughly equal to the distance from the cap height to the bottom of descending characters.

You can test this on your own with just HTML and CSS—simply wrap your text in

`<span>`

tags, and then apply a background to the`<span>`

. Make sure the line height is set to 1, and then you’ll be able to see the exact top and bottom of the typeface as it’s rendered on the web.The results were consistent enough that I was comfortable using this generalization regarding font sizing (despite the obvious fact that different typefaces have different geometric characteristics).

This is precisely why I’ve included a font selector on the Golden Ratio Typography Calculator. It’s interesting to see how typefaces can differ from one another in the same geometric conditions.

The bottom line is that it’s clear that designers should make final adjustments to line heights based on the metrics of the typeface they’re using. The recommendations from the calculator form a rational basis for these adjustments.

Dude you rock!

Thank you for this article and the calculator. I ran my font size and setup through the calculator to see what it said, and it spit out some crazy line width — nearly double what I was using. Crazy.

Except I tried it. Best looking text I’ve ever seen.

Your equation width = height^2 does not hold up under unit analysis. If the height is in pixels then the width is in pixels squared, but you treat the answer as if it is just pixels. This means you get different results if you measure in different units, like ems or centimeters.

You could fix this by adding a constant: width = height^2 / (1 pixel). This produces the same results as your equation, but with the correct units, and now it works with any units, not just pixels. But now you have a constant to fine-tune – is 1 pixel truly the best constant for this equation? Would 1.5 or 0.5 work better?

William, you might be interested in the work on dimensional consistency by George Hart. Brilliant stuff.

William, excellent observation, and thank you for pointing this out.

A quick thought experiment regarding your suggested constant makes me think that this might be a good answer for displays that define pixels differently.

For instance, if you view this site on an iPhone, you see far fewer characters per line than if you viewed it in a browser on a desktop machine.

Based on this observation, it seems plausible that the iPhone may have a different constant than a typical desktop.

Anyway, I’ll definitely be paying more attention to unit analysis as I continue my research. Thanks again for the astute observation.

I’d be happy if the Wordpress folks would not foist such typographic abominations on the world as the TwentyEleven Theme, in which h4, h5, and h6 are LARGER than h1, 2, and 3.

Or if theme designers would grasp the concept of vertically associating headings with the succeeding paragraph, instead of floating them equidistant between paragraphs.

Just those two steps alone would immensely improve web typography, irrespective of ratios of any kind.

Good typography is NOT choosing the newest, trendiest font, it’s understanding basic principles of hierarchy.

Excellent points Chris Raymond.

The golden ration has been debunked ad infinitum

Here’s a good article on it but there are many others

http://www.lhup.edu/~dsimanek/pseudo/fibonacc.htm

I agree with the others, you’re asserting this is the best ratio with no actual data to back it up.

Gregg, I read this article, and there are three important points that need to be addressed:

First, the article does not discredit the golden ratio. Instead, it discredits the Fibonacci sequence, noting that there are many sequences that converge to asymptotic values like the golden ratio.

It’s important to note that the golden ratio and Fibonacci sequence are not mutually dependent. In other words, discrediting the Fibonacci sequence does not discredit the golden ratio.

Also, the fact that the golden ratio can be found in nature remains true. Is it present in every nautilus shell spiral or every other location where it’s ever been asserted to exist? No. But it

ispresent and observable in nature nonetheless.Second, I never mentioned numerology or mysticism in this article. In the link you provided, the author states that the following is a myth:

In this case, I completely agree with the author. We do not have statistically significant evidence to prove that the golden ratio or golden rectangles are any more pleasing than other ratios or rectangles.

This does not, however, discount us from studying different proportions and seeing what people prefer. I would encourage anyone who’s interested to study this kind of thing and to take a rational, scientific approach to subjective matters like this.

Finally, in your comment, you stated that I’m “asserting this is the best ratio with no actual data to back it up.”

I am not asserting that the golden ratio is the

bestratio for the job. My article rests on two basic premises:Ultimately, all I’m saying is that Golden Ratio Typography produces a visibly pleasing result.

Furthermore, I took the time, care, and attention to detail necessary to share this result with others in a way that can help them understand my analysis.

You say

“I am not asserting that the golden ratio is the best ratio for the job.”

But you *do* assert that phi is the perfect ratio:

“In the equation above, the optimal line height is produced when h equals the golden ratio (φ).”

That is a quote from your article that sounds an awful lot like you are asserting that phi is the optimal ratio! If you had tried several different ratios and talked about that process in the article, I think it would allay most of the concerns. Even a simple wording change from “optimal” to “a particularly pleasing” would put your article more in line with what you are asserting in the comments.

Peter, the optimal line height

for Golden Ratio Typographyis produced whenhequalsφ.This is not 2:3 or 4:5 scale typography; it’s Golden Ratio Typography. That’s why I don’t talk about any other ratios.

I’ve tried other ratios, and I invite you to do the same. In my professional opinion (yes, I’ve been a design professional for over 8 years), compared to Golden Ratio Typography, they look terrible.

I read an article about this golden ratio in web typography about 4 months ago and decided to test it on my established niche website.

My results were astounding. I changed my font from arial 14 with default thesis line-height to arial 18 with golden ratio line height and my conversion jumped from just below 5% to just below 8%. Tested over 1 month. August.

I’m an idiot when it comes to design. So I just test. This post should be bookmarked by anyone who publishes a website. End of story.

Later.

Fun post, thank you! The proof, as they say, is in the pudding… and I very much like the aesthetics that your Golden Ratio Typography Calculator produces.

In fact, I liked them so much that I completely redesigned my personal home page this evening:

http://davepeck.org/

A redesign was _long_ overdue: the old one was several years old, and I recently purchased the rights to a serif font family I’m a bit enamored of. Seeing your calculator pushed me over the edge. So: thanks!

-Dave

Looks awesome, Dave! I love content-focused sites like yours.

Love your blog!

Wow. You have really taken Golden Ratio Typography to a whole new level here. I’m eager to try this on some of our sites to test how it improves conversion rates. Thanks for the post!

It is good to see type design fundamentals making it to the web. Unfortunately golden rules of leading apply mainly to readability.

Robert Bringhurst’s “The Elements of Typographic Style” is a nice followup here.

Thanks for an interesting read, Chris. It bears pointing out that the relationship “w = l^2″ is a

powerrelationship, and not an exponential one…Beautiful job Chris, thank you so much! :)

Great article, a lot of reading is waiting for me today :) Thanks for this!

Chris you have made me realize how i totally screwed up. I use typekit for my website’s fonts. What do u use???????

Usman, Typekit is a service that allows you to serve different fonts on your website. Golden Ratio Typography can be applied to any font, so you certainly have not “screwed up” in any way.

In fact, I appreciate the fact that you’re using their service to serve different (and oftentimes cooler) fonts on your site!

Nice informative blog, thanks for sharing.

Great article i did not know there is so much math involved :) This is going to boost quality of my websites. Thanks

Now I’m curious what Knuth’s opinion would be, and how Computer Modern on the default baselineskip lays out with respect to your analysis here.

“optimal” to “a particularly pleasing”

What are these people on about? Chris – this is awesome, and it is absolutely subjective to your opinion, so discussion on people arguing the semantics of your wording is just stupid. If its not optimal for them then they can bugger off and use whatever ratio they like. I for one, echo your “optimal” choice of ratios, and will be a prime advocate of your philosophy. Well done – and please deliver more of the same in future.

Thanks, Ranui. And yes, you can definitely expect more articles like this from me in the future.

Have you signed up for my email newsletter yet? That’s the easiest way to keep up with my work.

Hi Chris,

Interesting analysis. How do your ideas about Golden Ratio Typography affect font sizes for headlines and subheaders?

Fred, headlines and subheaders are components of a

typographical scale, and I did not address that here.Despite this, I have conducted some preliminary research on typographical scales (including some golden ratio tinkering), but I haven’t reached any conclusions that are worth publishing.

The only thing I know for sure is that a direct application of the golden ratio to a typographical scale does not appear to produce a range of sizes that seem useful (basically, the gaps between the different font sizes are too large).

all them numbers make my head hurt somethin fierce.

Thanks Chris, for shedding some light on a subject – typography – that within the world of web design is only recently starting to get the attention it deserves. Typesetting is an age-old craft, now applied to yet another technology, and before you eleborate more on it, which I would applaud, invest some more time in learning about it. The best source for that, imho, had just been mentioned: Robert Bringhurst’s ‘The Elements of Typographic Style’. I reviewed it over ten years ago (man, I’m getting old…): http://www.amazon.com/Elements-Typographic-Style-Robert-Bringhurst/product-reviews/0881791326.

Hans, the implication of your comment is that I’m not well-versed in typographical history. The truth is the opposite.

I’ve read just about every major book on typography from the last 75 years, including most of Bringhurst’s famous work (which is a terribly laborious read, I might add).

The fact that you cite Bringhurst in this manner (as does every other designer who’s ever heard of the book) suggests to me that you really don’t understand the point of my article.

If you’ve read Bringhurst, then you know that he fails to provide any mathematical basis whatsoever for setting type. He makes very general claims, such as this one regarding line heights:

The above quote is classic Bringhurst—all theory and no exact math to help you deal with different scenarios.

And this holds true for every other book or article on typography that I’ve ever read. You get a ton of theory, but zero specifics on how to implement their nebulous suggestions.

This was the prime motivator behind Golden Ratio Typography and my typographic research in general.

I’m not content to spout off theory from an authoritative perch; on the contrary, I want to uncover the underlying mathematical relationships that govern typography, proportion, and the experience of human interaction with text.

So, I’d suggest that

youconsider the future of typography and the simple fact that there is always more for us to discover. Bringhurst’s work is a foundational piece of literature, and my work today builds upon that foundation in an attempt to take us to new heights.I enjoyed all the comments until the arguments started. Then it got boring. The whole thing can be summed up as ““With typography, the goal is to relate font size, line height, and line width in an aesthetically pleasing and orderly way” but in context.

In other words it’s purely contextual. As a blogger with an audience that are bloggers the headline and the first paragraph with short lines and targeted keywords is all I have to get somebody interested enough to read further . Otherwise I get a simple five word comment designed to give the reader some link juice.

If I were a researcher, which it sounds like some authors here in the comments might be, I would be writing longer lines with no image and smaller text because most would be printing it off to read at their leisure. But then again that is assumption as well. In any case it comes down to personal choice and the audience you cater for in my opinion.

And like Ramses above I would love to know if Thesis 2.0 will include the calculator. It may be a little difficult without a WYSIWIG Editor as well but even if it had a CSS generator for the typeset would be great.

Dennis, I’d like to include the Golden Ratio Typography Calculator in Thesis 2, but at this point, I’m not quite sure how I will proceed with the implementation.

Basically, the spatial properties from Golden Ratio Typography affect much more of the design than I’ve revealed here. I’ve actually got a whole theory of design that hinges on the core spatial properties of text.

In this theory, lots of elements outside of the main text are affected as well, and I’m not quite sure how (or if) I want to integrate that into the core Thesis platform.

Hi Chris, interesting approach and follow-up discussion. I have one question: I saw that all the values are set in pixels, probably due to browser calculations… but WCAG or other accessility guidelines recommend that you set your text using relative size units like % or em. Do this approach works if, for instance, you set your body to 62,50% = 10px or 1em? Will the leading works in em?

Bruno, you’ve brought up a point about typography that I think most designers fail to understand.

Yes, the values given by the Golden Ratio Typography Calculator are given in pixels (in the first version, at least). However, it is extremely easy to convert these values to whatever units you’d like to use in your CSS.

For instance, if you have 16px text in a 550px-wide setting, the calculator would suggest a line height of 25px. In your CSS, you might do something like this:

Assuming you’ve adjusted your baseline to be 62.5% or 10px (instead of the browser default, which is 16px), a font size of 1.6em is equivalent to 16px. A line height of 1.5625em would then yield an

actual line height(the actual size, in px on screen, of the resulting line height) of 25px.Chris,

Thanks for replying. Unfortunately I went lost on the line-height calculation… how did you get the 1.5635 value?

Sorry for the dumb question. * little embarrass over here * :|

The suggested line height in this case is 25px. In CSS, em calculations are all based on the current font size, which is 16px.

Therefore, 25px expressed as a ratio based on the font size is 25 / 16 = 1.5625em.

Chris, ridiculous easy. Even more embarrassed now.

Thanks for explaining it.

Only ridiculously easy if you know Bruno :) I was as lost as you were. I think the formula would be great to include somewhere. Maybe in the “info” box after clicking Set My Type. Or even include the css. Just some way to be able to work out the css.

With plugins now being written exclusively for Thesis I could use text widgets in a post with text variables like size, width and line height.

I’ve said many times that whenever I see a _really_ beautiful web page, I can guess that Chris Pearson’s work is behind it. Now we know why! Thanks very much.

Well, now you’ve gone and made me blush. Thanks, Kate!

The question I have is screen resolution in choosing px size. Some major template developers (Joomla!) I’ve “forum-ed” with use px sizes. The reason: they don’t want users to “break” their templates (most likely for menu item text, etc.). I prefer ems or percentages. My Web Inspector tool shows you have font size in percentages (62.5%) which, computed on my 2560X1440 screen, comes out to 10px. It reads great. However, I’m not sure I’m reading your CSS correctly.

Because screen resolution is important, how do you work the CSS for font size? I get px values from your calculator, but aren’t those absolute values dependent on screen res and aren’t percentages dependent on browser defaults?

Help set me straight, please.

Thanks.

Don, the 62.5% that you see is known as a browser baseline adjustment. That sets the baseline font size to 10px, and this allows me to use ems in the rest of my stylesheet in an easy-to-understand way. To wit:

With a baseline set to 10px, an em value of 1.6 yields a size of 16px (1.6 * 10px).

In my articles, I currently use a font size of 15px with a line height of 24px, but in my CSS, these are expressed as 1.5em and 1.6em, respectively.

You are correct that px values are screen and resolution-dependent, and this is why sites viewed on the extremely hi-res iPhone look different than when viewed on desktop machines.

For what it’s worth, it appears that the iPhone attempts to convert px-based sizing to make it look the same as it would on a desktop. However, it seems to struggle with converting em-based values in the same manner. Because of this, you actually see a bigger difference between mobile and desktop on sites than are em-based rather than px-based.

For those asking about using EMs: It is super easy to set the line height in ems using this technique. Use Figure 5 in the article, set “the line height value” as your em value. Using the calculator tool, for example it recommended for me a font size 16 and line height 26. To convert that to em just use: 26 px ÷ 16 px = 1.625 em

To the author: Good article and great calculator. Just a small suggestion to include a link back to this article from the calculator for those who just come across the calculator first and want to know the logic behind it.

WOW! What a post. I’ve used the Golden Ratio in artwork before. Never would have thought that would be used on website typography. I think it should really work well with the screen resolutions that most monitors use today. Great cat fight…er…I mean discussion. This has me thinking how best to look at my site now to fix and tweak it. Thanks for the calculator too!

This is brilliant stuff by Pearson! I used this technique on my blog and already seeing a surge in the number of readers and the time spent on the website. Thanks a ton for this awesome post! – This is going to be around for ages to come – one of those posts which can go into the Internet’s history books.

Wow, did not expect to see calculus equation on a typography topic! Thanks for sharing!

This article is awesome. I’ve tested the calculator to see how can I improve my sites. It gives me a good starting, but I miss some more details:

1. H1-H6 sizes, line heights and margins

2. Paragraph bottom margins

And I have one more question: when I use more columns, which line width is needed for the calculation? The total width of the columns or just the with of one column?

Anyway, thank you Chris for this work and your time on this topic! It really makes our work to design websites more easy and faster.

Surbma, I didn’t cover

`h1`

–`h6`

sizes here, as they represent atypographical scalethat is a separate topic from Golden Ratio Typography.That said, I can give you some recommendations for spacing based on the line heights given by the Golden Ratio Typography Calculator.

The bottom margins of

`p`

,`ul`

,`ol`

,`blockquote`

,`pre`

, and other block-level elements should be equal to the line height of your primary text.For sub-headlines (usually

`h2`

and`h3`

), I recommend a top margin of 1.5 × the line height of the primary text, and a bottom margin of 0.5 × the line height of the primary text.Finally, when dealing with columns, use the width of each column to determine the typography within it. Therefore, if you had 3 columns of differing widths, then you would potentially have 3 different typography settings.

Good post and info, but holy crap man…lose the serif font for the text on your site. It’s hard as hell to read…especially for people that already have reading difficulties or eyesight problems :)

I am pleased to have found this article, because it corresponds to my own research so closely : I have been studying the alphabet for the past 13 years.

When you think about it, it’s helpful to have at least a few different letters in the alphabet. But it would be total nonsense to have more than, let’s say, 30. Therefore there must be an optimal number! Using the golden mean, 1.618, and the anti-golden mean, -0.618, you can calculate the optimal value: ((1.618^8) – (.618^8)) / sqrt(5) = 20.996. Let’s just round that up to 21 — which is, by an amazing coincidence, a Fibonacci number!

For thousands of years, there have been 26 letters in the alphabet, which we can now see is inefficient. By removing five of them, we will reduce the alphabet to 21 symbols, and thus be able to communicate more clearly and effectively than ever before. Through my research I have determined that J, P, R, U, and Y must go.

I would like to hear your comments on my research. Thank you.

That sounds kind of arbitrary. do you have a link to a summary?

Hi Chris I really have tried to get this right on my websites before. I know it is a proven fact that readability is key to conversions. I still like things like the way the used to inset the first word in paragraphs and make the kids stories more fun to read. I did in my first webpage try and get it more readable but I did not know how to use fonts and change them up for more clarity. With my poor gamer and lack of writing skills I had to concentrate on making the writing make sense first.

This is awesome I now will go back when I have time and work at type setting on web posts to get my posts more readable. The one place I have had success using different fonts is using the Xheader program. I take my time with making banners because I am not good with more complex programs. But what I can do is try and get the font to match what is used on the product page. Then do a color match and get the spacing right. It does make a big difference to me when I get on a website that is written like a medical text manual, Or a website written for seniors. I some times wonder if the makers of phones and computers have noticed that seniors are some of the more affluent users of the products they are selling.

At 57 years old I do not want to have a cell phone because I can not read the numbers with out my glasses and hitting the keys is great I can hit five with one finger, well anyway great product I will work on my site now. Have a great new year.

This article is awesome.I used this technique on my blog and already seeing a surge in the number of readers and the time spent on the website.Thank you for posting this article. It is very helpful and interesting.

Well funnily enough when I viewed the paragraphs that you use as examples I preferred the supposedly incorrect one each time! Before I read what the explanations were for each of them I assessed their legibility for myself.

Maybe I’m not cultured enough, or maybe i just mean to break the rulzs…(sic)

Stephen

Crap… now I have to re-design my personal website all over again…

Thanks Chris for all the research and insight, and a separate THANKS for the calculator.

Hello,

So, some of you have read a lot of different scientific papers about typography and psychological aspects.

I am a web developer and I am looking for an ultimate template for best reading experience on the web.

Could someone summarize the key results for best reading experience? (font-size, line-height factor, line-width, gray-scale value for font color, …)

Steve, that was the entire point of this article and the Golden Ratio Typography Calculator.

There is no single right answer. There are only best answers for particular contexts (that is, different content widths and font sizes). You can use the calculator to figure out finely-tuned typographical recommendations for your particular context.

Here a rather important note. I think.

Nice post after all.

“you can make an educated guess that the relationship between the optimal line height and line width is exponential.”

This is nonsense pulled out of thin air. Besides the fact that the equation you give is quadratic, not exponential, this is entirely dependent on the units you use. For example, if you measured in inches instead of pixels, then the optimal line length for text with a 1/8″ em, according to your formula, would be (0.125 phi)^2, or 0.014″. Real mathematical relationships are unit independent. A relationship like the one you suggest raises a red flag, much like numerology or astrology does.

Even with pixels, the relation breaks down quickly. Surely the ideal width for 48px text is not 6032px? That would be equivalent to reading 16px text that is 2011px wide.

If you’re trying to aim for an optimal CPL count, then the relationship between line height and line width will be linear, not quadratic (as you’ve written it) or exponential (as you’ve described it).

Whatever the details, the magic works for me !

Is there a theme out there based on GRT ? I would love to have my blog look so swell !

Fred, my software, the Thesis Framework for WordPress, is tuned for Golden Ratio Typography out of the box. You’ll find this same level of detail in other aspects of Thesis, too—check it out.

Wow! What an in depth article and explained so clearly. I like the graph and the golden ratio calculator is awesome :)

Seems awesome but its hard to implement. thanks

Hey Chris

Amazing post, i was trying to do the equation manually but couldnt for the life of me get the same result. Im guessing i am doing this wrong

when i saw this:

height = φ – 1/2φ(1-550/16φ²) = 1.56261

I kept getting a different result. My math sucks big time but the way i read this was

1.61803399 – 1/3.23606798

* (1 – 550 / 670.216702155601946 )

which gives you the final calculation of

1.61803399 / 1.309016995863801 * 0.179369898972902 = 0.221713388166901

im seriously confused.

Typo in css3 is my love. Its great. I’ve been using CSS3 typos and love them. This one what you’ve explained is quite hard to implement. Isn’t it?

The amount of people attacking you for writing this post is absolutely ridiculous. Typographic ignorance is widespread, and it’s a breath of fresh air to see someone writing about it in-depth. There aren’t enough people out there discussing the mathematics behind design on the web.

Also, I find this article intriguing, but I’d love to see your equations applied to type set in ems rather than pixels, especially in a Responsive Web Design setting. Rounding pixels seems to cheapen your math, but ems are more precise and scale with the browser/font size.

Thanks for the article.

Have you given any thought into other text on the page as well?

Specifically, how can this be integrated with vertical rhythm of the page?

Right when I think I have the typography figured I read this blog post and my mind is blown. Great post, something I’ll need to look into.

Hello! I think i asked you before, but have you considered doing some test on conversion in for example webshops? You can do that with a simple A/B test.

Wonderful article and very good insights. Should be very useful for young designers. I just love the calculator.

Hi Chris,

As you know, Thesis fonts are defined in points but your calculator needs pixels for input. What’s the best way to translate points to pixels? Is Thesis 2.0 going to define font sizes in pixels so we can use this tool easier?

Thanks for a thought provoking article and tool!

Tom, in this case, points and pixels are identical (the difference is purely semantic—the output is the same). And yes, in Thesis 2, fonts will be defined in pixels.

Mr. Pearson, my compliments to you. Typography and book design have historically been so closely tied to the golden ratio that for centuries only fractions of an inch separated the two. I am amazed, though, anyone drawn to your article failed to see the correlation. Fibonacci numbers, proportions in Art (the Mona Lisa is often cited) and architecture (the Pantheon), mollusks and music (chords) all reflect a pleasing aesthetic associated with a single mathematical formula.

As for studies of readability, all seem to show shorter line lengths are more readable at a faster clip. Since, as line length increases and the eye must travel farther on the return trip, more space separating the lines is helpful in keeping in sequence. We should limit the horizontal landscape; people hate scrolling left to right.

In my CSS, I always use ems, never pixels. I use a font size of 1 em (Georgia), a line height 1.5 or 1.6, and strive for a CPL of 65 (28 or 29 ems ). Very much like a common, super-market paperback. After all, ink-and-paper publishers are NOT in the business of making it hard to read their product. Neither should we.

I have been interested in typography for a few decades as a hobby. The interest originated from my early involvement with TeX and MetaFont which lead me to read about typography in general.

Some of the generally accepted tenets were these:

* Serif typefaces can be read faster than sans-serif

* Shorter lines can be read faster than longer lines

* Larger line spacing is better than smaller for reading.

Searching the web now seems to unearth many studies which question the validity of those generally accepted truths. There is one caveat: all these studies are concerned with reading speed and have little to say about reading comfort or the experience of looking at the page.

But in general the newer studies seem to say this:

* The usually accepted leading of 1.2 is correct, increasing line spacing beyond that has no effect on reading speed. So much for the golden ratio, though again nothing is said about how the page looks. Perhaps the Ratio is is more interesting in page layout (Gutenberg / van de Graaf / Tschichold).

* Longer lines (95 cpl) allow faster reading than shorter lines.

* Serif fonts do not have as much effect on reading as once thought, familiarity with the typeface is more important.

Having said that,

* I still prefer serif typefaces (Palatino. Melior, Aldus … what can I say, I’m just a sucker for Zapf)

* I still like shorter lines

What this may have to do with in the end is that I appreciate what the page looks like and that I place reading comfort, that is how fast (or should I say how slow?) reading tires me, over reading speed.

I love beautiful typography … Thanks for your detailed explanation! Guess I better study up on this a bit. Your typography calculator is super cool.

This is a great article. Love the attention to detail and use of graphics in the post. Very interesting and informative read. Thanks for sharing!

-Dustin

I’m sad that I’ve only just found this! Thanks!

omg, you are amazing. I knew that there was something wrong with my sites but struggled to put my finger on just what it was.

As soon as i started adjusting the font and line height, it made an instant improvement, im not quite ready to use the full ratio that you recommended, but the improvement made to the readability to my site has drastically improved.

Thankyou

I was wondering what would happen if you would change

- relationship between the optimal line height and line width -

from exponential to some other relation.

This makes so much sense, using the golden ratio for typography is so obvious. I’ve played around with the calculator (and firebug) and have to agree that your optimal settings look best (unless I just didn’t try the right combinations, which I very much doubt).

I’ll be a regular user of the calculator, many thanks for such a useful tool.

wow!! that made such a difference!

I’m like matt, not quite ready for the full monty but it looks so much better!

Wow you’re smart lol, nice one bookmarked.

This is a great piece of work. Thank you pioneer of typeface.

For the record, I’m with you on the “mathematically optimal” claim. Certainly at least until similarly compelling research suggests otherwise (as opposed to the inconsequential wailings of the disenfranchised, as demonstrated by some of my commentative peers here).

What an inspiring blog, not only the complexity and size but the amount of info stuffed in there 60% of which i hadn’t even considered before, i will bookmark this one for future reference the next time a client complains about their typography! Good read.

Amazing article. Big thanks to the author for taking the time to write it and for the calculator! For all people who had time to angrily disapprove the approach but didn’t enough of it to go and create their own tools I can use, I would recommend to go and prove themselves first before start expressing their opinions. Again, big thanks to the author!

This is a great article. We are in the process of tuning the typography on our sales site using your Golden Ratio Calculator. I am still unsure how to determine the best size for the H1, H2 etc…. Your input would be greatly appreciated.

Depends on its relation to the other elements on your page and what screen size the content is being read on.

The golden ratio is found in all pleasing forms of art, most of the time however, its found in critique after the fact. Sometimes you have to have an “eye” for the golden ratio, then do the math.

Fantastic read, both the article and the series of comments. Thank you to all!

Rad! I will definitely try this out. Thanks

You have done great work with this, but I think that you might be taking a little too much credit for this. There are alot of golden ratio canons out there that have existed in the print design world for along time.

What irks me is that the first line is “Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid.” Not a single designer worth their salt just throws numbers at the screen. Especially considering that good typography needs more attention than just your three variables, what happens when you stack 2 different fonts, kerning, leading, paragraph flow and ligatures, etc..?

Again you have done a fantastic job at creating a great starting point for a new designer formatting text for the web.

A very useful article. I found an interesting calculator.

Great share, I never realize about the importance of the typography until i saw this post, Once in a blue moon that someone would describe in such details like you. Keep up the knowledge sharing Chris! :)

Kind regards

Axel

Hello,

just tried to move this theory to Word. Could you confirm the approach?

In Word, font size is given in points and that is 1/72 inches and 1 inch is 2.54 cm.

Finally, while pixel-cm conversion is not direct, I have found this unit converter where it says 1 cm is 37.79 px.

So I have used a 12pt font = 16 px approx and also A4 (21 cm width) with a couple of cm in margins so 17cm = 642px width.

Then in your typography tool I got 26 px as line height.

Finally, 26px/16px = 1.62 for MS Word Line Spacing.

Would this be the right approach? In that case you could add it to your tool…

Thanks

Awesome post man! I just love this calculator! this is a very usefull calculator….

Thanks Chris for shearing this awesome tutorial. Now I really aware about how the topography is important. Thanks again.

@Chris, it would be really nice if you could add a download button for the css applied to the text on your calculator, since you have already there the calculations for h1,h2,h3, ols and uls, that gives us a really amazing start for a good typography setting :)

Thank You very much, i was not confident how font size is calculated in typography but after reading this article, i understood it and your guidance helped me to deal font size concept in designing new fonts.

Hello,

this is a very interesting article, often don’t pay attention to important items. Such elements include font size, text and correct placement of the selected colors that will not be burdened sight – ergonomics.

honestly, I consider myself a web design nerdo guys, but JEEES this is so scientific. What happened to the good ol’ days – “looks good to me” — but seriousl, thanks for taking the time to put this together, great read.

I wonder, does the golden ratio typography also applies to books? Or is it just for websites?

I noticed that your examples do not match the calculator results.

In your example you set a font size of 16, and calculate with rounding that the line height should be 26 and width be 670.

Yet if I only enter a 16px font in your calculator, it tells me that the optimal line hight is 26 (same) and width is 685 (example says 670).

Is there a reason or is the calculator wrong? (I doub the example is wrong as I have worked it out to be 670 also).

fascinating

Tremendous resource. Thank you!

One of the unique concept in typography with calculus !! when talking about “responsive typography,” I don’t just mean flexible body text, but also that all our decisions should be based on universality. Universality, as a design principle, should guide us when choosing web fonts and when testing how our type works on various devices and platforms. It should be the core principle behind all the work we do.

I find this to be a fabulous contribution to the conversation on typography, and I enjoyed reading through it.

As a matter of interest, I posted a question about this article on TeX.stackexchange.com, which can be found here.

The ensuing conversation has proven interesting, albeit largely critical of the possibility that this ratio could apply in (La)TeX-created documents. I would invite and certainly encourage clarification on whether this concept may be applied in that universe.

Awesome tutorial! Read lot of tutorials on design, interface, SEO but never thought that font size and line heights play an important role in the web design. Learns a new thing today. thanx for sharing. UR Genius

Thanks for this rather scientific article. I have recently expanded the font on my websites and shortened the paragraphs to accommodate the old foggies like myself who are wrestling with low vision issues -and the younger set who don’t have patience for a paragraph longer than 4 or 5 lines. :)

Dave P

This is awesome. I notice that you don’t allow non-integer font sizes (18.5px) in your calculator. Is that intentional, and if so then why?

That’s correct, Elliot. Browsers do not render half-pixel sizes, so it doesn’t make any sense to use half sizes here

orin your CSS.When sub-pixel rendering becomes a reality (instead of a pipe dream, as is the case now) and retina screens become the norm, then half sizes may indeed become a usable standard.

Very nice

Awesome

Wow, that’s really A LOT to learn!

Thanks so much for this great post, I’ll definitely come back often :)

Nice article. I probably care about typography way more than the average person but I feel like it is an often ignored element to too many people. Good typography can make or break a design in my opinions. People should pay more attention to it.

Since lot of days I was tumbling over 14px and 16px fonts and line heights. Basically your golden-ratio-typography solved my problems. Epic. Thanks.

While the golden ratio is a good ratio to base design from, it is really something that one gets use to and uses in all design while rounding up or down for technical reasons. A good designer knows how much line height to use based on a font and font size without actually using a calculator. The calculator is neat, but I don’t think it is a daily “go to” tool. The golden ratio is great, though using a consistent grid system for columns while implementing embedded items in websites such as advertisements and videos, messes with the golden ratio a bit, where you just have to round up or down. Basically, I think if designers keep 2/5 and 3/5 in mind while designing, everything works out well.

People, do you really think this ratio is OK? I feel line height counted with the ratio (and the mathematics presented with the golden rule) is too big! It’s like the books nowadays – I can’t read them, I get angry and the number of pages goes higher and higher.

For a font 14px take 23px line height? WTF? It’s like 10-15 per cent too much for me. I don’t know, there’s something wrong for me with all that.

Milo, golden ratio typography enables an algorithmic, repeatable approach to design creation and site building. I don’t have any universal proof that it’s the “absolute right answer,” but I do know that I can count on this system and get consistent results that people have been raving about for over 7 years :D

Sorry, I didn’t know there was a direct reply button… my reply is under here…

Chris, yeah, but the problem is that some PMs or bosses can stick to such rules too much. In case when you have text wrapped within a box, then there comes the need to adjust stuff within the box, because you have padding, etc. Sometimes you can’t change the boundaries and yet people try to enforce rules to elements inside the text. I’m talking about blind choices based on rules and maths… and about I don’t know – balance between design and a dogma.

A very informative article, nice work man. I need to get my head around this a bit more though!

Any graphic designer has learned the importance of space both negative and positive in design. Sadly majority of coders and programmers who are not trained in design forget all the rules.

“In my professional opinion (yes, I’ve been a design professional for over 8 years)…”

I suppose now it’s over 13 years.

Chris, there is a reason why typography is an art and not a science. There are, in fact, even more than the three dependent variables you rely upon in your formula when determining an appropriate line height. Average character width and thickness also impact legibility and readability.

While your formulas are probably useful for the amateur-infested web, they are an outright joke to anyone with professional typography training.

The most useful suggestion on this page, comments and all, was made by the individual who decried the practice of setting subheadings with equidistant white space between the previous and following paragraphs.

I’ll let you in on a little secret:

Do you want to know how to spot a professionally trained typographer’s work on a website? The first line of each paragraph is indented and there is no margin or padding between consecutive paragraphs of body copy.

You have the gift of self-confidence and assertiveness. And your formulas may even make the web a better place. But it’s important to know what you don’t know.

With a single statement, you’ve managed to insult everyone here. I admire your efficiency.

Then I suppose we can skip the part where Bringhurst, et al talk about both modes of paragraph presentation (indentation versus spacing).

You know, you really ought to teach this stuff—your draconian typography rules and anti-math soapboxing have certainly simplified things for me.

Hi Chris,

Is the Golden Ratio Typography tool broken? It used to work (a couple of months ago when I last tried it) but now, in Chrome and IE both, it appears to run but nothing happens. Maybe it’s just my machine?

Thanks! This is a fantastic tool.

Hi Matt, it’s possible I was updating the tool when you were using it. As far as I can tell, it’s working fine now in all browsers.

My colleagues and I think that the calculated line-height is to large with the calculator. The several lines are way to seperated. It’s heavy on the eyes. We recommend to set a line-height between 120% and 130%. This also says a professional typograph, who made some world-wide known fonts.

I’m currently building some websites and this has helped a lot!

Thank you very much for this awesome post.

One word: Wow.

i’m sorry.

i cant read and think to english… but a little

just question ….

when i input font size 20px in the form…

line height is right. ( 32)

but

contents width will not be 1024.

i see 998

Is contents width (fontSize*golden)^2 ?

Bob Stinnet:

“The first line of each paragraph is indented and there is no margin or padding between consecutive paragraphs of body copy.”

Hi. Can you say something more about this?

Your function uses font size, but this in itself encompasses variation through elements such as x height – how do you accommodate fonts (in a consistent manner) with small x heights or large x heights (such as practically all ITC fonts)?

excellent, thank you very much from Denmark

Delightfully written post, this goes to show you how much we still have to learn. I always thought that, when using a platform like Wordpress, all of this dimensioning would be done automatically to show the best possible lay out.

Interesting read, especially the comments. I will definitely get Thesis 2 when I get the chance. I always read to the end, for I am an infoholic!

Hello,

I tried the golden ratio generator. I use this for my:

font size 16px

line hight 26px

width 685px

this says…use 20px, 26px an 42px for headlines. how do I get the linehight? Do I input 20,26 and 42 in the generator instead of 16? or can I use 26/16 that is 1,625

And how about the margin-bottom in my tag?

Thanks for help,

Denis

Believe me , this is one of the best and most useful article about Web typography