Text is the lifeblood of the web. And when you choose an inferior web font to display it, your project is going to bleed all over the cyber-verse. To keep your projects from hemorrhaging unnecessarily, ensuring that your web font, CSS and html are up to the task is critical.

All fonts are definitely not created equal, and depending upon how they are used, some can even be downright problematic. To top it off, as designers & developers, we love pushing the limits, frequently making our tools beg for mercy.

Using simple, reproducible steps, in this session you will learn to identify fonts that can be troublesome, so that you can ensure that your most demanding needs are met.

You’ll also learn some common sense ways to identify and eradicate problematic code that just might be giving your text show more than a few blemishes.

Notes:

The web can be a really ugly place – but, it doesn’t have to be.

How to prevent suckage

The font is the voice of your site.

• Define your audience
• Use real web fonts
• Examine your font carefully
• Implement it properly
• Test the features

Examine your fonts for quality

• Kerning (letter spacing)
• Overshoot (changes in letter height to make all seem the same size)
• Stroke interactions
• Hinting (Windows only. changes strokes at different font sizes)

Best practices

• 12-14px body font
• 55-75 character length per line