CSS Corner: Using the Whole Font


With cross-browser support for both the CSS3 @font-face rule and the WOFF font packaging format, modern Web typography has expanded far beyond the realm of ‘Web-safe fonts.’ Well-known magazines such as the New Yorker use Web fonts to preserve the typographic personality of their headlines, while [US] President Obama’s re-election campaign uses Web font service Typekit to host their identity font.

One remaining limitation prevents Web designers from using the entire font: the inability to access the large variety of optional OpenType® features built into many fonts. These features define glyph substitution and positioning options to support fundamental typographical features such as kerning, superscript and subscript, contextual letterforms such as ligatures, numeral styles, access to alternate East Asian glyphs as well as ornamental swashes.

For instance, an OpenType “stylistic set” built into Gabriola allows this text:

String of text in Gabriola font without stylistic sets applied

…to render as:

String of text in Gabriola font with stylistic set 6 applied

Recent updates to the CSS3 Fonts module include a new set of properties to expose these OpenType features within CSS. These properties can be grouped in two broad categories:

  • An explicit mapping of the common OpenType features to specific properties and values. For example font-kerning:normal applies the kerning pair adjustments encoded within the font and font-variant-numeric: tabular-nums enables tabular numerals.
  • The font-feature-settings property enables low-level access to all the OpenType features supported by a font. It is meant as an ‘escape hatch’ to access to more advanced features in less common use-cases.

CSS Property: font-feature-settings

Preview 4 of IE10 includes support for the font-feature-settings property. Our earlier Gabriola example could thus be written:

p#demo {

font-family: Gabriola, cursive;

font-size: 24pt;

-ms-font-feature-settings: "ss06" 1;

}

The -ms-font-feature-settings declaration above turns on a stylistic set supported by the font (ss06). The property takes either a value of ‘normal’ – no change in glyph selection or positioning – or a comma-separated list of one or more features. Each feature combines a four-letter OpenType feature tag and a value. In the example above, “ss06” is the OpenType feature tag for stylistic set 6. We assign the value 1 to the feature to turn it on.

The OpenType feature registry defines the list of possible tags (also documented here and standardized by ISO). Here a few of the most popular:

OpenType tag Enables
kern Kerning
liga Standard ligatures
dlig Discretionary ligatures
smcp Small capitals
subs Subscript
sups Superscript
swsh Swashes
ss01, ss02, …, ss20 Stylistic sets 1 to 20

For a good illustrated introduction to these features and many others, we recommend the Layout Features section of the FontFont OpenType User Guide.

The more common features are on/off switches. Feature values of off or zero turn the feature off; a value of on or any positive integer activates it. For some features, an integer value gives access to several options. This is usually the case for swashes (‘swsh’). If no value is specified for the feature, a value of 1 is assumed. All the following declarations are thus equivalent for the purpose of our Gabriola example:

-ms-font-feature-settings: "ss06" 1;

-ms-font-feature-settings: "ss06" on;

-ms-font-feature-settings: "ss06";

Finding Out Supported Features for a Font

Design tools such as Adobe InDesign or Illustrator expose OpenType features through user-friendly menus and dialogs, word processors such as Word support them through their font selection dialog and font vendors often document which features their products support. A future post will discuss using the browser to detect font features. With more browser access to OpenType features we expect font hosting services to do more to advertise and document their use as well.

Browser Support

The font-feature-settings property is currently supported by Firefox 4+ and Internet Explorer 10, beginning with Preview 4. Note that because Firefox and IE implemented different versions of the draft the value syntax they accept is different. For example, enabling kerning in both browsers requires the following:

-ms-font-feature-settings: "kern" 1;

-moz-font-feature-setting: "kern=1";

More information about –moz-font-feature-settings see -moz-font-feature-settings.

As CSS3 Fonts moves along the standardization track we expect more browsers to add support for font-feature-setttings as well as the more author-friendly font-variant properties and values defined in the module.

Also note that the property applies to all font families, whether Web fonts downloaded through @font-face rules or local fonts referenced by name.

Demos

Our IE Test Drive site includes advanced OpenType feature demos from Monotype Imaging, FontFont and The Font Bureau. They demonstrate the variety of typographic designs available in modern fonts.

You don’t need any special fonts to try this. Windows 7 includes a number of OpenType-enabled fonts including Calibri, Cambria, Consolas, Gabriola, and Palatino Linotype. In the Windows 8 Developer Preview, we added OpenType features to Segoe UI and the Web-safe fonts Arial, Verdana, Georgia, Times New Roman, Comic Sans and Trebuchet.

We are excited to give Web authors access to all the OpenType features built in Web fonts and look forward to an even broader range of typographic design on the Web.

—Sylvain Galineau, Program Manager, Internet Explorer

