One of the geeky aspects of being a graphic designer is memorizing fonts. It’s not easy, but after years of designing, all the fonts just seep into your head like osmosis. Then you’ll be criticizing every website you visit, saying, “Why did they use Copperplate as a header title?!” or “Is that the font from Star Wars?”

There are a few rules and regulations when deciding how and when to use certain fonts within your website. To start, the basics of typography. There are two types of fonts: serif and sans serif. Serif fonts have the little anvils and feet at the top and bottom of the letters. These are called serifs. Now guess what “sans serif” means. (dot dot dot) It means “without serifs” in Latin or something. Serif fonts are usually considered formal and traditional, while san serifs are more informal and evoke a younger, more relaxed feel. Refer to the pic above that maps out the general anatomy of the written word.

An excellent resource about designing with type and seeing the effects of typography is the recent 2007 film “Helvetica”. It focuses on the bombardment of fonts, namely Helvetica, that are used in marketing and advertising that we see constantly, walking in the streets, on TV, at home even. It’s like a single typographical revolution. Check out the trailer here: Youtube Helvetica Movie

Next, I’ll shoot a few general pointers to follow that every graphic designer should know.

One: when writing either the headings or body text of your site, try to stray away from overused and easily recognizable fonts. Ones that are used as defaults, such as Times New Roman, or ones that people see all the time, like Comic Sans. There are fonts that are used all the time, like Helvetica, but they are so de-stylized and generic that they’ve become acceptable and even preferable.

Two: you don’t want to overcompensate lack of design with heavy use of font. No super stylized fonts like Papyrus or Herculanum. And don’t force your design into shape with fonts that give off a specific feel, like the stone mason’s Copperplate for a cute fashion boutique, or a typewriter’s Courier for a professional doctor’s office. Just like when choosing a background texture to accentuate your sites design, choosing certain fonts also reflect and portray the personality of your website.

Three: avoid using what I call public fonts, highly stylized and advertised fonts from movies and company branding, like Star Wars, Disney or Ford. People will probably think you’re way too fond of trucks and are too lazy to think up your own font scheme. Note: I’m not saying that you can’t use these fonts, but everything must dwell within the realm of good design. If your website is about ancient Egyptians, by all means use Papyrus, or if you're designing a fan club page for Star Wars, what better font is there to use. Typography is an essential part of design. You want viewers to go to your site, read what you have to say. So make it enjoyable for them and design with type in mind.

Four: there is a limit to the number of fonts you can use within one design, and that is usually about three or four, max. A BIG rule of design is to keep things consistent. Use the same fonts for headings, for certain sections of text, and for any element that is repeated, like buttons. Example: Title in Gill sans, headings in Didot, text in Arial. (Tip: it’s good to use a serif font for headings and a sans serif for body text. This creates hierarchy in the design, allows the eye to flow across the page, and utilizes subtle contrast between the levels of type.)

So, if you can’t decide on what font to choose, always go with Helvetica. And I’d like to say that these are only general rules. Good web design is not completely about making the Internet pretty, it’s also about being clever. If you find a way to break out of the box and create massively awesome design, then there will be no one to stop you.