the-deuce.jpg

How to Tune Typography Based on Characters Per Line

In my research into Golden Ratio Typography, I focused primarily on the core geometric properties of text—font size, line height, and line width.

But there’s another facet of text that nearly all of the existing research on typography deals with: It’s called characters per line (CPL).

If you’ve ever read a study on typography, you’ve no doubt encountered CPL. Many of these studies recommend “optimal” CPL ranges that include anything from 55 to 100 CPL.

With an “optimal” range that large, the CPL you use on your site ultimately comes down to personal preference. This raises one huge question:

How can you tune your typography to an exact (or, at least approximate) CPL?

Tuning Text for Characters Per Line

Before you can tune your text, you have to understand how CPL works and what the consequences of different CPLs are. Here’s the deal:

For any font size, as the CPL increases, the line width also increases.

Characters per line vs. line width

Figure 1. For a given font size, line width increases as CPL increases. Designers must consider this behavior when determining how wide a column of text should be.

This has some significant design implications, and worse, most designers don’t even consider CPL when choosing a column width for their text. They simply pick a column width, and however many CPL that results in…well, that’s what you get.

Frankly, I can’t stand this imprecise approach. Every decision—especially those involving your design and typography—should have a meaningful rationale behind it.

The bottom line here is that your typography should dictate how wide your columns of text are, not vice-versa.

So, how can you tune your typography to a specific CPL and, therefore, a specific width?

There are two potential approaches you can take here. You can:

  1. Use the good ol’ trial and error method, whereby you select different widths, count the characters per line, and settle on the width that you prefer.
  2. Figure out a programmatic way to predict CPL, and then choose a width based on this prediction.

Choice number one is a laborious pain in the rear, and it gets old really quickly. On top of that, it’s simply an imprecise approach, and we all know how I feel about that…

Contrary to number one, choice number two sounds great and makes a ton of sense. Problem is, you don’t have a programmatic way to predict CPL…yet.

Using Math to Predict CPL

Recently, I became obsessed with the idea of predicting CPL at any font size, so I set out to uncover a mathematical relationship between font size and CPL.

To do this, I examined text samples in the range of 40–100 CPL at font sizes between 5 and 26px for various fonts. You can see one of my samples in Figure 2 below.

Characters per line research sample

Figure 2. Research sample with Helvetica Neue set to 83 CPL. To determine the average character width at a particular font size, you can divide the resulting width (shown in gray next to each line of text) by the CPL. Click to enlarge.

As I stated above, my goal was to determine the mathematical relationship between font size and CPL for particular fonts (obviously, this relationship will differ slightly from font to font). Here’s how I did it:

Using text samples like the one in Figure 2, I first calculated the average character width (cw) at each font size by dividing the resulting line width by the CPL value.

Average character width equation

Not surprisingly, as the font size increased, the average character width also increased. The next step, however, is where things started to get interesting.

To relate font size and character width, I simply divided the font size (f) by the newly-calculated average character width:

Character constant equation

And this is where I noticed something extraordinary—for any font, the value (μ) from the above equation remains constant, even at different font sizes. In other words…

Each font has a character constant, μ, associated with it that relates the font size to the width of each character.

It may not be obvious at first, but this character constant is awesome because it establishes a mathematical relationship between the vertical (font size) and horizontal (character width) dimensions of text.

For instance, if you have a font size of 12px, and the font you’re using has a character constant of 2.3, then 2.3 characters will fit in every 12px increment of width (on average).

Thanks to this relationship, it’s possible to predict CPL mathematically. Here’s how it’s done:

Start with a desired CPL value, and then divide it by the character constant for the font you’re using. This results in a width factor, xw, which is specific to the desired CPL and font:

Width factor equation for CPL

The width factor from the equation above tells you how many increments of width are needed to reach the desired CPL. Once you have the width factor, all you need to do is multiply it by the font size to get the predicted line width, w, that will result in the desired CPL.

Predicted width for CPL

The aforementioned equations can be simplified and combined into one master equation that relates CPL, font size, and line width for any font:

Master equation for width, font size, and CPL

Alright—now that you’ve seen the basic math behind CPL, let’s bring this together by looking at an example.

Sample Predicted Width Calculation Based on CPL

In this example, the goal is to achieve 75 CPL at a font size of 16px for a font that has a character constant of 2.28. You can use the master equation from above to solve this problem:

Sample predicted width calculation based on CPL

So, for a font with a character constant of 2.28 at a size of 16px, a width of 526px will yield approximately 75 CPL.

But what if you wanted to know how wide your text would have to be for this same font at 18px? This is easy because you can simply substitute a new font size into the master equation, like so:

Sample predicted width calculation based on CPL and a different font size

So while you’d need 526px to achieve 75 CPL at a font size of 16px for this particular font, you’d need 592px to achieve the same CPL at a font size of 18px. Pretty sweet!

A Closer Look at Character Constants

The most important concept in CPL tuning is undoubtedly the character constant, μ.

As I stated earlier, the character constant is different for every font. In order to build a CPL prediction algorithm, it’s necessary to examine each font individually to determine its μ value.

This process is more complicated than it first seems, simply because different text samples have different average character widths (depending on the characters that appear in that particular sample).

Text samples set to 68 CPL

Figure 3. Both text samples are set to 68 CPL, but the line widths (and thus, the average character widths) are different because the samples contain different characters.

When researching character constants, it’s possible to account for these differences by taking a large enough data sample. If you were to test enough different text samples with each font, you’d eventually nail down a statistically significant value for μ.

Ultimately, though, the character constant is only useful for predicting an approximate CPL value—actual CPL values will differ from line to line depending on the characters involved.

