The functionality of your website is key to audience engagement and conversion. Design complements the functionality. Website fonts are a critical element in your design and user experience.
Jeffrey Zeldman, one of the top ‘go to’ authors and early advocates
of standards-based web design states:
“We’re in an attention war. The battleground is mobile, 4.7 inches tall, 2.64 inches wide. Businesses scrap over it. Buy it. Sell it. Trade it. Attention is fuel. Light. Inattention is death by tumbleweed. But full attention is a reading experience, not an aesthetic one. The web is not an art gallery, it’s a newsstand chock full of brand stories dying to be read. Google decides the tales worth telling…”
Understand the basics of website fonts
Typeface: A collection of letterforms. For example, Helvetica is a typeface. The Helvetica typeface has regular, bold, italic and bold italic weights and is available in many different sizes, but they’re all the Helvetica typeface. Same family.
Fonts: Each typeface (family) is comprised of individual units. i.e. Helvetica Bold 20 point. So the font is the actual unit of the typeface with a weight and size to identify it You’ll want to know how to choose a typeface that speaks clearly to your business so let’s get to the essentials.
5 Key essentials to consider
- Your ideal ‘character’: what age group? What gender? Traditional, contemporary, formal or casual?
- Your message: Your content will influence your typeface. Pick an appropriate font for the majority of what you will be communicating. i.e. technical manual would differ from a black-tie event.
- Your voice: What tone will resonate with your audience? Formal or causal? Do you want your material to be upscale and high end or friendly, down to earth?
- Delivery method: Web or print? Or both? How will it be reproduced? High end printing press or photocopied? Choose a typeface for the majority of your communication.
- What to Avoid: The first job of any font is make your words readable. Period! Avoid the trap of quirky, trendy fonts that may look interesting but slow down reading.
OK, so what website fonts are best?
There are thousands of fonts available. Many are free for web and print use. Make your words speak clearly to your readers and choose READABLE fonts to express your brand’s personality. Fonts are for reading, mainly and and with few exceptions – not design elements. I’ve intentionally resisted overwhelming you with a ton of technical font theory information on the details behind x-heights for font selection.
It’s enough for you to know this for now…
Keep in mind… In general, large x-height fonts are more readable and user friendly for websites.
How to get started…
You only need TWO fonts for your website: One for headlines and one for body content. Keeping in mind the 5 Key Essentials to Consider, pick two fonts for your website now. You may want to add a 3rd font for display sections of your website.
Paid Fonts: Typekit is owned by Adobe, and has a vast collection of very high-quality fonts by some of the top foundries and type designers. It’s a paid service, and works flawlessly once you get it set up. Worth a look if your budget allows it.
Free Fonts: Many of the free Google fonts are fine for most applications. At last count they offered over 800 fonts. I’ve found this a great resource for selecting website fonts proven to work well together: http://fontpair.co/
Get visual with this free online tool to see exactly what your combinations will look like on your website. For example you can reduce your screen width to view what a blog post would look like with your Headline (H1), Sub-Headline (H2) and body content sizes input. http://font-combinator.com/
Sizes will vary depending on the fonts you choose. Simply click on the area you want to size. ie. headline or body. You’ll get the hang of it quickly.
Starting point for sizes:
Headlines: 38 to 48 points
Subheadlines: 28 to 36 points
Body: 18 to 22 points
Blog post widths: 50-75 characters
Line height: 1.5 to 1.9
Check the width of your particular WordPress theme to get the actual post width in pixels. 650 px to 750 px is the suggested optimum. I’ll add a more in-depth article on the ideal formats for perfect blog posts in a later guide. Watch for it soon.
Additional resources for website fonts
Often using a combination of Serif and Sans-Serif fonts works well.
Choosing the right combination may be a challenge. Excellent resource: Jeremiah Shoaf – highly recognized authority on typeface and design: www.typewolf.com
His guide includes the Top Ten combinations from Google Free Fonts and it’s a quick way to get you started. Try some of his suggestions in the online tool. (above)
Have fun and write down the fonts you choose for your website’s ideal customer that also resonate with your message. Pick for readability and keep them consistent across all your marketing material for easy brand recognition.
Talk to you soon,