Tackling TypographyFriday, March 23, 2012
What famous couple would you consider to be the greatest pairing of all time – Romeo and Juliet? Brad and Angelina? Or how about Helvetica and Garamond?
When the perfect typeface match is made, sparks fly. But how do you find the two typefaces that are destined for each other – and appropriate for your chamber website? In today’s post, I will share some typography best practices that can be applied to your chamber of commerce website.
When deciding on header/body combinations, pair serif typefaces with sans serif styles. Never use two serifs or two sans serifs together – opposites attract! I suggest you check out Design Shack’s guide to combining free typefaces from Google Web Fonts. If you already have one typeface in mind, check out this tried-and-true chart or Will Harris’ Typefaces That Work Together list to find your typeface a soul mate. Bonfx.com is another great resource for choosing typefaces, and they have even developed the Font Combination app.
Headline font size should be the largest and boldest on your website to encourage scanning, but be sure to avoid a large size difference between your two fonts. When the headline is significantly larger than body text, people often skip the smaller text.
Therefore, the suggested body text size is approximately 50% smaller than that of the headline. So when your headline size is in the recommended 18-24 point range, your body text should be at 12 points to encourage actual reading and the absorption of the material.
(If 12 point seems large, consider that 12 is the font size for most printed material and that the visual comfort of your visitor is a top priority.)
Did you know that adding white space between paragraphs increases comprehension by almost 20%? Here’s a quick guide to getting it right:
• Provide comfortable right and left margins.
• Use a line height that is 1.5 times the font size.
• Paragraphs should be no longer than 6 sentences.
• Keep spacing between paragraphs at 75% of line height.
• Use headings, subheads, and bulleted lists to provide variety in line length.
• Maintain high contrast between the font and background colors.
• Avoid a large visual break between the headline and body text, as this may prompt readers to ignore the bulk of your content. This means no underlining!
When it comes to writing your headlines, avoid the “up” style (the capitalization of every important word in a headline) as this reduces reading comprehension. Write your headlines as you would a sentence – capitalize the first word and leave the rest of the phrase lowercased. If you want a bolder look, use the “caps lock” style, as I do here at Jeff Kline Online.
The best way to avoid a lawsuit is to simply stay away from licensed typefaces. I strongly urge you to only download free fonts from trustworthy websites. The safest site by far is Google Web Fonts, which provides free Open Source fonts that you can share, customize, and use on your website.
But if you do decide to purchase the rights to a licensed typeface, you should first speak with an intellectual property (IP) lawyer. Better to be safe than sorry.
These are my team’s favorite free typeface websites:
• My Fonts
The style, size, layout, and typeface compatibility of your text are integral factors to the legibility of your chamber website. The goal of great typography is to support your content by providing a visually easy read. What typefaces have you found to be the best for your chamber website? If you have any typography tips or ideas, please leave a comment or send me an email!
Sign up for a FREE typography assessment from one of our digital strategists. Please fill out the form and we will get in touch with you!