I’ve found that many clients, friends, and people in general (outside of the web development profession) are unaware of the limitations of typography on the web. Type plays an essential role in many types of design, and must be given careful consideration. On the web it’s especially important because it plays such a big role. There are many things to consider and many limitations that people must be aware of when designing, editing, or maintaining a website. I’ve put together a small starting-out guide to help people understand some basics and be more informed on what is and isn’t possible with website typography.

The Lingo

There are a few basics to review before going into any kind of depth about type. As many of you already know, there are 2 different types of fonts, serif and sans serif.

Serif fonts have serifs or extra decorations/embellishments at the end of each stroke. Sans serif fonts are smooth with no serifs.

Fonts can be measured in multiple ways online, but ems and pixels (ps) are most popular. Ems give you more control as you aren’t restricted to whole numbers like with pixels, so you can designate your text to be 1.2em.

Web Safe Fonts

A big thing that people aren’t familiar with is that not all fonts are available for use on the web. Typically, fonts for a website are designated in a CSS Stylesheet and those fonts are rendered according to what’s on each user’s computer. If a user doesn’t have a certain font, it should degrade to something else that is similar (which should be designated in the stylesheet) but if there isn’t anything to fall back on, your browser picks something that your computer does have and often times it’s not pretty and changes the look of the whole site.

How do you ensure that you’re picking something that everyone has? There are a group of web safe (also know as web standard) fonts that you can choose from. The list is limited because not everyone has the same fonts unfortunately. Mac and PC computers have a slightly different list of standard fonts that come with each computer. The list varies in different sources but some good options available are: Arial, Helvetica, Times New Roman, Trebuchet MS, Georgia, Verdana and Tahoma. Sticking with this list still gives you some options and variations but most importantly it ensures that your website looks the same across all browsers and all computers.

More Options

As I mentioned before, the standard way to designate fonts for your website is in the CSS Stylesheet. However, more options are becoming available which allow you to include more fun fonts.

CSS3, the newest specifications for determining styles on the web, includes new font capabilities. @font-face allows you to embed any TrueType or OpenType font that you own. I’ve found it to be a little buggy, and it doesn’t work in all browsers, but the option is available.

Cufon is a font replacement tool that allows most any font to be used in your site. It creates real, actual text which is perfect for search engines, however users cannot select the text, which many consider to be a downside. It is my favorite method for displaying non-standard fonts on a site.

Flash vs. text

Many clients love flash and request it for their website. The major problem with flash is that it’s not SEO-friendly. Search engines can’t see the text in flash websites and therefore can’t use it for rankings. Text is one of the most important things that help your rankings and if search engines can’t see your text, then your rankings are being affected by it. Use real text whenever possible, especially for important things like body copy, headlines and navigations.

I hope this helps those that are unfamiliar with the web understand more about what is possible with typography. There are tons of possibilities but the limitations must be considered in order to appropriately plan for your website and make it as accessible as possible for your users.

Additional Notes

Just found out that Google announced Google Fonts, a service that will allow web developers to call in fonts that Google has purchased and made available to the public. Check out more information here.

Also, I wrote a blog post for Six Revisions on typography earlier this year, chock full of more in depth typography information. Check out the post here.