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?