CHAPTER 9 The Next Steps for Web Typography
.wf-loading h1 { visibility: hidden; }
/* — or — */
.wf-loading h1 { font-family: 'A fallback font'; }When creating font stacks, the best results are achieved if: selected type-
faces belong to the same classification; and each respective character cov-
ers the same amount of physical space. This means an appropriate fallback
font will posses the following qualities, sorted by importance:- matching x-height
- similar character width
- similar letter space
A bulletproof font stack should contain the first choice typeface, the near-
est alternative, platform-specific alternatives, universal alternatives and fi-
nally a generic alternative. If you are self-hosting Web fonts, the great Font
Squirrel Webfont Generator^57 , among other options, lets you fix vertical
metrics and resize glyphs to match the x-height of the selected Web-safe
font (Arial, Verdana, Trebuchet, Georgia, Times New Roman and Courier).Subsetting
We can dramatically improve performance by reducing the file sizes of
Web fonts and by reducing the number of HTTP requests (we’ll come
to that in a minute). It is also common for a font file to contain multiple
scripts that are neither always necessary nor required. If only a subset of
glyphs from a font file are needed, why download the whole font?
Some Web font services offer subsets, like small caps or lining figures
as separate fonts. Others let you select the character ranges you require
prior to exporting. While this is a great step forward, in most cases it’s still
not always possible to subset fonts on a glyph-by-glyph basis.57 http://www.fontsquirrel.com/tools/webfont-generator