Here’s a quick rundown of the character constants I’ve compiled through my research thus far (note: none of these are statistically significant):

Serif Fonts

  • American Typewriter — 2.09
  • Baskerville — 2.51
  • Georgia — 2.27
  • Hoefler Text — 2.39
  • Palatino — 2.26
  • Times New Roman — 2.48

Sans-serif Fonts

  • Arial — 2.26
  • Gill Sans — 2.47
  • Gill Sans 300 — 2.58
  • Helvetica Neue — 2.24
  • Lucida Grande — 2.05
  • Tahoma — 2.25
  • Trebuchet MS — 2.2
  • Verdana — 1.96

Monospace Fonts

  • Courier New — 1.67

The character constant provides a new, algorithmic way to understand how fat or skinny a font is. Lower character constants are “fatter,” and higher constants are “skinnier.”

Simply put, the character constant is an interesting new way to consider different typefaces.

It will prove handy for designers who are looking for a quick and precise way to select fonts that will exhibit particular aesthetics and spatial properties.

Also—and I really like this—smart programs can use the character constant to work with fonts in a more precise, more predictable way.

Update: A commenter pointed out a perfect potential application—building smarter CSS font stacks based on similar character constant values!

Math, Schmath. Software to the Rescue!

When I unveiled the Golden Ratio Typography Calculator, the point was to make it easy to explore finely-tuned typography without having to do heavy mathematical lifting.

Now, I’m pleased to announce that I’ve incorporated this new CPL research into the calculator, too. All that math you saw above? Yeah, you won’t have to do any of it :D

The upgrades to the typography calculator are powerful. Not only can you optimize your typography based on characters per line, but you can also explore the impact of different fonts on CPL in any setting!

Change fonts by using the font selector that appears on any typographical recommendation, and you can observe how the approximate CPL changes based on the typeface.

Golden Ratio Typography font selector

Figure 4. Use the font selector on any typographical recommendation to see how CPL changes relative to the typeface. Fascinating, I tells ya!

The Bottom Line

Typography is the most important component in all of design. There’s no doubt about it—design is a language of communication, and words are the most powerful communication tool we have.

It makes sense, then, that we should strive to understand as much as possible about typefaces, their metrics, and how they work.

Using the Golden Ratio Typography Calculator, you can explore the finer points of typography like never before.

You’ll gain insight into line heights, line widths, CPL, and how different fonts behave (grr, baby!). Best of all, you’ll be able to create beautiful typography on your site thanks to the precise recommendations from the calculator.

Take the Next Step!

  1. Share this on Twitter:
  2. Share this on Facebook:
  3. Submit it to StumbleUpon
  4. Bookmark it on Delicious

141 comments… read them below or add one

Sean Davis January 4, 2012

Okay, I’m loving these write-ups. No one else (within typical blogging circles) is talking about this stuff.

I have a question, though. I’m not sure if anyone has asked it yet.

How can we determine the importance of headline dimensions in relation to our main body of text?

Recently, I grew up a little bit and stopped going crazy with the formatting of my headlines within my posts. Now, I’m depending more on font dimensions, line-height, margins, etc.

I think it’s a much cleaner way of doing things. But does it change based on any of the equations you’ve mentioned here or your last article?

I understand that this may be a question for another article. If so, I’ll be patient and wait for that one :)

Nice work!

Reply

Chris Pearson January 4, 2012

Sean, you’re talking about typographical scales, which, in the simplest terms, determine the heights of headlines, sub-headlines, and other auxiliary text relative to your primary text.

I’ve done some preliminary work with scales based on the golden ratio, and here’s what I’ve found:

  • Primary font size: 16
  • Website title: 16 × (φ2) = 42
  • Post headline: 16 × φ = 26
  • Sub-headline: 16 × sqrt(φ) = 20
  • Auxiliary text: 16 × (1 ÷ sqrt(φ)) = 13

Site Title (42)

Article Headlines (26)

Sub-headlines (20)

Primary Text (16)

Auxiliary Text (13)

A scale like this yields 5 usable font sizes and does not require the arbitrary selection of another “important number” to fill in spatial gaps.

Another interesting note is that, according to this scale, the article headline font size is equal to the line height of the primary text in the article.

Finally, I haven’t tried out a scale like this on any of my sites yet, but if anyone reading this wants to apply it and share the results, I’d love to see them!

Reply

Sean Davis January 4, 2012

Wow! This stuff is right up my alley!

I think I might spend a day concentrating on these last couple of articles, your ratio tool, and SuccessOnMyMind.com.

I’m going to see if I can get every area of the site in accordance with these standards… also taking into consideration what you’re saying here about effective website design.

I’m loving it.

Reply

Ramanan March 15, 2012

How much is letter-spacing important in all this?

Reply

Chris Pearson March 17, 2012

Ramanan, letter spacing is certainly an important aspect in typography, but the primary reason I don’t mention it here is this:

Type designers (people who make the fonts) spend a lot of time and energy on the default letter spacing of the fonts they create.

Because of this, graphic designers (people who use the fonts) usually only have to make letter spacing modifications at extremely large font sizes or for special-use cases (posters or big headlines, perhaps).

Reply

Ramanan March 17, 2012

Chris,

Understood.

Excellent post by the way.

Michael Kjeldsen June 4, 2012

Thank you for those font-sizes – dead useful!

But what about line-height and margins for headers, what would you recommend?

Reply

Darren March 11, 2012

I didn’t realize how important typography was to design and usability. Thanks for an amazing article and for the explanation.

Reply

Khaimah Sharjah April 7, 2014