Comments (34)

  1. FremyCompany says:

    Is it possible to choose a stylistic set on per-glyph basis. For exemple, all "a" from ss01 and "b" from ss02?

  2. Sylvain Galineau [MSFT] says:

    @FremyCompany, the feature applies to all the glyphs it is designed for by the font. Being able to apply features on a per-glyph would not only be more complex but also allow overriding contextual features, which defeats their general useful purpose. Do you have any specific examples in mind?

  3. Brad Dunzer says:

    Sylvain,

    Also you might want to mention that Chrome Windows only has added support as well. No Mac support yet. Great info thanks for posting.

  4. у,еу, says:

    @FREMY, yes u can do it with 'LETTERING JS' :)

  5. Si Daniels [MSFT] says:

    @Fremy, check out the relatively recent "Character Variant" (CV01 to CV99) OpenType feature listed here…

    http://www.microsoft.com/…/features_ae.htm

    I'm not aware of any fonts that use it.

  6. FremyCompany says:

    Thanks all for your responses. I think I've been answered fully by all those. I had one example in mind about a font with two stylistics sets but with some glyphs I prefer from the first one and some other I prefer from the other one, I was asking myselft if it was possible to "mix" the stylistic sets to get the glyph I like. I suppose I would have to do it by script if I really want that, but it's not something I really want, it was just to know if it was possible.

    Anyway, I think you can use @font-face to select the glyphs you want "per font", no?

  7. Perk says:

    Another achievement for typography on the web, that's great!

    But what was the rationale for going with this syntax as opposed to Mozilla's?

  8. The -moz syntax is based on an older version of the draft, see http://www.w3.org/…/css3-fonts

  9. Echo 8 says:

    @Perk:

    IE is using the syntax described in the latest CSS3 Fonts WD, so it looks like Mozilla's implementation is that of an older version.

  10. Sylvain Galineau [MSFT] says:

    @FremyCompany: you can, using the unicode-range descriptor. Though I'd argue it's a bit heavy handed to use that feature on a single-glyph basis, it should work.

    @Perk: as pointed out by others, Mozilla's implementation references an older version of the spec. Until a spec is stable, changes like this can occur and you may end up with different prefixed versions of the property supporting a different syntax.

  11. Fred T. says:

    @Rob Mauceri

    As discussed on the IE Blog many times previously, we are watching the Web change to support HTML5 Video natively in all browsers except Internet Explorer.

    On a related note, Chrome's original support for h.264 is being dropped since h.264 is not an open codec format in favor of valid Web Video formats like WebM and Ogg Theora.

    blog.chromium.org/…/html-video-codec-support-in-chrome.html

    When are we going to hear official word about IE supporting open formats natively?  Is Microsoft waiting for CES2012 to make the official announcement we've been hearing rumors about?

    The silence from MSFT on the IE Blog about supporting an open video format natively is now becoming deafening and needs to be addressed ASAP… either Microsoft is going to support the SAME standard markup, and the SAME standard open video formats… or it can't claim that it supports standards and needs to stop singing this song.

    Do we need to start these hashtags trending on Twitter?

    #MICROSOFT_WONT_SUPPORT_OPEN_HTML5_VIDEO

    #MICROSOFT_WONT_SUPPORT_OPEN_HTML5_AUDIO

    Next you'll be telling us that you actually support #SOPA! even though you publicly *quietly* deny it: mashable.com/…/boycott-sopa

  12. Fred, this blog post is about CSS fonts. Your comment seems a bit off-topic. Was it posted here in error?

  13. Joel says:

    @Si Daniels – welcome to the IE Blog! Unfortunately the IE Blog has 3 major issues.

    1.) Microsoft is very slow (if ever) in responding to comments on this blog

    2.) Posts are locked from comments and responses after 14 days

    3.) The comment form is notoriously broken and eats comments without warning

    As a result readers need to constantly post and re-post comments on the IE Blog to ensure they get seen/heard.

    As for @Fred's comment I'm sure he is just as anxious as the rest of us to find out when Microsoft plans to fully support HTML5 Video and by that we mean at least one natively supported open video codec. Without this, IEs implementation of HTML5 video is a failure.

  14. hAl says:

    @Fred T.

    VP8 is not an open format but a proprietary format fully owned and controlled by Google.

    Google allows it to be used for free and that makes them just as open as the old binary .doc/.xls./ppt office format owned by Microsoft.

    Google also provides some mediocre quality VP8 codec software but without any indemnity against 3rd patent claims. As in 'use our codec software at your own risk'.

    Microsoft however has been providing all new Windows users since 2007 by default with a free h.264 codec for which 3rd party frand patent licenses are already paid and also provides a plugin for other browser like Mozilla to use the provided h.264 codec in the browser. No cost to the browsermaker.

  15. Thanks Joel for the explanation. I'm happy to respond to OpenType font questions posted here (at least for the next 13 days). Hopefully I won't miss any amongst the off-topic discussion.

  16. Brad Dunzer says:

    Hi Si,

    I posted two other posts yesterday but they didnt show up so I  will try again.

    Can you tell me what level of OpenType support will be in the IE10…are you just supporting the Tier 1 level — pretty much the list above in Popular from the first post or will greater support be available?

  17. @Fred T

    Interrestingly Chrome stated not to support h.264 a year ago and then became very quiet as Google knows they cannot afford to remove h.264 from their product. It would make their mobile OS and their browser slower.

    So even Google is still supporting h.264 a year and 10 versions after claiming to quit with it.

    Also we know that using a slightly inferior video codec cost a lot more energy and bandwith investment. A financial and environmental prize that h.264 will never cost in licenses.

    @Si

    Sorry for the off topic.

    Are all of the opentype set of features supported by DirectWrite?

  18. @Brad – Via the "font-feature-settings" markup IE10 will support any GPOS or GSUB OpenType feature. In fact any 4-letter combination will be directly passed to the font and the results used to render the content.

    @A_Zune – checking with the DWrite team on this question.

  19. Brad Dunzer says:

    How about IE10 for mobile. Will this support be in there as well?

    Thanks

  20. @Brad –  the Windows Phone team has asked us not to discuss web font related features at this time.

  21. Eduardo Valencia says:

    Hello daniels

    Do you know when are we going to have a full Windows 7 working demo of IE10?

  22. Brad Dunzer says:

    Thank for all info Si and Sylvain. We at WebINK are pretty excited to see more and more browsers support the OTF bits in the fonts.

  23. Martin says:

    sorry @Brad the Windows Phone will only get full HTML5 support for video and audio when (and if) MSFT adds it to IE10 and then ports it to the phone.

    it took ages to get the IE6 version on the phone replaced with a port from IE9 so don't hold your breath.

  24. alvatrus says:

    @Martin

    Stop spreading FUD

  25. Sean says:

    Can anyone recommend a good tool to batch convert a bunch of OGG/mp3 files to AAC?  I'm working on an HTML5 game and would like IE users to be able to play it as well.

    If no such tool exists, does anyone know if you can write a script to automate Audacity?

  26. Rob says:

    IE9 on Windows phone does not jump to anchors on a loaded page when opening a url that contains an anchor on that page.

    IE9 on desktop does jump to the anchor as do other browser.

    Where can you submit specific IE9 for mobile bugs?

  27. @A_Zune (2nd attempt at posting this)

    A response from  the DWrite guys, just like "font-feature-settings" DWrite can take any 4 letter tag.

    For IDWriteTextLayout use an IDWriteTypography object, which is set onto the range.

    msdn.microsoft.com/…/dd371541(v=vs.85).aspx

    For lower level custom layout clients, call GetGlyphs directly.

    msdn.microsoft.com/…/dd316625(v=vs.85).aspx GetGlyphs

    msdn.microsoft.com/…/dd368143(v=vs.85).aspx WRITE_TYPOGRAPHIC_FEATURES

    Also see

    Tutorial: Getting Started with DirectWrite (Part 3: Adding Typographic Features with IDWriteTypography).

    msdn.microsoft.com/…/dd368152(v=vs.85).aspx.

  28. Nice start! says:

    Now, do "pointer-events: none".  ^_^

  29. Glen says:

    Since all mobile and tablet browsers these days use either WebKit or Presto as their rendering engines when will windows mobile devices support one of them (preferably WebKit)

    Unfortunately no one wants to write content or apps for Windows phone devices because they don't support modern browser rendering engines.

  30. @Glen says:

    Windows Phone has IE9 in it. It uses Trident rendering engine. The same Trident which have highest score on ECMA JavaScript conformance test and the same Trident which is using hardware-accelerated graphics. Nothing modern than that so far.  So stop trolling and get lost.

  31. @Sean says:

    Given you have VLC installed and you are aware of powershell (*.ps1 files), use the script mentioned on this page:

    http://www.timvw.be/…/convert-aacm4a-files-to-mp3-with-vlc-and-powershell

    PS: make your default shell => Powershell (windows 7, vista & XP)

  32. Charles says:

    @@Glen Windows Phone has IE9… which means it has legacy bugs from IE8, IE7 & IE6 that it won't get rid of… it will still pollute the global namespace and have collision issues with named elements and elements with ID's it will still fail to support .innerHTML on multiple elements if not running in standards mode… it will still fail to pass the referrer on navigation changes triggered through JavaScript… it will still return invalid tag soup when you get the .innerHTML from an element… debugging will still give you useless error messages… it will still add items to the anchors collection that do not belong… it will still have rendering issues with animated GIF images and render empty select lists as if there are a dozen blank options inside them…. etc. etc.

    …and most of all it will *still* be the browser that *anyone* under 30 will be *embarrassed* to admit or be caught using… and that's Microsoft's biggest problem… letting IE stagnate for a decade was an EPIC FAILURE.

  33. Nebu says:

    Should IE ever implement MathML then this might help there too I guess (special variations of symbols).