In website design, even the smallest details matter. This is why you need to adopt the best typography practices to your website. Typography is a vital and often-overlooked aspect of advertisement that covers the smallest detail. It tends to have very subtle effects on a page, but when combined with other great visual design techniques, the result is a page that’s more attractive and more likely to inspire conversions!
We’ve put together a few comments on web typography best practices as they stand today.
Web Typography Best Practices For 2013 And Beyond!
1 – Serif vs Sans-Serif
There’s been a running argument in typography circles for centuries over whether serif fonts are better than sans-serif, and it’s unlikely to be resolved any time soon.
“Serif” simply means that there’s a small ‘tail’ at the end of every letter. These make a font look slightly more baroque, but studies have shown that serif fonts are easier for reading. On the other hand, sans-serif fonts look more “clean” and tend to stand out on a page.
A mix of the two is best, with sans-serif generally used for headings and serif for the copy. If you look at the layout of this blog, that’s how we handle it here.
2 – Font Choice
There are two main schools of thought here on the web typography best practices. One is to keep it simple, and use stock fonts. According to a recent survey of websites, Georgia and Arial are the two stock fonts most commonly seen online, and are safe choices for an unadventurous page.
However, it is actually more common to use a less-standard font, or even custom-created fonts. These give your website a unique ‘flavor,’ however care must be taken in their implementation. We recommend doing a few test pages or focus group work to see which fonts appeal to your users.
Above everything else, however, readability must be preserved. A hard-to-read font will only drive people away.
3 – Color Contrasts
For awhile during the 90s and 2000s, it was distressingly common for websites to have a dark background with light text on top of it. While this does create plenty of contrast, studies have shown that it tends to become wearying on the eyes. There’s also an issue of having an afterimage “stuck” on your eyes from staring at white-on-black text too long.
Generally, a light background with dark text on top seems to present the best balance between readability, contrast, and attractiveness. Consider using a very light color, like pale yellow, rather than straight white. Or, use a slightly different light color to differentiate sidebar elements without a thick line around them, as we do with our “About” section to the right of this blog.
4 – Font Sizing
Font sizes make profound differences in the layout of your webpage, affecting everything from its vertical length to the number of characters on a line.
Generally, fonts in the range of 12-16px are standard for content, and show up well on most displays. If you’re implementing Responsive web design, consider having the font scale up somewhat as the device gets smaller.
Headlines should always be significantly larger than body text. 2.5x is a good rule of thumb, but layout is ultimately more important than size. First and foremost, pick a size that makes your headline look good, then worry about the ratio between it and your body copy later.
Web Typography Best Practices Matter
While these may seem like minor details, the overall impact they can have on your site is enormous. And, of course, be ready to keep updating your site as new ideas come about on this ever-changing Internet!