From comic sans to wingdings, fonts are a major concern for a very niche group of people. Typography, however, can teach us a lot about how people react to different publication mediums. The key, of course, is striking a balance between readability, intent, and function.
What’s in a Font?
Online publishing platforms like Facebook have zero font options. Other platforms, like WordPress, Tumblr, and your everyday website, however, have nearly countless types of type to choose from. But what does it matter, the font and pairings we choose? Does it make a difference at all?
Yes and no. The idea for any blog or online article is to attract readers — what better way to do this than with well-designed, highly legible type? A horrendous font is equivalent to having music play on websites and hiding the “mute” button. And in a world where online readership is competitive and hard to capture, you need to do everything in your power to attract visitors and encourage likes, shares, and follows.
One of the coolest blogs out there (besides this one, of course) has to be I Love Typography. The site is a prime resource for all things print and digital font. It explains how everything from serifs and sizing to font spacing and “hierarchy” have major roles in terms of a site’s readability.
Before diving into fonts, though, let’s acknowledge one of the most important aspects of typography and word design: Fonts are highly subjective, hardly a science at all, and more of an art form than anything. With this in mind, let’s jump right into optimizing your website, blog, and marketing font selections.
Contrast
A live example of crappy contrast is likely to turn off readers, so instead a written example will have to suffice. Contrast is how visible text is on the Web. Yellow text on a blue background might be enough for an edgy band t-shirt, but is this the way to go for your business’ website? Probably not.
One of the most popular contrasts out there (other than black text on a white background) is white on black, or reversed out text. This helps words pop right off the screen but results in headaches more often than not. The lesson here is to use contrast as minimally as possible and only if it makes sense to do so.
Stick with light backgrounds and dark text to ease readability. Besides, this is what people are used to (see: books).
Size
Size matters, even if you claim to know how to use it. One of the most terrible, torturous things to do to your Web readers is to force them to zoom into your webpage. Properly designed, mobile-ready sites avoid this problem, but regular desktop viewers either need 20/20 vision or thick glasses to read 10-point type on a screen.
Keep text above 12 points at all times, or hey, why not make it bigger? Just because it’s easy to read on your super high-def monitor doesn’t mean your visitors and readers with small MacBooks will have an easy time with it. For effects, examples, and pull-quotes, consider sizing it down to differentiate sections of your blog or Web content.
Space
White space is a reader’s best friend. Lengthy blogs with 200 words per paragraph give headaches and nightmares, so feel free to let your content breathe by using double-returns (i.e. white or negative space) and wider line spacing. What you type on the Web is read much differently than a book, where page length and words-per-page affect the price and printing costs. Besides, most people will skip around on blogs and hunt for sections that interest them the most. Make it easy by including font hierarchy, which leads us to…
Hierarchy
Hierarchy is how you arrange your blog’s sections and subtitles. With the right approach, you’re able to pull more attention to large-type titles and sub-heads to help readers navigate your posts. Consider using bold, italics, different sizes, all caps, different colors, and contrasts for splitting up your Web content to encourage readers to go through your entire article.
Beyond the Font
Want to make your articles even more readable? Utilize bullet points, large text for pull-quotes, inner-navigation and anchor links, pictures, captions, and other elements to improve the reading experience. Analyze the effectiveness and design characteristics of every aspect of your page to ensure that everything A) Flows nicely, B) Looks good on different devices, and C) Delivers your message.
Font War
The most common battle fought in the font war involves serifs, or the lack thereof. A serif is the little flag or loop on letters that propel readers forward. Book printers will say that serifs are much better on the eye for longer blocks of text and improve reading speed, but again — this is Web content we’re talking about here.
Going sans serif often makes your text look more authoritative rather than authentic. Or does it? Again, serifs and other elements of type are highly subjective. The aforementioned blog implies that people read most easily what they are familiar with. Most blogs go sans serif as do media sites, but that doesn’t mean you have to, too.
Different typefaces work better in print or when digitized. Fonts like Verdana, Georgia, and even Calibri were designed for screen reading and are commonly used, though these same fonts may be dreadful on paper.
Fonts like Arial, Helvetica, Times/Times New Roman, and even MS Sans Serif are considered “Web fonts,” or usually safe bets for anything published for screen reading. Other fonts like Univers, Minion, Futura, and Frutiger are extremely common yet come at a cost (most font packages cost around $40, though they often have free counterparts). It is also important to note that font packages may have natural italic or bold settings, or if word processor is merely stretching a font to fit a style.
Still undecided on which fonts to use? Write out your blog or article and read it. What looks the nicest in conjunction with the other elements on your page? Is your headline font paired nicely with the body text? Ask yourself these questions and then make a final decision.
Theme & Intent
Before closing out this diatribe on Web/print fonts, let’s take a look at one more elemental factor of fonts: Does type affect intent? In some circumstances, yes. One common example is when a blogger or writer utilizes a ye’olde font to write about medieval times or a Puritan-inspired scrawl to advertise for an event on a brochure. People often scroll through the pre-loaded fonts on Microsoft Word and look for creative typefaces to catch a reader’s eye, though doing so may not always be the best idea.
Please, for the love of all things Internet, stray away from fancy fonts, small type, and ugly contrast. When in doubt, go with a pre-loaded font that is easy to read (i.e. Corbel or Myriad Pro), size it at 12 points, and add 140 percent line spacing. Pair it with a “fancier” font for titles and sub-heads if you want, but make sure you keep it consistent.
The team at Grammar Chic specializes in a variety of professional writing and editing services. For more information about how we can help you, visit www.grammarchic.net or call 803-831-7444. We also invite you to follow us on Twitter @GrammarChicInc for the latest in writing and editing tips and to give a “like” to our Facebook page. Text GRAMMARCHIC to 22828 for a special offer.
Amanda E. Clark founded Grammar Chic in 2008. She is a graduate of Eastern Michigan University and holds degrees in Journalism, Political Science, and English. She launched Grammar Chic after freelancing for several years while simultaneously leading marketing and advertising initiatives for several Fortune 500 companies.