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.
The @font-face CSS method is another viable option for custom fonts. By calling a font from your server you can implement it via CSS3. the down side is that you are constrained to open-source fonts allows for web use in their licensing. Also, it’s hard to find a font in all the formats needed to be cross-browser compatible and still carries the aforementioned licensing. You’ll need to do your research before implementing this method. The upside is that the load time is super fast and there’s no javascript or flash needed to run it, only CSS and the “trusty” browser. Sixrevisions has a good post about it here.
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.
Great resources! I’ve used Fontsquirrel quite a bit, but even with them you have to read the licenses as a font simply being posted to that site is by no means a guarantee. I’ve noticed a few on there that are “free,” but not “free to use however you like” as many seem to automatically assume. Also, just because you’ve seen a font used in a flyer, ad, website or any other project does not necessarily mean that person is using it correctly. Like you said, always check the licenses. Personal projects often aren’t as big of a deal, but if the project you’re using a particular font on is directly making you money or part of your branding (i.e. logo), DOUBLE check.