Official low-bandwidth web-safe list.

Reading Time: 3 minutes

Most print designers collect type families. Imagine how stunned they are to learn their font collection is useless for optimized web design.

Grandma's and Grandpa's are half the Internet users. Keep your web text readable. No tiny, gray type.
Grandma’s and Grandpa’s are half of USA Internet users. Keep your web text readable. No tiny, gray type.

The web murdered my typography.
First, we mourn our typographic loss. Then we’re angry. How stupid could the web be!

CSS comfort for the sad designer.
Cascading Style Sheets (CSS) introduced simple control over browser fonts. We could finally experiment with letter spacing (kerning) and line spacing (leading.) Machine-readable text (HTML) is important for search engine ranking. Using GIF or PNG images of type adds weight and isn’t readable by a search engine.

We endorse The 100% Easy-2-Read Standard – 100%E2R.
Below is an edited, boiled down version:

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

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 logical result of functional design. For liquid layouts, at 100 percent font size, 50 percent column width (in relation to window size except on mobile) 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 percent line spacing (leading) is a good benchmark.
Clear color contrast. Benchmark: hexcode colors #333 on #fff, dark gray on white. Reduces eye fatigue for online reading.

4. 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. Instead use HTML ALT and TITLE tags on images and – for goodness sake – include a caption.

5. What fonts can I use?
Here’s a brief list:

  • Georgia
  • Courier
  • Verdana
  • “Times New Roman”
  • “Comic Sans”
  • Arial
  • Impact

These 7 fonts are our Official Low-bandwidth Websafe List. Welcome to painful web reality. Use some as little as possible, like Comic Sans! Web-safe fonts are fonts likely to be present on a wide range of computer systems. Browsers will choose a similar alternative, based on the author-specified CSS font stack. In our test of the fastest, responsive WordPress free themes, each and every one used websafe fonts.

A note about text contrast:

black-contrast

Above: The best solution is #ICICIC  background color with text color #CDCDCD.

Remote hosted webfonts.
There are many cloud-based type services online. Many are free. Others paid. With WordPress themes, Google Fonts is the most common CDN host. Font drag varies and needs measurement and evaluation with Yslow and WebPagetest online tools. We’ve found some webfonts are weightless. There are many variables. So test on both desktop and mobile operating systems.

Browser type tools.
On FireFox, we use the free addon FontFinder. The addon allows us to analyze any CSS styles of selected text. Any piece of an element’s information can be copied to the clipboard for documentation or style guides. With this handy tool, font-families can be disabled from the entire page, to test degradation for cross-OS support. And, any active element can have any piece of the font’s options (such as color, size or family) adjusted inline. This is our preferred font analysis and reverse-engineering tool.

For Google Chrome, we use the free extension WhatFont hover tool. It’s features are more limited but it works.

Why use HTML websafe fonts?
Because they load faster than any alternative!

In a post called “Webfonts”, web designer Adam Morse says we should all just say no to webfonts and insists that system fonts are a better choice.

What?

Just say no

Morse writes:

There are a lot of arguments around why you should use webfonts. In none of those arguments, have I heard about a single problem being solved for users.

He goes on:

Over the last three years I have participated in a number of testing sessions. In that time I never heard a user complain about:

    • the use of system fonts in a design.
    • a website having the same typeface as another site.
    • a page using system fonts that loaded too quickly.
    • a site NOT using web fonts.

On the flip side I:

  • observed users abandon a website because the page was loading slowly.
  • heard people complain about the dreaded flash of unstyled text.

In sum, Morse’s attitude is that webfonts aren’t worth the trouble they cause some users – especially in low-bandwidth conditions – and that sticking with tried-and-true system fonts is best for all concerned.

Other Articles:

PagePipe: Writing for the web >
PagePipe: Web readability is 16px size with gray #333 >

What others think of us:


"Steve Teare bailed us out. Our organization had two outdated sites and lost our volunteer web designer. The site rebuilds entailed a great deal of work to sort out all the outdated content, images, and documents and get to work on our updated goals." visitpalouse.com Washington, USA

by - Mike Milano