Remember how obsessive I am about my fonts? While I love my trusty “Fonts” document, it can be a PITA to constantly keep it updated.

Today I read about MyFontbook – a FREE font viewer that organizes all your fonts (all 700+ of them in my case) in an easy-to-use web interface.

What makes MyFontbook extra-useful are its additional features:

• Tags & Favorites
• Glyphs Viewer (!!!)
• Font Metrics

Go sign up for a free account now!

In the midst of developing three separate websites, I have been reading and bookmarking some useful sources for developers, designers, and bloggers. Here are six I’ve found myself returning to again and again during the past two weeks:

1. 8 Definitive Web Font Stacks
2. How to Embed Almost Anything in your Website
3. 5 Exciting Things to Look Forward to in HTML 5
4. 50 Resources for Getting the Most Out of Google Analytics
5. 10 Killer WordPress Hacks
6. 5 Techniques to Acquaint You With CSS 3

I hope you find them as useful as I do – enjoy!

In my last post, I talked about the power of a typeface and the impact it can have on your audience.

Today, I will discuss the role and proper usage of fonts in web design.

Let’s start with the basics. Fonts can be divided into two categories: serif and sans serif. To put it simply, serif fonts have little tails at each character’s points, while sans serif fonts do not have these extra marks (“sans” is the French word for “without”).

Here, you can see a serif font (Georgia) next to a sans serif font (Verdana):

Believe it or not, there has been much research and debate on the two type categories, but the general consensus seems to indicate:

1. When viewing the document on-screen, sans serif fonts are easier to read (especially in small sizes) due to the effects of anti-aliasing.
2. When viewing the document in print, serif fonts are better.
3. Serif fonts are preferred in large formats (print and online) or when emphasizing text because it visually breaks apart each character.

While I wholeheartedly agree with all three points, there’s a fourth I’d like to add, a point from my perspective:

4. Serif fonts tend to “look” more serious

So what does this mean?

If you want your content to have a serious, business-like tone, set it in a serif font…but make sure the type is large enough to read easily.

Many designers would scoff at this advice, as we are taught never to use serif fonts for the main copy of a website. However, in my personal opinion, serif fonts can have a great impact when used correctly.

Now, let’s move on to the use of fonts in web design.

I have a love-hate relationship with fonts when designing a web page because there are so many fonts I would love to use (and I would have a glorious time choosing each one!)…but I’m restricted by the rules garnering web-safe fonts. This means that if the user does not have that particular font installed on their computer, they will only see the text in the default font set by the web browser.

You can see the (sadly) short list of web-safe fonts here.

There are three primary ways to work around this problem.

The first: convert your text into images. See the “Geek in Heels” at the top of this page? The font I used is an obscure type that most viewers would not have on their computers…so I’ve converted it into an image.

The downside to this method is obvious: while this can be useful when creating headers, menus and such, it just isn’t practical for large copies of text. Or with site with dynamic content. Or content that is frequently updated, such as a blog.

The second method is to embed the typeface within the document via PDF or Flash. With either formats, the typeface is loaded with the document so the visual rendering of the font is not lost. However, this method can also be impractical for the same reasons as the first.

The third method isn’t so much of a solution as it is a workaround via the use of font family stacks in CSS.

Here is an example of font stacking in CSS:

font-family: StoneInformal, Palatino Linotype, Book Antiqua, Palatino, serif;

This gives the browser an order in which the fonts should be displayed. In other words, the browser will first check to see if the user’s computer has StoneInformal installed. If not, it will then go onto Palatino Linotype, then Book Antiqua, etc.

By stacking the fonts with similar-looking fonts that are more common, you can at least guarantee that what the user sees bears some resemblance to what you intended.

That’s it for my tutorial on fonts and how to use them in web design. I tried my best to KISS (keep it simple, stupid) but I’m sure I got a bit carried away as this is a topic I find fascinating. Please let me know if you have any questions or comments!

This week’s NYTimes had an interesting OpEd titled To the Letter Born, discussing the impact that branding, especially the typeface Gotham, may have on Barack Obama’s campaign for the presidency.

For this piece, Stephen Heller interviews a branding expert named Brian Collins who explains:

…there’s an oxymoronic quality to Gotham, which is why I think it’s become so popular. It has a blunt, geometric simplicity, which usually makes words feel cold and analytical (like Univers), but it also feels warm. It’s substantial yet friendly. Up-to-date yet familiar. That’s a tough hat trick.

Collins goes on to display the word “Change” in three different typefaces:

Put the word “change” in Comic Sans and the idea feels lightweight and silly. Place it in Times Roman and it feels self-important. In Gotham, it feels just right. Inspiring, not threatening. In the end, typography makes a real difference when it delivers words and ideas that are relevant to people.

This piece naturally intrigued my designer self for two reasons. The first was due to my job: one of my main responsibilities during the first year of my current position was to implement the company’s new, updated logo and carry out the branding and stylistic guidance associated with it. Thus I am quite familiar with the power of branding and the importance of a consistent typeface.

The second reason is because I’m a font freak.

I love the power and impact of typefaces. I love how different fonts evoke certain moods. I relish the visual impact they have on marketing. I am a lover of written words and to me, a typeface that matches the mood of the message brings the final polish and an extra finesse that cannot be conjured by words alone.

Naturally I have many, many different fonts on my computer and I treasure each and every one of them. I even typed them all out for easy viewing…here is page 1 of 6:

(Yes, you don’t have to tell me…I do have OCD tendencies and this is a prime example.)

Whenever I have a design project on hand I pour over these pages in search for the perfect font. My obsession with fonts has come to a point where I can identify certain typefaces used in advertisements, signs, etc.

However, this obsession does have its drawbacks if you are a web designer. In my next post, I will talk about using fonts for your website: the two main categories of fonts; choosing the best font for your needs; and the limitations on web-based fonts, and the best ways to get around this problem.