08 WEB FONT FUTILITY: LoBand Type Compromises for Readability, Speed, and SEO

Before I jumped from print to web design, I had amassed "tons of fonts" and type families—30,000+ all archived on CDROM. I categorized and loaded 1,000 fonts on my computer. I even had "font recognition" software (FontExpert V2.) to reverse engineer type. Imagine how stunned I was to learn all that type was essentially useless for HTML coding.

Typocide: The Web Murdered My Typography
First, I mourned my typographic loss. Then I was angry. How stupid could the web be!? I was forced to build my headlines and subheads as GIF files. It just seemed so stone age and primeval. I'd been crippled by the pixel medium. Small serifs became fuzzy and unreadable and GIF files slowed down page load times. Double insult!

CSS Comfort for the Sad Designer
Now, after building web-type for years with ImageReady, I wonder, "Was it really worth the extra effort? How did it improve results? How good was good enough?" Cascading Style Sheets introduced more control over HTML fonts and I experimented with letter spacing (kerning) and line spacing (leading.) I also began to realize how important "machine-readable" text really is for search engines and ranking.

Like Designing with an Old Manual Typewriter, Just Get Over It
I now endorse The 100% Easy-2-Read Standard—100%E2R. Below is the edited, boiled down version. I recommend highly reading the source link material.

1. Standard font size for long texts.
100% font-size for the main text. All browser makers chose this as the default text size. (HTML size = 0)

2. Active white space.
Having air around the text reduces the stress level. It's easier to focus on the essence. White space looking nicer is not a side effect: it’s the logic consequence of functional design. For liquid layouts, at 100% font size, 50% column width (in relation to window size) is a good benchmark for most screen resolutions.

3. Reader friendly line height.
If you increase the line height, the text becomes more readable. 140% leading is a good benchmark.

4. Clear color contrast.
Benchmark: #333 on #fff, dark gray on white.

5. No text in images.
We want to search text, copy text, save text, play with the cursor and mark text while we read. Text in images looks pretty, but pretty is not what the web is about. It’s about communication and information, and information needs to be readable and usable.

What Fonts Can I Use?
Here's the LoBand list: Georgia, Courier, Verdana, "Times New Roman", "Comic Sans", Arial, and Impact. While web designers frequently claim more fonts work fine (under certain conditions,) these 7 fonts are my official LoBand List. Welcome to web reality. I'll talk about how to use these fonts creatively in another entry. Some should be used as little as possible!"Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a website does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families."

Please comment.