Actually a good read all you guys (and gals) can read is Chapter 11 on Jakob Nielsens Usability Guidelines for the modern day web era. An excellent read and some great tips on typography and characterized spacings.

Reply

Avinash D'Souza January 4, 2012

Just curious, Chris…have you also looked at the typographic scale while researching this post?

Reply

Chris Pearson January 4, 2012

I’m not sure I understand your question, Avinash. Typographical scales are a completely separate topic from CPL tuning.

Reply

Odt Ukoge January 4, 2012

The measure (what you’re referring to as CPL), or length of a line of type, should be no more than 65-80 characters per line. 100 is crazy, 55 is fairly narrow.

Read Bringhurst and Tschichold’s work on this. Bringhurst goes into every specific of type setting, Tschichold did a lot of work on ideal measurements for print/book layout.

Reply

Chris Pearson January 4, 2012

Odt, I’ve read both Bringhurst and Tschichold, and neither one cites research studies to back their claims. While both are considered “classic” texts in typography, they are merely a foundation for future research into the topic.

Your statement of “100 is crazy, 55 is fairly narrow” is baseless and should be immediately dismissed by anyone who is paying attention.

Furthermore, I mentioned that studies have shown that people read faster as line lengths get longer (so this was not some bold claim on my part; these are the facts).

I highly recommend that you read some studies on the topic of CPL and line length. Here are 2 that I found particularly informative:

I’m going to cover the psychology of CPL and line lengths in my next article on typography. Until then, it looks as though I’ll be debasing ignorant, clueless comments attacking my research :D

Reply

Brad Shaw April 21, 2012

I hardly think that was an attack man. However, it would be nice if you would reference the sources of your “research” because I’ve never seen a CPL of 100 recommended anywhere, ever. 55 and less, certainly, up to 75 usually, sometimes the 80s, but 100? Which typography expert said that was a good idea?

Reply

Kim November 17, 2013

Chris, you don’t think these masters did their own studies as part of their lives spent setting type? Is their lifetime of work in the industry and its theory not valid because they didn’t have metrics to refer to? If anything is ignorant, it is dismissing history, expertise and experience in favor of datasets. You yourself say that the findings of such studies have a range of 55-100. How useful are those studies versus decades of work and collected response?

Studies measure performance of certain metrics in a limited set of circumstances under specific conditions. Notably, your sources are for screens, not print, which is not directly mentioned in your article (using px as the unit is a give-away, but perhaps not to new readers). I would say that it would indeed be both ignorant and clueless to claim that findings in one area directly translates to the other.

I also see you make a rather unsubstantiated claim above regarding letter-spacing being left alone by typographers. I challenge you to find a typographer outside the digital realm who doesn’t manually adjust letterspacing and long for the day when web typography yeilds the fine control he has enjoyed for print. Forgive me as I recount a quote by a man who spent his life setting type, from cold-metal and hot-metal, through photosetting and digital for both print and web, “I knew a man who never added spacing to his type, he said it was to ‘respect the metal’… which was his way of admitting he was a lazy printer”.

Reply

Arienne Holland January 4, 2012

Keep it up, Chris.

As a former print graphic designer turned newspaper editor turned Internet marketer, I appreciate your thinking and research and the results of both. Your type calculator and your blog posts about the math involved are useful, possibly essential, for any graphic designer today, print or digital.

The closest thing to a type formula I got in college was, “The width in picas of your column should be no less than 1 x the point size in type; no more than 2 x the point size in type; and ideally 1.5 x the point size in type.”

Yes, I said picas. It’s not a bad guideline, but certainly not the Golden Mean.

Most textbooks or guidebooks are out of date as soon as they’re in print—even Strunk & White, which is oft-cited as the Bible of good writing. (For a good read, try Stylized: A Slightly Obsessive History of Strunk & White’s The Elements of Style.)

Now, tell me: is Helvetica your favorite documentary?

Reply

Chris Pearson January 4, 2012

Ha, Arienne, this may come as a shock, but I haven’t even seen Helvetica yet. I may queue that up for tonight.

As far as documentaries go, I’m a much bigger fan of ones that cover the universe, nature, and human behavior (economics, specifically).

And great point about picas and sizing. The line, “ideally 1.5x the point size in type,” perfectly summarizes everything that is wrong with most typographical advice.

1.5x? Based on what? Similar to this, most publishing software sets initial line heights to 120% of the font size. The reasoning? This is considered the minimum acceptable line height at which ascenders and descenders do not collide.

Scientific? Hardly. I know we can do better than that, and that’s what my research is all about.

Reply

Arienne Holland January 4, 2012

If you can’t find it on a queue near you, let me know and I’ll send you my DVD copy. Meanwhile, I’ll be off ordering my Stendig Calendar for the fifth year in a row… I’m not so much a giant fan of Helvetica as I am of giant calendars with Monday week starts that double as above-the-mantel artwork for $40.

Reply

Chris Pearson January 4, 2012

Design nerd alert! :D

Reply

Norcross January 4, 2012

Great stuff, but something I’ve run into a handful of issues when setting a font stack. Is there a good way (or some resource) that has stacks based on CPL?

Reply

Chris Pearson January 4, 2012

Fantastic question, Norcross. I’ve never seen a font stack based on CPL before, but a stack based on the character constant makes a ridiculous amount of sense.

Hopefully, the stuff I’ve set forth in this article will serve as the basis for typographical improvements in the future. Font stacks could very well be the first thing affected.

Reply

Hans Koevoet January 5, 2012

