Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

IE10 supports OpenType features via CSS

Internet Explorer 10 has joined Firefox 4+ in supporting OpenType font features via CSS vendor prefixes. To explain how these features work, Microsoft commissioned demo pages from Font Bureau, Monotype, and FontFont (reminiscent of another demo/announcement from Microsoft). First WOFF support in IE9, and now the beginnings of OpenType feature support in IE10.

The demos are nicely done, and they each come with code samples that are worth studying. The way OpenType features are presently implemented is somewhat complicated. For instance, here’s how to enable small caps in IE and Firefox:

element {
  -moz-font-feature-settings: "smcp=1";
  -ms-font-feature-settings: "smcp" 1;
  }

That’s the CSS font-feature-settings property, which is the most specific of font feature property settings. But simpler rules are in the spec draft too:

element {
  font-variant-caps: small-caps;
  }

It’s too bad font-variant-caps and similar font-variant-based properties are not yet supported in any browser. Even the more specific font-feature-settings property that these demos showcase is only beginning to enjoy support in the latest version of its second browser.

Maybe for the foreseeable future, we could cobble together vendor-prefixed font-feature-settings and font stack substitution a la Fontdeck expert subsets (explained at the bottom of that post, and in use on this year’s Ampersand site).

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.