There’s a lot of talk on the web lately about font sizes. Sometimes it’s backed up by studies, and sometimes it’s based on personal experience.
Overall, it’s a great trend. I’m thrilled that we can actually talk about fonts and the web in the same breath.
But 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!
New-Found Font Freedom
It wasn’t long ago that we had a minuscule list of unremarkable fonts to choose from. Now, the typographic doors have been busted 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.
This means good times can be had by all: you are free to move about in font land. But beware …
Watch the 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 you find two main 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 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.
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.
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 Font Size Argument
I have a confession to make. While many people write about font size 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 joke.
You know that x height factor I explained above? That’s 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? 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, 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. I tell people to 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 font information you come across. Your web pages will be beautiful and effortless to read. And that’s the whole point, right?
Choose and use the best fonts for a professional-looking brand
Carefully-chosen fonts are a powerful way to communicate your brand style. And you don’t need special training to choose and use fonts like a pro. Find the font guidance you need in the Beautiful Typography Guide.