Chris, one of the sources you give (Reading Onscreen: The Effects of Line Length on Performance) says that although a long CPL facilitates faster reading, most readers think a short line does. Now I’d think that poses a dilemma for web designers. Should you strive for a typography that actually facilitates fast reading? Or should you strive for a design that seems best in the eye of a potential reader and hence will perhaps invite more visitors to actually read the texts on your site? Or even something in between?

Reply

Sean Davis January 5, 2012

Take a look at the comments of the article before this one.

Derek Halpern tackled this one in depth. To sum it up, the dilemma is solved when you start your articles off with short lines to get the reader going. Like you said, they think they’re better off.

Then, you slowly ease into longer line lengths. I’ve noticed that Derek does it by having specific width images in the top right corners of his posts. That way it gets the reader going with thier preferred short lines… building momentum.

By the time the picture is no longer in the mix, the line has lengthened and the reader is actually reading faster than they realized. Not to mention, they are now fully engaged with the article.

Reply

Hans Koevoet January 5, 2012

Thanx Sean. Nice summary!

Reply

Ahmad Wali January 7, 2012

Ahh!! Everything is over my head :(

Reply

Enabled January 8, 2012

Dude. Really, I am absolutely AMAZED by this calculator! I develop stock templates, and always had a hard time with typography! Now, everything works so fast! Really! THANKS! You rule mate! You just… rule!

Reply

Justin Mazza January 8, 2012

Hi Chris,
I have never even thought of this before and your math equations blew my mind away.

I have to give you the #1 spot for the most interesting and original post of the year. :)

Reply

Carson January 10, 2012

Wow, I never would have even thought about this, and I would never have taken the time to figure out the formulas.
Thanks for sharing your research with us. I’m off to check to make sure my design all follows the Golden Rule.

Reply

Martin January 12, 2012

Very, very useful writeup & great reminder.

I do typesetting for books (in a semi-professional way) and consider myself an InDesign- and typography nerd of sorts, but like many people I tend to forget about my good font manners when it comes to blog building…

Thanks—the best practices outlined in your article will help many bloggers to make the web a better (=more readable) place!

Cheers.

Reply

Aaron Hung January 12, 2012

very nice!! I love it thanks for sharing this :D I never would’ve figured out.

Reply

Adan Harris January 16, 2012

This is some serious stuff on Typography. I never reviewed this topic so scientifically. Thanks a lot! Loved it.

Reply

Diah January 16, 2012

Typography is the least given attention in design. But typography and also color affect the behavior and attitude of the reader towards the content. Thank you for this post. Very informative!

Reply

Avinash January 19, 2012

Wow awesome post thanks for the article :)

Reply

Daronet January 22, 2012

What a nice post. Got a little confused by the Math presented here, but later, got the potential and the message. Keep up with the good work.

By the way, I wanted to plus one it, but never saw the Google plus 1 button

Reply

Stefan Vorkoetter January 24, 2012

Hi Chris: I’m a registered thesis user (although it’s not live on my site yet), and have tried your optimal type calculator, but my question is, optimal for what? I find that the settings produced by your calculator (and by Thesis) are indeed pleasing, but somehow whenever I read a page set like that, I feel like I’m reading a marketing blog. :)

My personal web site (which I’m switching over to WordPress/Thesis) is a very technical one, not primarily a marketing site, and I’m wondering if this golden ratio typesetting makes sense in that context, or whether something a _little_ denser is called for.

Reply

Rob Thomson February 16, 2012

I knew typography was always an important part of design but never gave it much thought on the internet. This has me thinking now. Thank you as always for such great information. I need to implement this information.

Reply

Campbell February 17, 2012

Awesome article Chris! Not many folks are truly aware of how much of a vital role that the Golden Theory plays in the world as we Know it.
From the Tallest Skyscraper to the credit card in your wallet, eveything that we see around us in the world today is based off of the Golden Rectangle or Golden Section which ever you prefer.

It is nice to see that other folks other than myself have a deeper and more appreciative understanding of the Golden Theory and how it impacts our day to day lives.

I would like to ask you a question if you wouldn’t mind Chris? What is your professional and personal opinion on the use of text-align: justify; on blogs or websites?

I am kind of torn on the use of this myself. Even though I do like it and it would basically boil down to design preference and personal opinion I would be thrilled if you would weigh in on this with your opinion as you have far more experience when it comes to typography than I do.

Thanks Chris

Cam

Reply

Chris Pearson February 17, 2012

Campbell, I consider text-align: justify to be a sin on the internet.

When justifying text, the browser will stretch and contract the whitespace in between words so that each line takes up the same amount of horizontal space.

This creates unnatural syncopations in the text that you simply don’t get if you stick with a ragged right edge.

Justification works with certain typefaces in very narrow columns (the total amount of unnatural whitespace is less if the lines are shorter, thereby diminishing the negative effects of justification), but it is not something that should be done on the medium to large columns of text that you commonly find on the internet.

Reply

Lukas August 31, 2013

I think text-align: justify; works fine by now, since css3 allows you to enable hyphenation, so you don’t have problems with gigantic whitespaces anymore.

Reply

Campbell February 17, 2012

Hey thanks Chris! Thank you so much for your reply to my specific question. The Blogging Platform is relatively new to me and I have found one thing that has been consistent the 4 years that I have been web mastering, it’s not about what I like or perceive, it’s what the majority of the public on the internet perceive or like is what really counts.

Thanks a million for your response once again Chris. I shot an email off to Brian Clark through his contact form asking the same question. Although I did get a reply it was not from him Sue it was from someone that works for him. Basically she told me they get thousands of requests such as mine regularly and referred me to sign up for Internet Marketing for Smart People….. Already get that and it has nothing what so ever to do with a CSS property nor does it or has it ever alluded on such to the best of my knowledge either!

