Have you ever read hard-hitting news written in Comic Sans?
…Yeah neither have we. If you’re not a web designer, font probably isn’t something you notice all that often. In school, many of us were taught to type essays in Times New Roman, and may have just stuck with that out of apathy. However, the secret that designers and increasingly marketers know is that font can dramatically shape your brand’s impression among your website users.
Indeed, the shape of your copy and visual relationship of its letters are critical. They suggest who you are and what you’re selling (Times might work great for, say, CNN, but it would be too formal for Forever 21). If you’re not quite convinced, or if you just need a refresher on how to effectively use font, consider these tips.
Set your brand’s tone
When it comes to branding, first impressions are huge. Before anyone actually reads the content on your website, the user will form an opinion of how it looks. Obviously, there are many factors that go into good web design, but perhaps more than any other element, font communicates tone (professional, modern, playful, etc.). You want to set the right tone as soon as the page loads, so that a new visitor knows what to expect from your brand, and a returning one gets what she came for.
Establish visual hierarchy
A clump of text is unappealing and hard to read, especially when people probably just want to scan your content. To make your words readable, create a headline that’s separate from the body copy, and make sure their typefaces are different. This will help the eye move through the copy. However, while the fonts shouldn’t be identical, they should compliment each other. Failing to make them agreeable will disorient the reader, similar to how vertical and horizontal stripes in an outfit can be off-putting.
Form vs. function: which do you choose?
Using stylized fonts may earn you points among other designers, but it doesn’t do any favors for the average user looking for information about your business (unless your audience consists of other designers). That’s not to say that you should pick boring typefaces; show some originality! But always ask yourself, “Is this easy on my eyes?”
It’s a good idea to familiarize yourself with Serif or Sans-Serif fonts. Serif fonts have a more classic style and have little hooks or feet at the edges of letters, numbers and symbols. However, for your web copy, you probably want to use Sans-Serif fonts like Verdana or Arial, which render more easily on computer screens.
Font size doesn’t matter (as much as you think)
Your site probably shouldn’t use more than two types of font; more than that will be distracting. As you peruse your possible combinations, don’t get caught up on their size. Sure, generally 12-14 point font is ideal, but not all typefaces are created equal. That is, 12-point Helvetica doesn’t look the same as 12-point Arial. Instead, as this article points out, focus on the x height. Not familiar with the term? It’s the space between the baseline of a letter, the top of a lower-case x, and the middle range of other lower case letters.
If you’re considering two fonts, compare their x heights. Typically, a bigger x height means easier readability, so aim for a happy medium of larger type and similar letter sizing. See the Typography tips over here.
Make your content readable
As we mentioned, you want your content to be easily readable. Are the words and blocks of text on the web page arranged in a clean, easy-to-digest format? Will a user intuitively know where to follow the text? However, don’t confuse readability with legibility, which is a slightly more technical term that covers the actual shape of each character, and how it works with other characters to create a word.
But both terms comprise the more technical aspects of font design. Font size and line spacing, for example, will affect both read and legibility. You don’t want your lines stacked right on top of each other. Instead, shoot for an eye-pleasing amount of white space between lines, while keeping each one between 50-75 characters long.
A general rule of thumb in design these days is to make sites responsive, or mobile-friendly. Depending on the industry, most users will expect to easily access your site on their phones. Not making the site responsive will result in text and images that may render poorly on a mobile device. Of course, this means your carefully selected fonts may look cluttered and hard to read.
Luckily, you don’t necessarily have to be a web designer to know how fonts will look on mobile. Subscription-based services like Typekit and Google Fonts allow you to not just access a huge collection of fonts, but they’ll play well across all of your web properties, and render correctly on different browsers and devices.
For more about how font can improve your website, check out SPINX’s design services.
Latest posts by Sukesh Jakharia (see all)
- How to Use and Customize EverWeb - December 7, 2015
- Commonly Made Sidebar Mistakes and How to Correct Them - November 24, 2015
- How to Design Functional Menus - November 18, 2015