Most print designers collect type families. Imagine how stunned they are to learn their font collection is useless for optimized web design.
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:
- “Times New Roman”
- “Comic Sans”
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:
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!
Just say no
He goes on:
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.