Typing Type | The Font War for Bloggers

fonts-1From 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.

Advertisements

2 Comments

Filed under Blog Writing

2 responses to “Typing Type | The Font War for Bloggers

  1. Fascinating – I wish every blogger out there who is using a black background with yellow type would read this – ditto for those whose type is far too small or those who write reams of text and next even take a paragraph break – hard to imagine anyone but their mom ever reads their blog. Thanks for this post.

  2. Some serious food for thought! It’s so easy to get “fancy” at the expense of readability. This is a great primer for anyone considering creating or overhauling their blog.

    Oh, and “(see: books)” and “Size matters, even if you claim to know how to use it” are priceless! ;)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s