Four Deadly Sins that drive visitors away
Sin #2. Wrong font sizes
If the visitor has to strain to read your text because the font size is too small, they won’t bother, no matter how riveting your copy is. It’s just too tiring on their eyes and comprehension is poor.
On the other hand, if they’re confronted by large, blazing type across their screens, it becomes too hard to take it all in and make sense of it. They almost need to be in the next room to see it comfortably.
Important point: Your browser cannot render fonts that are NOT on your hard drive. It's the same for your visitors. So if you specify unusual fonts that are not likely to be used by your visitors on their hard drives, they will NOT see your pages as you intend.
How to fix it:
- Check out sites that are really well designed, by professionals (it’s usually not hard to tell).
- Compare the font sizes used. The text is usually in 12 to 16 pt (px), depending on the individual font used. That seems to be the comfortable range for the vast majority of visitors. [This is 14 pt Tahoma.] WordPress® has set the default size on its popular Twenty-Ten Theme at 16 px/pt.
This is Georgia 10 pt/px
This is Times Roman 10 pt/px
This is Arial 10 pt/px
This is Tahoma 10 pt/px
This is Georgia 11 pt/px
This is Times Roman 11 pt/px
This is Arial 11 pt/px
This is Tahoma 11 pt/px
This is Georgia 12 pt/px
This is Times Roman12 pt/px
This is Arial 12 pt/px
This is Tahoma 12 pt/px
This is Georgia 13 pt/px
This is Times Roman 13 pt/px
This is Arial 13 pt/px
This is Tahoma 13 pt/px
This is Georgia 14 pt/px
This is Times Roman 14 pt/px
This is Arial 14 pt/px
This is Tahoma 14 pt/px
- Font sizes 18 through 36 pt (px) are best for headings and subheadings (sizes 4-7). Bold face is usually preferred.
This is Georgia 18 pt/px
This is Times Roman 18 pt/px
This is Arial 18 pt/px
This is Tahoma 18 pt/px
This is Georgia 24 pt/px
This is Times Roman 24 pt/px
This is Arial 24 pt/px
This is Tahoma 24 pt/px
This is Georgia 30 pt/px
This is Times Roman 30 pt/px
This is Arial 30 pt/px
This is Tahoma 30 pt/px
This is Georgia 36 pt/px
This is Times Roman 36 pt/px
This is Arial 36 pt/px
This is Tahoma 36 pt/px- Depending on the individual font used, font sizes 1 and 2 (9pt/px and 10pt/px) are okay for fine print that has to be there, but isn’t vital to your message. As a rule, size 1 is difficult to read on screen.
This is Georgia 9 pt/px
This is Times Roman 9 pt/px
This is Arial 9 pt/px
This is Tahoma 9 pt/px
- Bear in mind, always, the fact that Microsoft prefers its own fonts, especially in Internet Explorer. Even on Macs. They've become the web default fonts.
- These Microsoft fonts include Arial, Verdana, Georgia, Times Roman, Tahoma, Trebuchet, Webdings and Comic Sans. If you choose to specify these fonts, be aware that anyone using other browsers, especially on a Mac, may not see your type as you intended it to be seen.
- This can create some unintentionally ugly results, especially if you’re designing on a Macintosh (an estimated 60% or more of all professionally designed web content is created on Macs, despite the majority of viewers using Windows-based PCs).
The only real solution is to check your pages in as many browsers as possible, including Internet Explorer, Mozilla Firefox, Opera, Safari, Google Chrome, etc.Another option…
Google webfonts are a great alternative — these are open source fonts (FREE) offered by Google online that everyone can easily access. Because they're stored on Google's servers, it doesn't matter whether viewers have the fonts on their hard drives or not. Learn more at http://code.google.com/apis/webfonts/. (View the Google Web Fonts library.)
You can download the fonts to your own hard drive if you wish, but for others to access them on your web site, you need to use the Google webfonts API (using a Cascading Style Sheet).
Don't be intimidated by these techie terms: they're simple to use and CSS is absolutely the easiest way to control — and change — the appearance of any element of your web pages. By changing your CSS you can change every page on your site, automatically. Search for Cascading Style Sheet tutorials online.
Next… Deadly Sin No. 3 — All Capitals