Our next power word is because. Because is a power word because it tells people…
Typography Basics: Get Your Fonts Right With Our Handy Guide
Sharing is caring!
I get it. You want to get your blog up and running quickly. Totally understandable.
In the beginning, styling or revamping a blog can be hairy. You’ve got a lot of choices to make. You’ll probably spend hours pouring over website themes and layouts, thinking about your blog’s identity, and obsessing over color schemes.
However, none of your other design choices will matter much if no one sticks around to read your content. And that means one of the things you should spend the most time deciding is the one thing most people don’t even consider: the typeface you choose for your body copy.
How to Make Your Blog More Successful With Typography
Now, don’t glaze over because I used the word “typography.” Stay with me while I explain.
In non-designer lingo, “typography” can be translated for us lay people roughly as, “picking a font” or a typeface. For now, that definition will suffice.
As it pertains to your website, you’ll want to pick a font that will make your content easily readable on today’s numerous Internet-enabled gadgets.
The Problem With Typefaces on the Web
We’ve all been there. Your Google-Fu led you to the perfect blog, full of the exact information you were seeking. But when you try to read it — ugh! It’s too small, it’s too light, it’s too big, it’s too squiggly! Are these even letters??!?
You bail never knowing what treasures that blog had in store for you because it was just too frustrating to read the base font.
Don’t be that blog.
The reason typography is so important for the web is because we read it very differently than we read non-digital forms of content.
- Fatigue: Reading on a screen is harder on your eyes than reading print. As a result, your eyes can get fatigued very easily. Since so much of blogging depends on how long a visitor stays on your site, it’s in your best interest to make the reading easy on them.
- Scanning: To deal with the fatigue of reading on the Web, people resort to scanning rather than reading. Although this can work in your favor if you’re conscious of breaking up the text on a post with headlines and bullet points, you don’t want to spend your emotional capital writing something that no one bothers to read through.
- Device diversity: With a book, you have control over the way people read it, but reading on the Web is like the Wild West. Devices vary in size, viewability, font capability, browser settings, lighting options, and more. The font you choose must work well across different platforms.
- End-user customizations: Letter and line spacing is partially out of your control too, thanks to customizable browser settings. What’s cramped for one person might be too spaced out for another.
- Accessibility: Typography can also impact the reach of your blog. International visitors with limited English or vastly different alphabets can find it difficult to read crazy English fonts. It can also limit your ability to reach people with different visual or reading capabilities — like impaired vision or dyslexia.
The Bottom line
To be an effective blogger, you don’t need to become an expert in web typography. But it is in your best interest to choose fonts wisely.
How to Choose the Best Font for Your Blog’s Body Copy
Choose your blog’s body copy before changing any other style elements since it will impact more readers b the sheer volume of posts. Body copy, the text that makes up paragraphs (like this one), is the basis for all the typefaces on your blog. (Headlines need to be readable too, but there’s a bit more wiggle room with them since they make up a considerably smaller portion of Web reading.)
Your choice of font for body copy affects:
- the main text of your blog posts
- list items (like this bulleted list)
- image captions
- form fields (contact forms).
Keep in mind that the theme you choose for your blog will come with a body copy typeface of its own — but that doesn’t mean you’re stuck with it. Most themes will allow you to customize them to a certain degree.
Step 1: Choose a typeface
Right away, we’re in the Danger Zone with typography: choosing a typeface. Why danger? Most people enjoy pouring over font catalogs, looking for that perfect, unique typeface that speaks to you as if you were the Web Whisperer.
Stop right here. Take a deep breath. This is the danger: Do you actually want your blog’s typeface to speak to you? Shouldn’t it be speaking to your readers instead?
Unfortunately, despite what the preponderance of font websites would have you believe, the list of acceptable body copy fonts is not long. However, it’s easier if you keep the following concepts in mind.
Serif Versus Sans Serif
Serif fonts have little tails on the endpoints of the letters while sans-serif fonts have cleaner end lines. Conventional wisdom holds that serif fonts are best for reading print (assuming you don’t have visual limitations). However, a usability study by Wichita State University showed that for online reading, serif fonts work best.
That’s not to say that serifs are against the rules for web design. (Heck, we use a serif font here on Blogging.com!) It just means that you need to be more careful when choosing the right type of sans serif font – which means paying even more attention to the next two typeface elements.
Choose a Browser-Friendly Typeface
When you’re working in HTML, there are only so many fonts a browser can be asked to interpret on a web page. In fact, if you don’t choose a font that a visitor’s browser can interpret natively, the browser will default to its basic fonts in order to render the page. Each browser has a default serif font and another for sans serif which it will display if it doesn’t have access to the font you’ve chosen.
One way to narrow down your choices is to check a web safe font site to see if the font you’ve chosen will render correctly for both Windows and Mac computers.
Google Fonts is a relatively new way to use fonts on the Web. Google hosts open-source fonts that are available via API to any browser which accesses a page using them. Think of it as akin to fonts in the cloud. Google provides these fonts in an effort to make the web both faster (by caching fonts) and better looking (they choose fonts for clarity and optimization).
What that means for your website is that if you choose a Google Font for your blog’s body copy, a visitor’s first time to your site will involve their browser fetching the font information from Google’s servers and then displaying the page. The wait time is almost unnoticeable and it only occurs the first time a particular browser encounters the font.
A Word About ALL-CAPS
Don’t. Just don’t. Here are two great reasons you shouldn’t pick a font that renders body copy as all caps:
- Remember our nemesis, eye strain? Without the mixed case of sentences it usually sees, the eye must slow down significantly to make sense of the text. (At least, for most people.) It’s especially terrible for scanning web pages.
- With all-caps, your blog will read like you’re Abe Simpson shouting into a wood chipper to make a collect call. Not a good look.
Step 2: Choose a default font size
Remember, you’re choosing a font for your reader’s benefit, not for your own whims (assuming you want readers, of course). So, even if you like the look of a smaller font size, it may not read very well, especially across diverse devices. If people are squinting they’ll have more eye fatigue.
In general, you should shoot for body copy in the 12pt to 14pt range. Don’t go too much larger or your body copy will compete with the size of your headlines.
Another thing to consider is how far apart your vertical rows of lettering are. (This is called “leading,” which rhymes with “sledding.”)
If your chosen typeface and font size are interfering with vertical legibility, you can go into your theme’s CSS and tweak it. To increase vertical spacing, add an increased percentage (over 100%) as an attribute to the body font declaration:
Step 3: Choose the Default Text Color
Other typography tutorials might skip this step, but bear with me for a minute. There’s a trend towards fidgeting with body copy font colors in some blog themes. One of the worst offending colors is gray which is no less, in my opinion, than a plague upon the planet. Even mainstream newspapers are getting annoyed with it.
Put some good thought into the color you choose for your body font. Lighter colors will result in more eye fatigue for your readers. A good rule of thumb is unless you want to draw attention to something in particular, black is almost always the best choice.
However, if you do wish to use a different color for your body fonts, keep in mind that your theme might have changed the normal colors for menu hover text or link highlights (default is blue for an unfollowed link and purple for a followed link).
If you change these colors, visitors might get confused as to whether a phrase is hyperlinked or not. So, keep in mind that changing the color of your body font will have wide-reaching impacts across your theme.
Final Thoughts on Typography for Your Blog
Picking a great font for your blog shouldn’t be a casual decision but rather a deliberate choice that helps readers absorb your content more easily. However, if you must go rogue, track your site’s analytics to ensure your “fancy” font isn’t having a negative impact on your readership.
Last update: Sept 17th, 2017