There’s a lot of talk on the web lately about the best font size to use online.
Sometimes fonts size information is backed up by studies, and sometimes the writer makes recommendations about the best font size based on personal experience — or simple opinion.
I’m thrilled that we can talk about fonts and the web in the same breath — the early internet days with limited font availability are still fresh in my mind!
While you’re sorting through the font information floating around out there, I’d like to help steer you clear of some pervasive lies.
Font users beware!
Newfound freedom to pick the best fonts size
It wasn’t long ago that we had a minuscule list of unremarkable fonts to choose from. Now, the typographic doors have bust wide open.
Google Fonts are available for free, and Adobe — long a powerhouse font resource on designer’s desktops — acquired Typekit, a leading web font provider and began offering their collection as Adobe Fonts.
This means good times can be had by all: you are free to move about in font land.
But beware …
Watch for typography danger signs
It can be dangerous out there.
First of all, using too many fonts on a page can make for a messy, scattered-looking site.
I recommend that you start by pinpointing your brand personality with my free quiz.
Then, choose two main brand fonts: one for your headlines, and one for your text.
When you pick out your fonts, remember what your mamma taught you about picking out your school clothes: don’t combine stripes and patterns. Look for pieces that blend well.
Look for font shapes that blend well, too. To do this, you need to look carefully at the letter forms.
Look at lower case letters with distinct forms, like a, g and e. Find fonts that use similar shapes and try those in combination.
But what about the your fonts size?
Well, my friend, here’s a designer’s secret.
What’s the best font size? Mind the “x factor”
Here’s one font characteristic you may have never heard of. If you can train your eyes to see this, you’ll be head and shoulders above the average font user when deciding the best font size to use for your website.
It’s x height.
X height refers to the space between the baseline that letter sit on, and the top of the lower case x and mid-section of lower case letters. Here, I’ll show you:
When you’re looking for your two fonts, try to find a pair that approach x height similarly.
In general, the larger the x height, the easier a font is to read. The lower case letters of fonts with smaller x height sometimes “fill in” visually at smaller sizes.
The annihilation of the “best font size” argument
I have a confession to make.
While many people write about fonts size questions with great passion, we — the graphic designers of the world — are quietly smirking. That’s because we know something you don’t — something the passionate font size proponents never talk about.
I’m going to share this secret so you can be in on the “best font size” joke.
You know that x height factor I explained above?
X-height is what really makes a difference to readability, not font size.
Here, I’ll show you.
Here are two different fonts. Both of these examples are 14 pt.
The font on the left has a small x height.
And the font on the right has a large x height.
See how different they look?
Anyone who tells you “use 16 point fonts” or “14 is the new 12” isn’t taking x height into account. And without x height, you’re only telling half the story.
In the end, guess who has the ultimate say about fonts size questions?
Your eyes.
When considering a font, set a full paragraph in the font — and at the size — you’d like to use. Then set the same paragraph at a point size less, and a point size more.
Then look carefully. Which is easiest to read?
If you’re not happy with any of them, go back to the beginning and start over with another font.
Size doesn’t matter much, but (line) length does
While we’re on the font topic, let’s dispel one more falsehood. There is no perfect column width, either.
The truth is a bit more complex than what’s generally shared.
When you’re figuring out your ideal column width, it’s more important to think about your reader than it is to measure pixels. You don’t want to tire them out: you want their reading experience to be effortless.
Here’s what I mean:
When lines of text have too many characters, your reader’s eyes have to take a long journey from the beginning to the end of a line, and then find their way back to the beginning of the next line. This can be tiring if you have a lot of text.
If lines are too short, your reader has to keep hopping from the end of the line back to the beginning of the next, sometimes three or four times just to read one sentence. This is tiring, too!
Designers use this rule of thumb:
The ideal line length is between 50-75 characters. Aim for two to three alphabets worth of text.
What does this mean for you? It all goes back to your font choice. Pick a font, find the size that works best, and set it up in paragraph form. Then count.
If your lines are hitting somewhere between 50-75 characters total, you’re in good shape.
If they’re running short or long, consider either adjusting your column width or your font size.
So there you have it.
Use these insider font tips to go beyond the simplistic fonts size information you come across. Your web pages will be beautiful and effortless to read. And that’s the whole point, right?
19 thoughts on “Are You Falling for Font Falsehoods? What Matters for Picking the Best Font Size”
This is a wonderful article with lots of practical and easily applicable advice. I teach workshops on websites and will be adding this information to my presentations. Thank you
I’m glad you enjoyed it, Nancy. I have wanted to spell out this information for a long time … it feels good to get it out into the world! 🙂
Pamela –
Thank you for explaining “x height”. I wondered what that was.
Quick Q – Regarding the number of characters in a line, if you have a landing page (I’m working with the Agency Theme from StudioPress) and the “Full Width” layout allows for a lot of text across (here’s exactly what I mean https://demo.studiopress.com/agency/layouts/fwc) would you increase the text font size a point or two (which would increase the text size on post too) or would you insert images to brake up the “font density”?
Thank you again – Theresa 🙂
Hi Theresa,
There are a couple of things you can do. If the theme allows you to increase padding, that would be ideal: it would add some nice white space between your text and the edge of your content area, and would shorten your line length.
Using a larger font size would also mean less characters per line.
And inserting images would help, too … but you probably can’t insert images all down the page, so that may not be practical.
Good luck!
Thank you for your reply Pamela. Karyn (the comment below) brings up a great point. Depending on your market, it might be a great idea to increase the font size and make it easier to read your content.
Thank you both – Theresa 🙂
Excellent article, Pamela. The x-height information is a great reminder! We’ll be redesigning all three of our blogs this year and fonts/readability will be a huge factor. You’re example of “both 14 pts” makes it so clear to see the difference.
As someone who regularly has her browser window “zoomed” to 125%, I know how hard it is to read some people’s websites and blogs. The font and line-length info is exactly what I needed to know, not just for my blogs, but for my email newsletters, too. Thanks!
You’re welcome, Karyn! It’s nice when there’s a handy rule to guide your decisions, but it always comes down to setting a paragraph and then trusting your eyes. The more you do this, the more you’ll be able to see for yourself what font size is best.
I tend to use the rule-of-thumb of 11 – 14 words per line rather than 50 – 75 characters.
I find that a comfortable measure and is much easier to count than individual characters 😛
Thanks, James. That should work if you have sentences with a similar mix of long and short words. Otherwise, it’s a good idea to count characters: you just have to pick a few lines to get an average number.
Nice little snipe on my phrase “Size 14 is the new size 12,” but alas, you’re mistaken.
Size 14 is the new size 12 is merely a rule of thumb, suggesting that the font size people used “before” is too small for today’s standards, and that people should increase the font size.
Is there exceptions? Of course. X height of fonts is where those exceptions come into play. But for most web-safe fonts, that rule still applies. 14 is the new size 12.
And speaking of rules of thumb, yours, about line length is misguided.
Here’s the deal:
People, on first impression, prefer shorter line lengths because it appears unassuming. But in reality, they actually read longer line lengths faster.
So, you shouldn’t limit your content to 50-75 characters. Instead, you should start your content with a short line length (you’re giving people what they want) and then increase the line length later in your content (after people have read a few sentences) to speed up reading.
(One note: The reason why you need to increase it after they read a few sentences is because direct marketers have long known that if you get people to read the first few sentences of your copy, they’re more likely to read the entire thing. So the goal isn’t to get people to read everything… the goal is to get people to read just a few sentences).
Now, as an example, look at https://socialtriggers.com. Each article begins with an image with the main goal of shortening the line length to ~ 40-50 characters. Then, after the image, it widens to the perfect line length for reading which ranges from 75cpl to 100cpl.
For some proof, here’s some direct quotes from typographical research studies that shows longer line lengths contributes to faster reading:
#1 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.”
#2 “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).”
And then, with my theory that shorter line lengths are more preferable to the user, here’s another quote:
#1 “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.”
And another…
#2 “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.”
So, again, amending your rule of thumb for characters per line, it should say something like this: For the first few sentences, the goal CPL should range from 40 to 55. And then after, you should increase it to 75 to 100 CPL for faster reading.
Thanks for this well-researched comment, Derek!
The line length information is a bit confusing: it looks to me like the research tells two different stories.
Users read longer lines faster, but prefer shorter ones at first glance. Does that mean longer line lengths turn people away and increase your bounce rate? It would look like that’s the case.
I wrote an article about it here:
https://socialtriggers.com/perfect-content-width/
But here’s the summary:
When people visit your site, your goal is to get them reading because once you get them reading, they’re more likely to read your entire article.
How do you get them reading? Well, users prefer shorter line lengths. So you give them just that. And once you get them reading, you give them a longer line length… for faster reading.
Additionally, to make this even more interesting, there was some eye-tracking studies where people found out that if you started an article with a larger font / lead… similar to how psyblog does it… that encourages people to read your article.
(here’s the link to psyblog: https://www.spring.org.uk/2012/04/do-posh-people-cheat-more-than-the-lower-classes.php)
I suspect the reason for that is two fold. First, the larger font shortens the line length, and the larger font also grabs attention.
Yes, that “larger font in the intro” technique is something that goes waaaay, back … like, to when books were written by scribes! It’s an old technique that works great.
Thanks again for stopping by and adding to the discussion, Derek. I know you’re into fonts a lot more than the average website owner, and I appreciate how you put the spotlight on them. 🙂
You’re crazy to call my theory wrong though :-P.
Pamela, I’m so glad you showed the difference between two fonts at the same point size. There can be a massive difference.
As for the number of characters in a line, do you also need to consider character widths, which are also different depending on the font? Look at Verdana compared to, say, Arial Narrow or even Arial.
Another confusing element is that websites use pixels or ems for font size. So what you see in your word processor–points–needs to be converted to pixels. For example, 12 points = 16 pixels.
I always thought Derek’s ’14 is the new 12′ referred to pixels, not points. Either way, as you demonstrated, Pamela, it all depends on your choice of font.
It’s pretty amazing when you see those two fonts next to each other, isn’t it?
Re: your character width question, narrower fonts will fit more characters per line. Total characters still works as a guide for non-standard width fonts, but varying widths is one reason I give a range.
And the pixel-point-ems measuring standard is yet another reason it’s a good idea to take a long look at the x height of a font and let your own eyes be the judge of readability, not a number!
That’s the premise of this post, actually. I want to encourage you to get into the habit of setting a full paragraph of the font you want to use, at the size you want to use it. And then look … and trust your eyes. The more often you do this, the better you’ll get at spotting fonts that work well and are easy to read.
Great stuff, Pamela! I especially appreciate the bit about the x factor. I’m working on a new site, and since I’ve never been completely happy with my font or size choices before, now I have something to work with.
You also made me think of this: I already know that super long lines are very tiring on my eyes–back and forth, back and forth over a long stretch. Plus it makes me loose the “drift” or the rhythm of what I’m reading on the return.
On the other hand, though, I’ve been using my ereader a lot lately and thinking about whether I prefer that format or regular paper books. I like both, but the reader is more tiring for my eyes. Why? I think it’s the super short lines, now that you mention it. I was thinking it was the more frequent page turning/finger swiping and the inability to just sit back and read for a awhile, but I think it’s the line length. Or both,
Interesting stuff to think about!
The cool thing about ereaders is you have the ability to change the font size. If you’ve increased the font size on yours, it would be interesting to see if decreasing it would actually make it easier to read.
It’s counter intuitive, but your lines would have more characters that way, and you’d have less back-and-forth. Let me know if it works!
Excellent … thanks!
Comments are closed.