Thanks for making the time to answer a basic question that apparently only you out of 4 other different people have made the time to respond to.
Be Shout Out of thanks for keeping it real with the average guy!

Cam

Reply

Bharat February 19, 2012

This is complete stuff related to typography, every single element in thesis theme got a well researched information.that why I like Thesis.

Reply

Umesh Ramidi February 24, 2012

Typography gives stunning look to any design, thanks for this valuable post.

Reply

Asmitha March 1, 2012

I know the importance of typography but i don’t know complete details about typography.This post is very useful.

Reply

bennett March 1, 2012

first time to know CPL,thanks your post

Reply

Stella March 7, 2012

I never even heard of CPL until now. Thank you for bringing new wisdom to my life…this is going to come in handy for me!! :)

Reply

John March 19, 2012

Thanks Chris!

I just removed the sidebar widget from one of my blogs and I was trying to figure out a way to accommodate for the extra space without it looking too wordy. Your CPL calculator will definitely come in handy there, I can’t thank you enough for taking the time to figure this out and with so many different fonts too.

Reply

Todd M. March 22, 2012

Awesome post Chris. I was never a math fanatic so I’ll leave the formulas to you! Thanks for the explanation.

Reply

Drake March 25, 2012

It’s amazing how resizing your font can give you a better design.
Thanks Chris.

Reply

Cam March 26, 2012

Hey Chris,

Just started building my first Thesis site and I must say man I am really digging your Framework a lot!

Another thing, man I do not know what you have done with this Framework but it’s something in the way the Typography formats on Thesis which is just so elegant, much more so than Genesis does!

Here take a look at my first Thesis site so far.

Cam

Reply

Hiddai March 28, 2012

Hi Chris.

First, I want to thank you about the advises, published here in your blog. As a beginner, your guide lines help me a lot.

Second, may I ask: I saw in the “Golden Ratio” calc, that for font-size: 15px & content-width: 510px the line-height = 24px. I checked your blog and saw line-height of 16px (1.6em). Why?

Thanks

Hiddai.

Reply

Jose Ward April 1, 2012

Hey. I just wanted to give my opinion on web design. The following are the recipes to success:
- Clean and easy to update website in both design and structure.
- Fast loading web pages with effective hosting services.
- Intelligent use of web technology – Flash, CSS, PHP, HTML5.
- The websites ability to convey the main message to visitors.

Reply

Rob Thomson April 9, 2012

I agree Jose. Great points!

Reply

British Guy April 20, 2012

This blog has got a very easy and “relaxing” typography. Another blog I came across and it is pleasant for the eye is Blog Tyrant. I really like the bigger font size (+16) and 1.5+ when it comes to line height

Reply

Navin Kunwar April 20, 2012

It’s amazing, it seems resizing 16px for font give a better design.

Reply

Alex R. May 2, 2012

Thanks for the CPL info and advice – going to have to go over the article again, especially the math section. I need to dig deep in my brain to recover all that high school math factor stuff…

Reply

Adverse May 24, 2012

Very interesting and informative post. I need to reread the post, but I got the general idea of the algorithm. Worthwhile read thanks for sharing.

Reply

John Aten June 8, 2012

The dust up over characters per line, reading speed and reader attraction/repulsion posed a question.

I have noticed in my own reading habits that the line length is less attractive/repulsive to me than the number of lines in a paragraph. If I see a longer line length with only two or three lines in the paragraph, my eye will go right to it, but if there is a fat paragraph there is a slight repulsion that I have to go over in order to keep reading, especially when I am in a hurry.

My suspicion is that if longer lines produce paragraphs that are not as tall, then attractiveness to the reader is strengthened. Any research or thoughts on this?

Reply

Time June 15, 2012

Thank you! Great blog!

Reply

Marcie July 1, 2012

Since I don’t see anywhere else on your blog to contact you, I’m posting my query here. I’m wondering if anyone else is having problems with Thesis after upgrading to WP 3.4.1. My photos and captions have gone all wonky (like my technical lingo?) after I edit a page. It looks fine on the dashboard, but it goes to hell on the page. I can’t find any help from WP on this issue. Help!

Reply

Chris Pearson July 2, 2012

Marcie, have you tried contacting DIYthemes support? Post a thread in our forums, and our experts will help you resolve your issue.

Reply

Shivanand Sharma July 6, 2012

Thesis developer subscriber here. I wish Google AdSense use this typography in their text ads and give us a relief. It’s such a poor experience putting their ads on a site running Thesis (or any theme by Chris for that matter).

Reply

amar July 7, 2012

Awesome writing, I never thought i can do magic with typography

Reply

Mahmoud Ahemd July 18, 2012

Very interesting and informative post. I need to reread the post, but I got the general idea of the algorithm. Worthwhile read thanks for sharing

Reply

William July 21, 2012

Hi Chris,

