One of the secret weapons that many graphic designers have is an eye for typography or “fonts” for the layman. Typography drives almost all of the good design you see. It drives EVERY great brand, think Coca Cola. That’s some strong type. Typography and web development however are not necessarily married even though they should be.
For the majority of the time the web has been active there have been painfully few typographical resources that work well on the web. For too long, the amount of web-ready typefaces have been limited to Arial, Courier New, Times New Roman, Georgia, Trebuchet and Verdana. If you wanted another font you had to make it an image and embed that into your code. This was not a great practice.
Over the last couple years technologies cropped up that used image or vector text replacement (like sIRF or Cufon) which gives the user a non-web font (limited fonts to choose but still more than six) and doesn’t compromise the SEO. The downside being load time and the dreaded “fobuc“. This method is still very popular today.
As HTML5 and CSS3 have been rolled out, browsers like Chrome and Firefox are looking at fonts differently. Google has rolled out a Web Fonts API and Directory with 190 families and growing, rapidly. This is a much better approach to web fonts than previously offered. Simply select your desired font or fonts and then use the provided link tag just like how you would a CSS file. You can use the font like any other web-safe font and it’s fair game for any and all CSS you can cook up. It’s also okey-dokey with commercial use. Check it out.
That’s all great but once you know the tech, you still need some theory. Here are some tips I follow when designing with type.
- Use no more than two type families for a brand.
- You will need a Headline/Title font, they tend to be more decorative.
- You will need a copy font, needs to be readable.
- The two fonts need to look good together (duh).
- Set your line-height to 150% for any copy that is not a title.
- Set you titles to 120% line-height.
- Both fonts should look good as white-on-black and black-on-white.
- Look at the negative space.
- LESS IS MORE, use bold sparingly.
Good fonts cost money and aren’t worth stealing. You can find a lot of free fonts (like here and here) but many aren’t worth a damn. Google’s web fonts are surprisingly tasteful and well built. You can also check out FontSquirrel and Fontex.
Make sure you read the licensing on every font you use, free or paid, before you release something public. Lawsuits are not fun, and ripping off a good typographer is not good.