As a small business owner, you may have taught yourself CSS and built a bunch of code into your WordPress or Drupal website. That’s just the nature of us business owners – we often have to teach ourselves how to get something done to save on overhead. Or maybe you haven’t yet found the time to learn CSS. Or maybe even code makes your eyes cross and you decided it was worth the cost to hire a web designer, especially since you have a college down the road with students scrambling for portfolio-building opportunities. Again, we small business owners can be quite innovative.
No matter your level of knowledge of CSS, there are a few elements that you need to know about making your website readable. If you can do code, then you can take the necessary steps on your own. If you can’t do code, simply work with your web guy or gal on your typography and website readability – they’ll know what to do.
The following are some of the most important elements to keep in mind when choosing typography for your website and incorporating text onto your site. Follow these pointers and you are sure to improve the ease of reading on your website and keep returning visitors happy.
Not Just Any Font Will Do
While that beautiful script font in your typography collection would look absolutely amazing as your header font, it may not translate well on the web. Not every font created can be seen on every browser, which is where web optimized fonts and @font-face generators for CSS3 come in. An @font-face generator, such as this free generator from Font Squirrel, allows you to plug in any font you own or that the designer has specified for use on the web, and it will generate the right CSS3 code for it. However, keep in mind that versions earlier than Internet Explorer 9 do not support @font-face. Also, IE9 only supports .eot fonts and only other versions such as Firefox, Chrome, and Safari support also .ttf and .otf fonts. See more about font formats and what is compatible in this article on the @font-face rule.
Thankfully there are a huge number of fonts that are optimized for the web available from a number of font websites, such as Google’s free Web Fonts collection. The fonts such as those that Google provides have been built specifically for the web, so you may want to search among web optimized fonts and see if you can find one that looks similar to your favorite font in your collection.
Big Typography is King
Too small of a font and your readers will give themselves eye strain squinting at your tiny size. Reading on the web is not as easy and natural for us as reading print. Therefore, you want to give readers every crutch they need to read through your content on your site. A large enough size is one easy way to really improve the readability of your site.
While 12 pt font size is all the rage for, say, a booklet for printing, a larger size is easier to read on the web. Of course, the actual size you choose depends on the font you use and whether it is a heading or body text. But for the most part, try for something larger than 12 pt font. You may find that time on site improves with a 16 pt font, or you may find out that a 14 pt font makes your readers happiest. Simply try each size out, test, and try again until you find that sweet spot.
Get Your Width and Height Right
The perfect line length and height is critical to ease of reading on the web. I have turned away from more than one website simply because the lines were way too long for me to skim the content, which is what most browsers do when reading on the web anyway. And even for those who read every word, too long of a line length or too much space between lines means that readers tire easily. With too short of a length and height with your text, readers will also tire quickly as their eyes jump back and forth from line to line too quickly.
To keep readers there long enough to read whatever message you mean for them to read, make sure your line length and line height are perfect. Again, this is where testing comes in handy. Look at some popular websites, copy their approximate line spacing, and test it on your website. Or use this formula. Gather data. Change the line length. Test and gather more data. Change again, test again. Repeat until you find the sweet spot. Then do the same for your line height. While it may take awhile, especially since you need sufficient time to gather enough data, eventually you will have the perfect line spacing for your specific font and readers.
photo credit: splorp via photopin cc