Please excuse the off topic question, but I couldn’t find and email or contact form elsewhere :(

I see you use vps.net hosting service and I’m considering it but before that, I want to ask you about number of visitors and performance. My wordpress sites get around 100-110K visitors per month and currently I’m paying $49/mo with Servint VPS.

If I consider vps.net would be to lower my costs without compromising performance, but the level 3 you use is more expensive than my current plan. Do you think that my level of traffic would fit inside a level 2 plan?

Please feel free to answer by email if you prefer and since now thanks a lot for your advice.

Reply

Happy Hotelier August 1, 2012

@William

As I can’t see the date of your question, I would like to warn you that despite the brouhaha, I turned away from VPS after a delusional year the beginning of this year. There are other and probably better options.

Reply

Kumar July 27, 2012

Earlier, I read a post on 40 typographic websites and it was really stunning. Actually we are planning to make our logo a typography, so I am searching on resources so that I can send it over to my designers.

Reply

Travis McAshan August 6, 2012

First, I just wanted to say thanks for being willing to share your passion in a way that makes the web a better place. Second, I recently used your calculator to my site more readable and just wanted to say double-thanks!

One question I have now that I’ve nailed my paragraphs is the headlines. Also, I’m using a mix of Avenir/FF Meta/Antartida. I tried to eliminate the Antartida completely and just use FF Meta but the design started looking bland.

My question is this — what types of formula do you recommend for headline and sub-headline spacing between and after paragraphs? (not I’d share my site but don’t want to spam your site)

Reply

Travis McAshan August 6, 2012

As a quick follow-up, I just wanted to express regret for pressing “submit” before re-reading my original post. If you can power through the grammar issues and suggest any insightful tips on my question, I’d be most appreciative!

Reply

Hans Koevoet August 11, 2012

I’d recommend you to not use a formula but to train and use your eyes. Look at other websites, but also to books and magazines, and try to understand why the typography there does or does not appeal to you. Google for websites about typography, or read a book or two about it (Like ‘Stop stealing sheep’ by Erik Spiekermann – who happens to be FF Meta’s designer). Develop your typographic guts. That will bring you much further than using formulae.

Reply

Ahmad August 8, 2012

Wow! great Job. Very nice

Reply

Cornerstone August 10, 2012

Okay, I have officially been blown away and being a fatalist I thought that could never happen but the Golden Rule for Typography. Thank God someone out there is actually using their brain for something other than how to create cat memes

Reply

DesignSkew August 12, 2012

Well, the concept is nice. But when I tried Georgia with same font-size as on Pearsonified on my blog, it looked somewhat weird, not as desired. There is indeed something like Golden Typography Ratio that works behind the scene.
Maybe the background also helps the font look so good, atleast as in your blog, the black and white combo.

Reply

Mangesh September 3, 2012

can you please tell me that if the font characters are bold, then it affects line height or not?

Reply

Koundeenya September 12, 2012

Whoa! I didn’t expect such logics, algos in typographies. You let me know.

Reply

Linaka September 16, 2012

I’ve never really thought about CPL much, let alone the math principles behind it until I came across your article. Thank you for taking the time to post it. I’ll be applying the theories on my next design :)

Reply

Hassan September 20, 2012

this is some use full information that you didnt find every day
thanks for this amazing post

Reply

Alex September 25, 2012

Great tool and really its second to none. See such small logics which we ignore, can have great effect on web and conversion.

Reply

Ceba October 15, 2012

Excellent post, you wrote something which one doesnt get easily Internet, Such easy logics to understand. Thanks

Reply

Steve October 25, 2012

I’m just starting to try and learn more about typography after having bumbled my way for years not really wanting to or needing to really, its a great post and added to my collection which im beginning to work through.

Reply

Finland Blog October 31, 2012

Great work and information Chris

I will play around with these font and tag settings
Greg

Reply

Peter Haken November 1, 2012

Hi

really useful, great reading but some gone way over my head, think I need to read more about this.

To be honest we use CMS open source and fonts can be changed quite easily then I change sizes if needed in editor.

Thanks for sharing

Reply

Jihan Ahmed November 7, 2012

This is really an in-depth analysis of typography based…. I’ll apply this tricks on my blog. Thanks !

Reply

Kerrigan November 28, 2012

Nice write up. But again, for someone that hates imprecision, its nice of you to lump “most designers” into a group that you have no data about and then proclaim they don’t put any thoughtful consideration into their designs.

I found it extremely offensive that you keep mentioning designers like they are a group of neanderthals punching their monitors and just taking what comes out of it.

Most designers I know, have been implementing the golden ratio into any aspect they can think of and incorporate it as much as possible through their design, typography, and layouts.

It seems you believe that print designers have been guess at what looks good for the last 600 years, the fact that you don’t believe that this issue has been studied until you is incredible. Printing by machine has been around since 1440.

Do you truly believe these things or are you just trying to make it seem like you are the only person on the planet that has ever thought about incorporating the golden ratio to their typography?

Reply

Fer'n Guy December 9, 2012

Sorry OOT!
How to make math symbol in blog?

Reply

Simon January 16, 2013

Great stuff. Do you feel that laymen configuring typography is going to become more or less important as technology makes this more and more automated (case in point, Thesis auto-configing golden ratios)?

Reply

Maqian January 18, 2013

This is really an in-depth analysis of typography based…. I’ll apply this tricks on my blog.

Reply

Taswir Haider January 20, 2013

Can u explain,How can we determine the importance of headline dimensions in relation to our main body of text?

Reply

Shoutheasken1961 February 2, 2013

Hi really useful, great reading but some gone way over my head, think I need to read more about this.

Reply

German Dude February 23, 2013

Typography is something for designers, not programmers, right? Although typography is quite exact science, how many designers you have seen, who are good in math and are able to read formulas? :)

It is becoming less and less popular, but some sites still use elastic (stretching, dynamic) layouts, which would make CPL variable.

Reply

Soresm February 24, 2013

Nice info!

Does any one know a WP theme that uses golden ration?

Reply

Javier February 24, 2013

This post is far beyond anything I’ve read about it. Finally someone digs into what’s not just important but USEFUL as well. I love the idea, but somehow it is a bit hard to read. Could you make another one with more examples (practical examples) to follow? Different kind of examples may work too.

