Part of the CSS Typography Reading List

Open Type allows for many subtle but important improvements in how text is rendered in modern browsers. I’ve discussed some of these in the past – discretionary ligatures and true small caps, automatic fractions and more – but perhaps the most practical is the ability to easily distinguish a capital O from the numeral 0 in a font. This legibility feature is vital for any occasion when mixed numerals and letters might cause confusion on web pages:

Some fonts (such as Inconsolata, the font I will be using to display code in the next version of this blog) place a diagonal slash through zeros by default, but a surprising number of typefaces popular with coders do not feature clear distinction between the characters. You should determine if any font you decide to use on a site has a slashed zero feature; if it does, you can easily turn the feature on and off with CSS: 

p.calluna {
	font-family: Calluna Sans, sans-serif;
	font-size: 2rem;
}
/* normal style */
p.slashed-zero{
	-webkit-font-feature-settings: "zero";
	-moz-font-feature-settings: "zero=1";
	-moz-font-feature-settings: "zero";
	-ms-font-feature-settings: "zero";
	-o-font-feature-settings: "zero";
	font-feature-settings: "zero";
	font-variant: slashed-zero;
	font-weight: normal;
}
/* code to generate distinct zeros */

Calluna Sans Regular by Jos Buivenga, embedded: 

<p class="calluna slashed-zero">Herodotus and the 10,000 Immortals</p>

Result:

Herodotus and the 10,000 Persian Immortals

Text displayed under normal conditions: 

<p class=calluna>Herodotus and the 10,000 Immortals

Herodotus and the 10,000 Persian Immortals

Note that not every font features literal “slashed zeros“: Calluna Sans uses dotted zeros to distinguish the numeral from capital O’s.

I would suggest that in most cases you would want to turn on slashed zeros for a font only under certain circumstances. A good starting selector set might be: 

code, kbd, td {
	-webkit-font-feature-settings: "zero";
	-moz-font-feature-settings: "zero=1";
	-moz-font-feature-settings: "zero";
	-ms-font-feature-settings: "zero";
	-o-font-feature-settings: "zero";
	font-feature-settings: "zero";
	font-variant: slashed-zero;
	font-weight: normal;
}

Something to keep in mind is the fact that OpenType support is somewhat inconsistent across browsers and platforms: you’ll see the correct typographic support on nearly all versions of Firefox and Chrome on Mac currently in use, for example, but only recent versions of those same browsers for Windows support the feature. Neither will you see support on iDevices. This is expected to improve in the very near future: for now, consider such typographical flourishes a “nice to have” feature, rather than something that will display completely consistently on every browser.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.