|Wednesday, September 05, 2012||(Comment)|
Three font stacks to match DejaVu / Bitstream Vera
The Bitstream Vera font families and their DejaVu derivatives are advantageous for technical writing because they include serif, sans-serif and monospace fonts with matching x-heights (desirable when different fonts are mixed on the same line), and because their monospace fonts distinguish between the capital ‘I’ and the lower-case ‘l’ and between the capital ‘O’ and the numeral ‘0’.
DejaVu and Bitstream Vera are freely distributable. However, while a typical Linux distribution includes one or the other, a typical Windows or OS X system has neither. Consequently, a website design that assumes the presence of either DejaVu or Bitstream Vera is liable to look awful on non-Linux machines.
So, to supplement my earlier post on multi-platform font stacks and my answer on “Helvetica-like” fonts, I propose serif, sans-serif, and monospace font stacks incorporating DejaVu and Bitstream Vera typefaces.
There is a perception that DejaVu attempted to cover too many languages, with insufficient allowance for the fact that different languages have different typographic distinctions. These concerns led to the development of DejaVu LGC, which has only Latin, Greek, and Cyrillic glyphs. I include DejaVu LGC in the font stacks to make them more future-proof and widen the coverage of Linux systems.
The standard Windows and Mac fonts do not include a good match for DejaVu Serif. But Google's Droid Serif is a good match and can be made available on multiple platforms via Google Web Fonts (which has not been done for this site, but has been done for Typetester.org).
So, a safe font stack incorporating DejaVu Serif would be
font-family: Droid Serif, "DejaVu Serif", "Bitstream Vera Serif", "DejaVu LGC Serif", serif;
where the CSS must be formatted so that no font name contains a line-break. For illustration, each font name in the above declaration is styled 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.
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].
Table 1: Prevalence of chosen serif fonts.Windows MacOSX Linux Core? Droid Serif (Web) (Web) (Web) - DejaVu Serif 34.95% - 97.83% - Bitstream Vera Serif 9.10% 4.94% 35.50% - DejaVu LGC Serif - - 7.38% -
If you need a “sans-serif” font with serifs on the capital ‘I’, you will be hard-pressed to find a satisfactory substitute for Verdana with a similar x-height and independent italic glyphs. But if serifs on the ‘I’ are optional, then Verdana is a more-than-adequate substitute for DejaVu Sans — as can be seen from the selected characters in the following graphic.
A general point of difference is that DejaVu Sans has rounded counters beside straight stems; e.g., in the above graphic, the enclosed portion of the ‘p’ is angular in Verdana, but rounded in DejaVu Sans. Verdana's ‘I’ is obviously wider than DejaVu's; but otherwise the dimensions are reasonably similar.
Verdana, being a Microsoft “core” typeface, is present on almost all Windows and OS X systems and the majority of Linux systems. Among the other standard Mac fonts, Geneva is the nearest in size to Verdana, and is therefore worth nominating as a fallback in the unlikely event that Verdana is not present.
So, a safe font stack incorporating DejaVu Sans would be
font-family: Verdana, "DejaVu Sans", "Bitstream Vera Sans", "DejaVu LGC Sans", Geneva, sans-serif;
this time, the above declaration is styled so that the name of any font that is neither installed on your computer nor replaced by the operating system is shown in your default serif font.
The following table lists the chosen sans-serif fonts in order of preference, with the percentage of machines on which each is installed.
Table 2: Prevalence of chosen sans-serif fonts.Windows MacOSX Linux Core? Verdana 99.90% 99.26% 70.02% Yes DejaVu Sans 35.57% - 97.83% - Bitstream Vera Sans 9.88% 4.82% 37.08% - DejaVu LGC Sans - - 7.38% - Geneva 1.80% 99.88% - -
Apple's Menlo, shipped with OS X since version 10.6, is an imitation of DejaVu Sans Mono, but is omitted because of its low asterisk. The standard Windows fonts do not include an imitation of DejaVu Sans Mono, and Courier-like fonts are too short in the x-height to be suitable substitutes. So the first choice is Lucida Console, which is bundled with all versions of Windows since ME. Then comes Andale Mono (a “core” font which is no longer bundled with Windows, but which is metrically similar to Lucida Console and shares the dotted zero of DejaVu), followed by the DejaVu-like fonts, then Liberation Mono (which also has a dotted zero), then Apple's Monaco (in case all else fails).
The result is
font-family: Lucida Console, Andale Mono, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "DejaVu LGC Sans Mono", Liberation Mono, Monaco, monospace;
for illustration, the above declaration is styled so that the name of any font that is neither installed on your computer nor replaced by the operating system is shown in your default (proportional) serif font.
The following table lists the fonts in the same order, together with their installation percentages.
Table 3: Prevalence of chosen monospace fonts.Windows MacOSX Linux Core? Lucida Console 99.42% - - - Andale Mono 3.89% 96.29% 66.47% Yes* DejaVu Sans Mono 35.20% - 97.83% - Bitstream Vera Sans Mono 17.53% 5.32% 37.08% - DejaVu LGC Sans Mono - - 7.81% - Liberation Mono - - 89.15% - Monaco 2.24% 99.88% 1.97% -
* But no longer bundled with Windows!
In each of the above stacks, for better or worse, a font available to Windows users is listed first, so that webmasters will see what most of their readers see. If you want DejaVu / Bitstream Vera fonts to be seen by all readers who have them installed, you can change the order accordingly.
[Last modified September 5, 2015.]
|Tweet||Return to Contents|