About THESIS, man such a great framework. I used it like ten times before I realized I wasn’t doing websites anymore but thesis templates ;-D

Reply

Angelica March 9, 2013

Same here, I also had to reread the post but I already got the idea. Very interesting. I never thought of this CPL until I read this article.:) Really useful. Thanks!

Reply

Brett March 14, 2013

Never gave this much thought before but it makes sense. Fonts do affect aesthetics, and in turn, appeal.

Reply

Mercedes March 15, 2013

Wow, I didn’t know that things like this was important, I’ll apply this in my design.

Thanks for sharing

Reply

Mike March 17, 2013

Couldn’t find anywhere to contact you besides here. I am looking to purchase the Thesis them, but am holding back because I would like to use the Pearsonified skin. Do you know when it will be available?

Reply

hartley March 20, 2013

This looks great. Any possibility you could let the user choose something other than pixels. I work in the print world and I use picas, points, inches.

Also, since different typefaces have different widths, are you planning to create an advanced version of the calculator that will let the user enter the typeface or maybe its x-height [also measured in points or inches]?

Reply

Steve Bonin March 25, 2013

Hi Chris,
Thank you. I am a self-taught designer and this is something I have never considered. Thanks again

Reply

Design Crew March 28, 2013

You are absolutely right; most of the designers first define column width and then enter text according to it. Its first time I come to know about CPL. Its matter of common sense, that CPL is indirectly proportional to font size. But the relationship you defined for relation of CPL with font size and line width is new and interesting for me.

Reply

John Piechnick April 6, 2013

Pretty long article, but really interesting. I always did the traditional way of creating typography (minus the math) and it didn’t always give me the best results.

Reply

Nate Weller April 6, 2013

As someone just starting to get interested in typography, this is very useful! Basing column width of text instead of vice versa is something I’ve never considered before.

Reply

Anke April 7, 2013

Wow, that such small differences in pixels can have that big effect on readability for example. I would like to see more of this stuff :)

Reply

Jared Williams April 17, 2013

I would also love to see more cant wait to use this for my clients!

Reply

Greek Guy April 24, 2013

Hello Chris,

Well done really useful content and very helpful for my work! Thank you.

Reply

Rishi April 26, 2013

Great concept of typography, and thanks for your tool, the one that lets you calculate the line height based on the font-size. Its perfect

Reply

Paul D. Mitchell April 28, 2013

The concepts of typography you described here are outstanding. They are very easy to follow. Thanks a lot for sharing the tips.

Reply

Adam Fletcher May 2, 2013

Great Post! It is amazing how much of a difference things like this makes when working on stuff! Everyone hates a clumpy website. I have to say at first I wasn’t interested in this post because of the math but it had some great information in there. I look forward to reading some more! Do you post at all on Responsive Designs? Again Thanks!

Reply

Klaus May 29, 2013

For me this seems a bit complicated. My own rule of thumb:
1. 35 – 60 CPL seems to be optimal for a quick reading experience
2. If the CPL is bigger than 60 try to give more line height (150% and more)
3. Have an eye on the overall grey tone of the page. If the lines start to fall apart somethings goes wrong and you have to switch to more columns.
4. In responsive designs the line height should grow automatically when the CPL increases.

Reply

Leo May 30, 2013

Damn, I can’t believe your snotty reply to Odt! Classic texts are classic for a reason; they don’t need smarmy, ambiguous “research” to back them up.

Reply

Chris Pearson May 31, 2013

they don’t need smarmy, ambiguous “research” to back them up

That is probably the most ignorant thing I have ever read.

Reply

Karen Walters May 30, 2013

Helpful article in this day and age when everyone sets type to some degree. Many designers think that typography consists of only selecting a typeface, choosing a font size and whether it should be regular or bold. For most designers it ends there. But there is much more to achieving good typography and it’s in the details that designers often neglect.
Great Job and Keep it Up !!

Reply

Rachel June 8, 2013

Holy cow. I think I’m in love.

Reply

Zac June 16, 2013

I just applied this to my site, what a huge fricken difference it makes. Awesome man!

Reply

Inderjit Singh June 23, 2013

Amazing article, Thanks for sharing :)

Reply

Josh Brancek June 23, 2013

This could be classified as an timeless wisdom folks!!!

Reply

Entagy July 8, 2013

Considering today all new websites try to do ‘responsive design’ , the font types used and their layout on the page are increasingly more significant.

Almost all websites we build are mostly CSS and texts, so spacing the content in a correct way is critical.

Thanks for the post, I will take it to heart on my next project.

Reply

Steefenhak July 31, 2013

Just like Rachel said, Holy Cow, I’m in love…! Thanks for sharing this interesting article. Please keep on posting.

Reply

Bastian August 1, 2013

Hi there,

thanks for the good article. I currently have a similar issue where I need to get my hands on stuff like that. I have tested your thesis and my result is… that it does not work. You said the following:

“Each font has a character constant, μ, associated with it that relates the font size to the width of each character.”

So I tried to calculate it on my own width Arial. However, the result of µ is _not_ constant. I have dumped the values from a font-size 0 – 100px to a chart and it looked like it is reverse logarithmic. Here is a sneak peak between 10 and 19px of font-size:

µ = 3.436123348017621 = f / (w / cpl) = 10 / (227 / 78)
µ = 3.459677419354839 = f / (w / cpl) = 11 / (248 / 78)
µ = 3.2387543252595155 = f / (w / cpl) = 12 / (289 / 78)
µ = 3.219047619047619 = f / (w / cpl) = 13 / (315 / 78)
µ = 3.0847457627118646 = f / (w / cpl) = 14 / (354 / 78)
µ = 3.1793478260869565 = f / (w / cpl) = 15 / (368 / 78)
µ = 3.0072289156626506 = f / (w / cpl) = 16 / (415 / 78)
µ = 2.9598214285714284 = f / (w / cpl) = 17 / (448 / 78)
µ = 2.912863070539419 = f / (w / cpl) = 18 / (482 / 78)
µ = 2.872093023255814 = f / (w / cpl) = 19 / (516 / 78)

