Gavin R. Putland, BE PhD
| Monday, August 06, 2012 | (Comment) |
Font stacks that look similar in Windows, OS X, and Linux
Contents
- Aims and options
- Wide serif (Georgia-like) fonts
- Narrow serif (Times-like) fonts
- Tall serif (Droid-like) fonts
- Wide sans (Verdana-like) fonts
- Narrow sans (Helvetica-like) fonts (with Arial last!)
- Sans-serif except capital ‘I’ ?
- Low monospace (Courier-like) fonts (with Courier New last!)
- Tall monospace (Andale-like) fonts
- Using Arimo and Droid Sans in Blogger™
Aims and options
If you want your web pages to look similar for all readers, it isn't good enough to rely on Microsoft's “core” fonts. These fonts are said to be “web-safe” because they are installable on many platforms, but that doesn't mean your readers actually have them installed! (Nor are these the only fonts that are installable on many platforms; e.g., any multi-platform document viewer probably comes with fonts.) Besides, you might have other preferences.
The long-term solution is the Web Open Font Format (WOFF), which was published as a Candidate Recommendation by the W3C in August 2011. You can use it now: most free and proprietary fonts are available as, or can be converted to, .woff files, which can be uploaded to your web server, declared in your style sheets using @font-face, and thence rendered to readers with any compatible browser. But the “compatible” browsers are quite recent: Chrome since v.6 (Sep.2010), Firefox since v.3.6 (Jan.2010), IE since v.9 (Mar.2011), Konqueror since KDE 4.4.1 (Feb.2010), Opera since v.11.10 (Apr.2011), Safari since v.5.1 (Jul.2011), and other browsers that use the same rendering engines. There are older browsers that understand @font-face, but they require different formats which, at best, make extra work for the webmaster.
If you use Google Fonts (formerly called Google Web Fonts), the “extra work” of generating the @font-face code required by those “older browsers” has been done for you, so that the class of compatible browsers is expanded to include Chrome since v.4.249.4 (Mar.2010?), Firefox since v.3.5 (May 2009), IE since v.6 (Aug.2001 — yes, more than a decade ago), Opera since v.10.5 (Mar.2010), and Safari since v.3.1 (Mar.2008).
Of course, if you use the Google Fonts server, you are restricted to the fonts offered by Google. But the converse isn't true; the fonts themselves are open-source and downloadable. Neither are you prevented from using alternative fonts installed on your readers' computers — font stacks work as usual, with Web Fonts mixed with conventional fonts in any order.
However, it is not practical to include a Google web font in every stack, because the fonts take time to download. At the time of writing, Firefox will display a fallback font while waiting for the web font, while other browsers will display nothing (unless the download fails, in which case the fallback proceeds). It is therefore advisable to minimize reliance on Web Fonts, using them only to fill serious gaps in conventional font stacks. For each Web Font, it is advisable to use the minimum character set (e.g. Latin for English text), and to rely on the fallback fonts for any missing glyphs.
So let's consider some specific font groups.
Wide serif (Georgia-like) fonts
On this blog, the proportional serif fonts used for body text (like this paragraph) are set by the CSS declaration
font-family: Georgia, "Bitstream Charter", "Charis SIL", Utopia, "URW Bookman L", serif;
where I have styled each font name so that if the font is installed on your computer (or replaced by the operating system or the browser), its name appears in that font (or the replacement); otherwise it appears in your default sans-serif font (to make it obvious that the font doesn't match the name). N.B.: The CSS must be formatted so that no font name contains a line-break.
The named fonts are “Georgia-like” in that lower-case ascenders are taller than capitals and numerals, although the difference is slight in the case of URW Bookman L. But they are not all “Georgia-like” as regards numerals; Georgia has text numerals (old-style, descending), whereas the other named fonts have lining numerals (non-descending).
The following table lists the chosen fonts in order of preference, together with the percentage of machines on which each font is installed, for each major platform [according to the Code Style font survey to April 5, 2012]. It also names the designers, showing another connection between Georgia and Bitstream Charter.
Table 1: Prevalence and provenance of chosen “Georgia-like” fonts.
Windows MacOSX Linux Core? Designer Georgia 99.5% 98.6% 69.6% Yes M. Carter Bitstream Charter - - 91.5% - M. Carter Charis SIL ? ? ? - SIL International* Utopia - 1.6% 23.9% - Robert Slimbach URW Bookman L - - 98.4% - Phemister et al.* Based on Bitstream Charter.
The table implies that a significant minority of Linux users will “fall through” Georgia and consequently get lining numerals.
Narrow serif (Times-like) fonts
Although I have a marginal preference for lining numerals, I don't use any Times Roman lookalikes for body text on websites, partly because Times-like fonts have tight spacing which makes equations hard to read. (But when I typeset with pdflatex, which has a separate set of spacing rules for equations, I happily use Times-like fonts. Horses for courses.) However, in case I really need lining numerals, I have defined a CSS class with
font-family: "TeX Gyre Termes", TeXGyreTermes, "Nimbus Roman No9 L", STIXGeneral, FreeSerif, Times, "Times New Roman", "Liberation Serif", serif;
and again, in the above declaration, the name of any font that is not installed or replaced is shown in your default sans-serif font.
The above font stack is used for the title of this blog. The first two names on the list refer to the same font (for different platforms). All the named fonts look very much alike except the last, Liberation Serif, which is metrically compatible with Times New Roman but visibly different, with more spurs on lower curves. Times lookalikes are listed before Times New Roman, in case the operating system replaces the latter with the less similar Liberation Serif and thereby promotes Liberation Serif over the fallbacks.
The following table lists the same fonts in the same order, together with the installation rates and origins.
Table 2: Prevalence and provenance of chosen “Times-like” fonts.
Windows MacOSX Linux Core? Designer TeX Gyre Termes ? ? ? - GUST, after URW Nimbus Roman No9 L - - 98.2% - URW STIXGeneral ? ? ? - STI Pub FreeSerif 0.7% - 85.2% - URW Times 3.6% 99.5% 0.2% - (disputed) Times New Roman 99.8% 98.4% 69.4% Yes (disputed) Liberation Serif - - 89.3% - S. Matteson.
Thus almost all users will have suitable installed fonts and there is no need for any web fonts.
Tall serif (Droid-like) fonts
See “Three font stacks to match DejaVu / Bitstream Vera”.
Wide sans (Verdana-like) fonts
The first of the following graphics is in Verdana, which is installed on nearly all Windows and OS X systems. The second is in DejaVu Sans, which is installed on nearly all Linux systems.
For a font stack including both, see “Three font stacks to match DejaVu / Bitstream Vera”.
Narrow sans (Helvetica-like) fonts (with Arial last!)
See “A multiplatform Helvetica-like font stack that suppresses Arial”, and the answers on Arimo vs. Roboto at StackExchange.
Sans-serif except capital ‘I’ ?
Sans-serif fonts are more legible than serif fonts at small sizes, such as you might use in footnotes. But if you use those footnotes for references, you might want serifs on the upper-case ‘I’ to distinguish it from the lower-case ‘l’ and assist the recognition of Roman numerals. My “Helvetica-like” fonts don't have that feature. Tahoma and Verdana do.
Nearly all Windows and OS X systems have both Tahoma and Verdana. But on Linux, Tahoma is practically nonexistent while Verdana, being a “core” font, is installable but not always installed. The gap can be filled by Google's Droid Sans, whose capital ‘I’ has the desired serifs. Verdana is bigger (and has wider character spacing) than Tahoma or Droid Sans. On Windows, Tahoma is rendered better than Droid Sans, which is rendered better on Linux than on Windows.
These consideration suggest the font-family stack
Tahoma, "Droid Sans", Verdana, sans-serif;
and again, in the above declaration, the name of any font that is not installed or replaced is shown in your default serif font (and Droid Sans is not downloaded by this blog, but may be installed on your machine).
The following table shows the same fonts in the same order, together with their prevalences (to April 5, 2012) and origins.
Table 3: Prevalence and provenance of “Tahoma-like” fonts.
Windows MacOSX Linux Core? Designer Tahoma 100.0% 95.9% - - M. Carter Droid Sans (Web) (Web) (Web) - S. Matteson Verdana 99.9% 99.2% 70.0% Yes M. Carter.
So Windows users would get Tahoma, and Mac users would get Tahoma or Droid Sans, and Linux users would get Droid Sans or Verdana or — in the unlikely event that they have neither installed Verdana nor kept their systems anywhere near up-to-date — the default sans-serif font (probably DejaVu Sans).
I tried the above arrangement and didn't like it. At the time of writing, Droid Sans doesn't have separately designed italic glyphs and therefore relies on the browser to introduce slant — and all browsers give too much slant, Safari on Windows being by far the worst. For Windows users, here are Tahoma Italic and Tahoma Bold Italic (with your default serif italic and serif bold italic as fallbacks for non-Windows users). All browsers render Tahoma's italic styles with too much slant (although Safari on Windows is no worse than the others in this case). Verdana is rendered much better; but its presence cannot be relied upon.
So, if you really need serifs on a capital ‘I’ in a sans-serif passage, perhaps the best method is to define a CSS class for temporarily switching to a serif font.
Low monospace (Courier-like) fonts (with Courier New last!)
The ubiquitous Courier New monospace font is too light to match the common proportional fonts with which it is likely to share the page. Its free derivatives, known as FreeMono and Nimbus Mono L, are almost as faint. Courier for the Mac does not have this problem, but what is called “Courier” on Linux probably does. Courier Std and the free Courier 10 Pitch are heavier. That leaves us without a heavier “Courier” for Windows. But because Courier New is not only faint but also wide for its height, one might readily tolerate a narrower but heavier substitute. Consolas fits the bill.
So, the monospace fonts used on this blog (e.g. in the tables on this page) are set by
font-family: "Courier 10 Pitch", "Courier Std", Consolas, Courier, "TeX Gyre Cursor", TeXGyreCursor, "Nimbus Mono L", FreeMono, "Courier New", monospace;
and again, the name of any font that is not installed or faked is shown in your default (proportional) sans-serif font. “TeX Gyre Cursor” and “TeXGyreCursor” refer to the same font. The following table lists the above fonts in the same order, with their frequencies and origins.
Table 4: Prevalence and provenance of chosen “Courier-like” fonts.
Windows MacOSX Linux Core? Designer Courier 10 Pitch - - 85.0% - H. Kettler Courier Std - 2.1% - - Adobe? Consolas 88.6% 48.6% - - L. de Groot Courier 3.6% 99.5% 0.2% - H. Kettler TeX Gyre Cursor ? ? ? - GUST, after URW Nimbus Mono L - - 98.2% - URW FreeMono 0.6% - 85.2% - URW Courier New 99.8% 96.8% 69.0% Yes Monotype.
All the fonts below “Courier” are faint. “Courier” itself may get a faint substitute on Linux systems. It is not promoted above Consolas, because “Courier” tends to be replaced (“faked”) by Courier New on Windows systems. Mac users see the most consistent suppression of faint fonts while Linux users see the most consistent character widths.
Steve Matteson's "Liberation Mono" (present on 89% of Linux systems) is omitted because, although it is width-compatible with Courier New, it is substantially taller and does not look at all like Courier. I note, however, that the Latin subset of Liberation Mono is available from Google Fonts as “Cousine”.
Tall monospace (Andale-like) fonts
See “Three font stacks to match DejaVu / Bitstream Vera”.
Using Arimo and Droid Sans in Blogger™
To use web fonts in your web pages, you must not only declare them in your font stacks (as above), but also inform browsers where to find them. Let's illustrate the latter procedure for Arimo and Droid Sans on Blogger™.
- Go to the Google Fonts home page.
- Type Arimo in the search box.
- Click “Add to Collection”.
- Type Droid Sans in the search box.
- Click “Add to Collection” for the appropriate font.
- Click “Use” (bottom right).
- Tick boxes to choose weights and styles.
- Click the “@import” tab.
- Copy the code and insert it just after the opening <style ...> tag in the <head> of your template; that is, use the code as the first part of your style sheet.
If you pick (e.g.) Normal 400 and Bold 700 for each font family, the “code” will be
@import url(http://fonts.googleapis.com/css?family=Arimo:400,700|Droid+Sans:400,700);
If you accept the “Standard” tab instead of clicking the “@import” tab, you'll get the longer alternative code
<link href='http://fonts.googleapis.com/css?family=Arimo:400,700|Droid+Sans:400,700' rel='stylesheet' type='text/css'>
which must be inserted before the style sheet (unlike the “@import...” code, which must be in the style sheet). N.B.: Some bloggers have reported that the <link ...> tag must be closed, e.g. by inserting a forward-slash before the final angled bracket. In my experience (with a “Classic” template) this doesn't seem to make any difference; “your mileage may vary”. Using the “@import” tab avoids the issue.
[Completed August 12, 2012. Last modified September 5, 2015.]
Tweet
|
 
Return to Contents
|