Webfonts have been booming for the last 2-3 years; it’s no wonder since they revolutionized the web design world. Web designers are no longer stuck with only Arial, Verdana, Times New Roman and Georgia to choose from; thanks to Webfont directories such as Google Webfonts, FontSquirrel, Typekit and Fonts.com, web developers have access to thousands of typefaces.
With so many choices, it’s not surprising some people get carried away and pick not only questionable combinations, but also fonts which are not always ideal for reading. Picking a good typeface is no less important than writing proper HTML and CSS or creating a smart and beautiful web design. Typography is an art and the typeface you choose will have an impact on the overall appearance, appeal and legibility of your website and its content.
Here is a list of commonly seen webfont mistakes which you must avoid at all costs:
Picking a font that is available only in one style
Typefaces which exist in only one style are fine for headings and titles but when it comes to your main text, you will want to choose a font which is available at least in Regular, Italic, Bold and Bold Italic. That is especially true if you have a blog. Boldness and italics are used to emphasize important parts of your text and they also help organize your content; articles or pages without them can look pretty dull and they can be hard to read.
On Google Webfonts, all typefaces display the amount of available styles below the preview. Failing to choose a font which is available in bold and italics and using <strong> and <em> tags nonetheless will result in faux-italics and faux-bold generated by the browser, which both look pretty awful. This leads us to the next most common mistake…
Using faux-bold and faux-italic
If you use a service like Google Webfonts, you won’t encounter any problem (the exception being on IE7 and IE8, an issue which is addressed in detail at Smashing Mag) unless you forget to check the styles you want before copying the line of code that will serve to embed the font to your website. However if you use self-hosted font-face kits like the ones found on FontSquirrel, you will want to define what is bold and what is italic to avoid faux-bold and faux-italic. Here’s an example of faux-bold and faux-italic with the font Delicious:
The easy solution to this problem is to go to the CSS file that contains the @font-face property and define font-weight and font-style for each style (regular, bold, italic, bold-italic), as it is shown in this useful article written by Scott Vandehey. This way, <strong> and <em> will call the righteous styles, eliminating browser-generated ugly faux-styles.
Main text smaller than 14 pixels
There is much debate about what is the ideal font-size, but one thing is certain; anything below 14 pixels in terms of font-size for the main text can easily transform into torture for your readers. Gone is the era of 800×600 pixels screen resolutions; while 12 pixels can look nice on a smaller screen, web designers must have consideration for desktop and laptop users as well.
How would you feel if I forced you to read over 500 words in this size? Many readers would prefer to simply leave the site, and I cannot blame them.
See what I mean? Unfortunately, I keep seeing websites that use tiny writing. They call it stylish. I call it inconsiderate.
According to W3 statistics, over 85% of visitors use a resolution bigger than 1024×768 pixels. So adjust your font-size dear designers if you do not want to lose visitors over something as silly as poor legibility.
Disregarding legibility
Disregarding legibility is in my humble opinion the grandest of all mistakes a web designer can do; a website is a holder for content, and web design is the art of presenting such content in an equally efficient and attractive manner. If the content of a website is near impossible to read, there is no point in building a site in the first place. Here is an example legibility issue:
Lobster Two is a great typeface but it is not suited for main text. It is much too stylized to be the default font. Imagine if I wrote all my articles like that? Yikes!
At 24 pixels, Lobster Two looks really good though.
Keep unorthodox typefaces for headings (assuming they are legible in bigger sizes) and pick a font based on its available styles and legibility rather than its originality alone. You will still have hundreds of nice font-families to choose from; I am certain that a least a handful of them will match the mood of the website you are building, even if it is on the unconventional side.