Jeremy Sarber

I'm Reformed Baptist, pastor of Joy Christian Church, and founder of Sermon Transcription Services.

Beyond the Horizon

What Is the Best Font Size For Websites?

Dear Christian pastor, it’s time that someone thanks you for your efforts. You consume countless hours alone with Scripture, studying every word and phrase. When you’re not serving your church and community, you’re writing biblical expositions that benefit hundreds, possibly thousands more online.

So from the bottom of my spiritually thirsty heart, thank you.

Nevertheless, I have somewhat against thee because thou hast not given much thought to the digital reader.

Perhaps you or someone else in your church set up your website to which you began publishing blog posts and sermon transcripts. Again, I thank you for the edifying material. I cannot, however, continue reading your content unless you’re willing to make one remarkably simple design change: Increase the font size.

Reading Books Versus Glowing Screens

You’ve heard the familiar refrain: I hate reading on a computer screen. But the glowing screen is not the real problem. Apparently, web designers and theme developers think the majority of the population has 20/20 vision and retinas with built-in zoom functionality. I assure you we don’t.

Allow me to demonstrate.

First, pull up a blog post on your website.

Second, take a book from your shelf. Any trade paperback will suffice.

Third, sit in front of your computer. Health professionals recommend that you keep your face at least an arm’s length from the monitor.

Fourth, hold the book at a comfortable distance from your eyes as though you were reading it.

Fifth, don’t move the book farther away or lean any closer to your computer screen. Glance back and forth between the two. Do you see the difference?

Chances are, the width of the text on your website is narrower than in the book. The font is probably smaller as well.

That’s the real problem.

We should trust the men and women behind contemporary book design. Publishers have spent more than 500 years perfecting typography and page layouts. The advent of computer technology hasn’t changed the basic principles of readability. Human beings use the same optical organs to read on a screen as they do print.

In other words, your goal is to provide visitors with a similar reading experience as they’d have offline, curled up on the couch with a good book. (I recommend The Gospel Call and True Conversion by Paul Washer. He puts easy-believism in its place which is somewhere far, far away from the church.)

Imitating Book Design on the Web

Imitating quality book design on the Web comes down to a single number. Forget about font sizes for now. Horses don’t push carts. Characters per line (CPL) is the magic number that determines what is the best font size for websites.

The typical paperback has 50-60 CPL. But don’t take my word for it. Count them yourself. Find the longest line on the page and tally its letters, punctuation marks, and spaces. The combined total will average 50-60 CPL.

The Bible is not a good option for this exercise, by the way. Bible publishers are as bad as web developers, probably worse. Two columns of tiny text sandwiched between a thousand cross-references? Seriously? But that’s a soapbox for another day.

Now before you count the characters on your blog, you should know that 50-60 CPL online looks ridiculous. This paragraph is an example of that. We have to take into account that twenty-six years of subpar web design have trained us to sit closer to the screen than we should. So we need to compromise between ideal CPL and user expectations and behavior.

75 Characters Per Line

My somewhat arbitrary recommendation is 75 CPL. More than a decade of experience multiplied by browser defaults divided by personal preference equals 75 CPL. Plus, four out of five dentists agree. (I’m not sure the fifth is a real dentist. He’s never recommended even a single brand of toothpaste.)

In all seriousness, typography experts use careful math to determine what elements and sizes will result in a readable website. I’ll leave you to research the process while I skip ahead to their conclusions.

Emil Ruder recommends 50-60 CPL, though his numbers are not specific to web design. The Baymard Institute suggests a maximum CPL of 75, and they practice what they preach. Their site has 71 CPL. Mikey Anderson urges us to shoot for 75 CPL. His blog maintains 70 CPL.

Go with your gut (unless, of course, your gut is telling you less than 65 or more than 85 CPL). See for yourself. Compare the readability of my website (75 CPL) to Mark Driscoll’s (155 CPL). Your eyes will scream, “Take us back to Jeremy’s blog! Please go back.”

(Sorry, Mark.)

Here are a few more popular Christian websites to contrast:

  1. DesiringGod.org (88 CPL)
  2. GTY.org (124 CPL)
  3. TVCResources.net (73 CPL)
  4. TruthForLife.org (103 CPL)

Calculating Font Sizes

Now that we understand the significance of CPL, we can calculate the best font size relative to the width of our content. As the width of the text increases so does the number of characters per line. In turn, we have to adjust the font size to maintain our target CPL.

For instance, if the main body of text on your blog is 600 pixels wide, your font should be 18 pixels to achieve 75 characters in a single line. If it’s 800 pixels wide, you’ll need to increase the font size to 24 pixels.

Let me offer a simple reference guide before your brain turns to pudding. The figures which follow assume that you want 75 CPL.

  • 600px container = 18px font size, 27px line height
  • 650px container = 20px font size, 30px line height
  • 700px container = 21px font size, 31px line height
  • 750px container = 23px font size, 34px line height
  • 800px container = 24px font size, 35px line height
  • 850px container = 26px font size, 38px line height
  • 900px container = 27px font size, 39px line height
  • 950px container = 29px font size, 42px line height

I’ve included the line-height property because it needs to increase along with font size. Otherwise, the lines of text will run together, rendering your mission to achieve an ideal font size all in vain. Sentences don’t enjoy overcrowding any more than introverts in elevators.

Implementing the Changes

I forgot to ask whether you know how to tweak your blog’s CSS.

If not, there are plenty of qualified freelancers on Fiverr willing to work for only $5. Just remind them to adjust the font sizes and line heights for both mobile devices and desktop screens.

If you’re already familiar with CSS, knowledge is power. There is nothing now stopping you from improving the readability of your site.

Once you’ve finished, sit back and watch what happens in Google Analytics or whatever tracking script you use. People will stay on your website longer. In turn, search engines will assume that your content is worth reading and send more traffic. I’d call it magic, but it’s just a matter of giving visitors what they want (even if they don’t know it’s what they want).

Pastor, I look forward to reading your posts again shortly. Maybe next time, the experience won’t induce a silent migraine.

 

You have the potential to REACH TEN TIMES AS MANY PEOPLE with your church's message by turning audio sermons into versatile text. Sermon Transcription Services can help.