You probably don't, but we obsess about things like fonts and colors. Fonts and colors are key, subliminal methods of communicating a message. Want proof? One of our designers sent me this great, short video showing how your message can go awry by using the wrong font.
The new ANR Visual Identity system uses a set of recommended fonts and feedback from some users prompted this post.
But first, some breaking news about the Toolkit - related to this post:
The PowerPoint templates for both the posters and the slide presentations contained a major glitch in the font formatting settings that was driving many users to distraction. We've remedied the problem and uploaded new templates to the Toolkit. So if you are using templates downloaded before yesterday, you'll be happier if you download new templates from the site.
Now that that's out of the way, and speaking of fonts . . .
In the Toolkit site you'll find this information:
"The official font families associated with the Visual Identity system are Minion Pro (serif) and Cronos Pro (sans serif). Acceptable substitutes are Times New Roman (serif) in place of Minion Pro and Verdana (sans serif) in place of Cronos Pro."
Now some of you are scratching your heads about this business of serif and sans serif. For those of us graphic geeks who find this sort of thing interesting - these two characteristics of fonts have a background in typographic history.
And people get worked up about fonts, really they do.Serifs are the non-structural lines and curves on the tops and bottoms of letters. A font that sports these features, like Times New Roman, is called a serif font. Fonts like Ariel, without these marks, are called sans-serif fonts.
Now that you've got that under your belt, you can easily see (Or can you? This image is pretty blurry), that Minion Pro and Times New Roman are sporting serifs, while Cronos Pro and Verdana are not.
And here they are in use in the Visual Identity:
In Web design, a common practice is to use a serif font for headlines, and a sans-serif font for text.
In a post quite a while back I addressed some issues relating to fonts. Over the weekend I watched an interesting documentary about the font Helvetica. (Yes, I am PBS-watching documentary-loving geek.)
Helvetica is either the greatest font ever designed - a marvel of simplicity and readability, or a plague of ubiquitous mediocrity. For communicators, the film is an insightful look into the power of a type face. It can be seen on the program Independent Lens on PBS and is also available through iTunes.
And the NPR program On The Media featured an update on the use of federal stimulus funds to bridge the digital divide(s).
This news segment is 6 minutes in length.
While you're given a tool in Site Builder to present text in italics, italics should be used judiciously on the Web. This is another area where print differs greatly from the Web.
Italics are difficult to read on a screen.
My advice is to save italics for scientific names, book titles, and the like. Don't use italics for emphasis.
Finally, it is now generally accepted that blinking, scrolling, animations, or any other moving text is annoying to 99% of your visitors.
If you know how to do this - please stop.
One of the easiest mistakes to make in designing Web pages, or printed pieces for that matter, is using a lot of fonts thinking that they are design elements. Now don't get me wrong, in the right hands, fonts can be used as design elements, but this is best left to designers. For most of us, the role of fonts is to make your words easily read and understood.
There is a lot of study and debate about fonts (really!)
On the Web, best practices are somewhat different than for printed pieces. This is primarily because good Web writing is in short, concise paragraphs with space (also called leading) between them.
A good rule of thumb is to choose no more than two or three fonts and stick with those throughout your Web site. Choose one font that you will use for headlines, and another that will be used for the body of the text. Save the third font for text you want to draw attention to - sort of like putting on a cocktail dress or a tuxedo - save it for situations where you want to be noticed.
Visitors to your Web site use this consistency of fonts (and color) as a guidepost to let them know they're still on the same Web site. If one of your program pages suddenly shifts fonts and color schemes, visitors think they've left your site and have mysteriously arrived someplace else.
To Serif or Not to Serif?
Serifs are the non-structural lines and curves on the tops and bottoms of letters. A font that sports these features, like Times New Roman, is called a serif font. Fonts like Ariel, without these marks, are called sans-serif fonts.
In print, it is generally thought that large blocks of text are more easily readable in a serif font because the serif helps the eye move from letter to letter. But on the Web, you're not writing in large blocks of text, right? On the Web, the use of serif vs. non-serif fonts is really a matter of taste.
In Web design, a common practice is to use a serif font for headlines, and a sans-serif font for text. Maybe this is the Google effect?
IT IS GENERALLY AGREED THAT ALL CAPS IS DIFFICULT TO READ. And to make matters worse, the use of all caps in e-mails and on the Web is generally thought to be the same thing as shouting.
Likewise, decorative fonts are difficult to read, so use them with caution and only as design elements.
Ragged Right, Ragged Left
"Ragged left" text is generally considered to lower comprehension rates. Use this alignment with extreme caution.
Likewise, centered text should be used with caution.
Centered text is also difficult to read and comprehend. It should be saved for headlines and wedding invitations.
"Ragged right" text is easiest to read. The bulk of this blog is in ragged right text.
I want to talk about color at length in a later posting - but as it relates to text, it's simple: Black on white is easiest to read.
If you must use color, choose a dark shade. The higher the contrast between the text and the background the better. Few things are harder to read than yellow text on white. Red and green are also surprisingly difficult to read. (Sorry 4-H, it's true) If you're choosing to use color - test! test! test!