So either I am doing something wrong or this thesis is simply not true. What do you think?

Reply

Chris Pearson August 1, 2013

Bastian,

I think you probably didn’t test this in Firefox, which does a much better job of linearly scaling up font sizes than Chrome.

My company recently compiled character constant data for every font Typekit offers, and I was shocked at how inconsistent Chrome was compared to Firefox in rendering different font sizes faithfully.

The bottom line? We saw stable data—with no downward or upward progression like you reported here—with Firefox. Also, it’s worth noting that we didn’t see progression with Chrome, either, but the standard deviation of the data was much, much higher than it was with Firefox.

Reply

Bastian August 2, 2013

Hi there,

I have tested this in FF/Chrome/IE10 so far and the result was the same. But as I have guessed: I have done something wrong implicitly. There was a letter-spacing of -1px set on the text I was testing. After I removed the letter-spacing everything worked as expected. This also means that a letter-spacing of -1px with a CPL of 9 does not remove 8-9 pixels in width, but a sligthly different, unpredictable value.

So I have found an exception to this rule by accident. Hopefully this helps someone in the future reading this :)

Reply

Sarah Ingram August 8, 2013

Thanks for such a simple and easy article. I was not aware of how important typography is in the design. This will create an interest in novice designer to elaborate their knowledge about typography.

Great Work….!!!!

Reply

Ali September 3, 2013

Excellent point about CPL, Chris. This is one of the problems we face when getting our designs from those crowdsourcing design competition websites. Maybe those business should set an initial barrier to test if designers pass on certain standards or at least publish some ddesign guideliness…

Reply

Peter September 11, 2013

Interesting theory, but calculating line height this way still doesn’t create a “Golden Ratio” effect on a block of text. If you want to use the golden ratio shouldn’t you be measuring the actual whitespace *you see* between two rows of text?

Georgia 15px /24px leaves you with a bunch of black rows *visually* about 7px tall with *visually* 15px of white space in-between them. Hardly the pleasing “Golden Ratio” effect as advertised.

Reply

Chris Pearson September 11, 2013

It’s not “golden ratio whitespace.” It’s Golden Ratio Typography.

Reply

Peter September 11, 2013

Same thing, the point is to achieve the optimal amount of whitespace between 2 or more rows of text. How is it assumed that by applying the golden ratio to line-height that you will produce Golden Ratio Typography? If anything, “golden ratio whitespace” is the ultimate goal to achieve.

Reply

Chris Pearson September 13, 2013

Peter, you do it your way, and I’ll do it mine. Ultimately, the results are subjective, and you should use whatever looks best to you.

I stand behind the rigor and precision of my approach, as well as the fact that my work is informed by years of typographical research.

Reply

Ask a Toddler September 15, 2013

Awesome, thank you!

Reply

Chiller September 30, 2013

Great Site! Why did you stop it??

Reply

Chris Pearson October 2, 2013

Chiller, I haven’t stopped the site; I just haven’t updated it in a while :D

Reply

Adam October 29, 2013

Had to leave a comment, this is pretty amazing stuff right here! Thanks for the post Chris!

Reply

Josh Trenser November 4, 2013

Chris, you rock!!! This is awesome stuff indeed!!!

Reply

James Morrison January 21, 2014

Calculating the line height this way doesn’t create a “Golden Ratio” effect on a block of text. As a designer I am always searching for the better options and implement them to make my designs easy, effective and attractive.

Reply

Chris Pearson January 21, 2014

Very scientific, James. Thanks for your exhaustive research.

Reply

Stephen Marck January 23, 2014

Hi Chris

Useful tool. Do I take it that this could also be used as an indicator for print based design? Also, I’d love to get this as a App rather than having to go online to use it. Any chance you are making one?

Cheers

Stephen
Graphic Designer UK

Reply

Jack January 23, 2014

Sweet! really useful stuff, probably saved me a few hours! Thank you.

Reply

Phillips January 29, 2014

Chris, this article is very well written. I just stumbled across it today and it is EXACTLY what I have been searching for. Although I am not actually doing “typography” (I’d actually never heard the term before), your formulas and examples helped me to get the font character sizes that I needed for my specific application. Thank you very much for your hard work and posting your detailed research for me and others alike to read. It was definitely a major help in getting me past the huge hurdle that I was facing.

Reply

Naman February 21, 2014

Nice article…lots of info even in the comments.

Reply

Carson February 25, 2014

Wow, Amazing info in this article, even the comments have great info.

Reply

Mike March 7, 2014

Great information, I’m just in the process of creating my website and this info will be a huge benefit.

Thanks for sharing.

Reply

Kevin March 10, 2014

Awesome post, but how do you change the tabs of your menu be different colors???

Reply

Chris Pearson March 11, 2014

Kevin, I used an inefficient, 2006 technique with images to make my multicolor nav menu. The Pearsonified Skin, which you’re using, is most easily changed with pure CSS, and it looks like you’ve managed to get that working.

Reply

Agency Fusion March 22, 2014

Chris, this is awesome. I love the incorporation of math. People think math and art are opposites, but I disagree – I appreciate your way of thinking. Very cool.

Reply

Hoot and/or Holler

Previous post: