after Firefox 3.6 – new font control features for designers

Note: the discussion below applies to work in progress that might show up in Firefox 3.7. It does not describe features in Firefox 3.6.

This post is from Jonathan Kew and John Daggett. He’s supplied a 5 minute video that shows some of the features on the fly. If you’re a total font nerd and you enjoy a soothing British accent, you might want to watch it.

Using @font-face allows web designers a wide palette of font choices and with commercial font vendors supporting the WOFF font format, the set of font choices should improve even more. So the next step is clearly to try and make better use of features available in these fonts.

For many years, “smart” font formats such as OpenType and AAT have provided font designers ways of including a rich set of variations in their fonts, from ligatures and swashes to small caps and tabular figures. The OpenType specification describes these features, identifying each with a unique feature tag. But these have typically only been available to those using professional publishing applications such as Adobe InDesign. Firefox currently renders using font defaults; it would be much more interesting to provide web authors with a way of controlling these font features via CSS.

Håkon Wium Lie of Opera, based on discussions with Tal Leming and Adam Twardoch, proposed extending the CSS ‘font-variant’ property to include values for font features. Mozilla is actively working on a new proposal along these lines. This is a fairly big addition to CSS, so it will most likely involve some complex discussions about how best to support these features.

Experimental Implementation

As part of this effort, Jonathan Kew has been working on porting a portion of the Pango library for use with handling complex scripts and to enable the use of font features on all supported platforms. He currently has an experimental build that uses a special CSS property to associate a list of OpenType features with specific elements in a page. This is not the proposed format, it simply provides a better way of discussing possible sets of font-variant properties and the OpenType feature settings to which they should map.

.altstyles {
  /* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
  -moz-font-feature-opentype: "dlig=1,ss01=1";
}

The feature setting string above implies rendering with discretionary ligatures (dlig) and the first set of stylistic alternates (ss01). An example using Jack Usine’s MEgalopolis Extra:

This font makes extensive use of OpenType features; the homepage of the font contains a sample rendering that uses many of these features. Below is a rendering of the same sample written in HTML with OpenType features enabled:

Tabular Figures for Numerical Alignment

OpenType features also enable better control over alignment. When numbers are listed in tabular form, proportional forms often result in the misalignment of digits across rows, making the list harder to scan. With tabular alignment enabled, individual digits are rendered using a fixed width so that digits align across rows:

Automatic Fractions

Automatic fractions are also possible with OpenType features, note the inline use of fractional forms in the recipe ingredient list below:

Language Sensitivity

OpenType also includes support for features on a per-language basis. This is important for rendering text correctly in some languages. For example, Turkish uses both a dotted-i and a dotless-i, so the distinction needs to be preserved when rendering ligatures or small caps. Below is the same text in English and Turkish, with both default and language-sensitive renderings shown for the Turkish text:

Historical Text

The way text is rendered constantly evolves; glyphs once in common use often morph into other forms, making the historical forms distinct from their modern forms. Below is the text of an old Massachusetts Bay Colony law, taken from a book in the Daniel R. Coquillette Rare Book Room of the Boston College Law Library.

Original scanned image:

Below is the same text rendered in HTML using the Fell Types revival fonts by Igino Marini with OpenType features enabled. Note the ‘ct’ ligature and the contextual form of the ‘s’:

More resources

Font feature support in CSS proposal
OpenType font feature list
Fell Types revival fonts by Igino Marini


61 comments

  1. Tjobbe

    Very good, but the accent sounds pretty much Australian to me!

    October 21st, 2009 at 09:29

  2. […] About « after Firefox 3.6 – new font control features for designers […]

    October 21st, 2009 at 10:01

  3. Greg

    Just a heads-up, the line “It’s your a total font nerd and you enjoy a soothing British accent, you might want to watch it.” should read:

    “If you’re a total font nerd and you enjoy a soothing British accent, you might want to watch it.”

    You understand that I simply can’t bear to see it in the same sentence as “British”…

    October 21st, 2009 at 10:09

  4. […] Firefox 3.7 will not only support WOFF, but will begin supporting more OpenType features. Control of the features via CSS is in the works. Christopher Blizzard and Jonathan Kew elaborate. […]

    October 21st, 2009 at 10:20

  5. cuz84d

    Looking forward to the day we see some pretty sweet websites.. I know if you want to look at another language on the web, currently we have to setup the OS to use specific keyboard and language packs.. but this will be cool to see once web developers get a hold of this..

    October 21st, 2009 at 10:26

  6. Christopher Blizzard

    @Greg – Yeah, sorry about the typo there. I fixed it. :)

    @Tjobbe – Pretty sure he’s in the UK and he’s from there! But I’ll double check. (We’re a global project so it’s hard to know where people are from sometimes.)

    October 21st, 2009 at 10:27

  7. @F1LT3R

    The old font looks really beautiful. It’s mind boggling to think how different a place the web will be in five years with all the work that is currently going on.

    October 21st, 2009 at 10:34

  8. Jakub Pawlowicz

    This is really, really good!! Thanks to this we may see some REAL typography inside browsers soon.

    @F1LT3R – In five years we could have that supported in all major browsers – I wish Explorer wouldn’t be one at that time…

    October 21st, 2009 at 13:23

  9. Hans Pinckaers

    Wow, that’s amazing. Would be so cool if every browser was compatible with it. But we’re not so far yet.

    Btw, beautiful accent sir.

    October 21st, 2009 at 13:46

  10. John Faulds

    Wow, some really cool features being discussed here. Look forward to being able to use them soon.

    @Tjobbe: I’m Australian and I can tell you that Jonathan Kew’s accent is definitely English.

    October 21st, 2009 at 14:11

  11. skierpage

    Can’t wait sor this majeftically beautiful typography in nightlies, Firefox is the beft! :-) I hope many page owners will buy advanced fonts licensed for the web to take advantage of these features.

    October 21st, 2009 at 15:22

  12. Nathan Myers

    This might be very nice for web designers, particularly the ones avoiding real work. What can you do for the people who have to look at the painfully unreadable web pages that will certainly result? What of those obliged to try to read them anyway?

    I have had to jimmy my environment to force my browsers to use Linux Libertine in place of all these ugly fonts specified by hipster website designers. It was easy enough on current Firefox — although it sometimes failed — but for Webkit browsers and to handle those failures, I had to edit fontconfig’s XML to force the substitutions. That heavy-handed approach is certain to lead to other problems. In order to get the “st” and “ct” historical [sic] ligatures in Libertine to display by default, I had to edit the font file itself, with fontforge, to copy them into the standard ligatures set.

    It’s still not satisfactory; most pages render with too-small point sizes, and I have to “zoom” most pages.

    It’s fun to put whizzy fonts in web pages. It’s not fun to try to read anything other than “lorem ipsum” rendered with most of them.

    October 21st, 2009 at 17:55

  13. John Daggett

    @skierpage
    Keep in mind that most users already have fonts which include some of these features!! Why tabular figures are not already available on the web is a deep mystery to me…

    October 21st, 2009 at 18:13

  14. […] Font Control for Designers […]

    October 21st, 2009 at 21:24

  15. WalterGR

    Given that Firefox is all about web standards, could you let me know the standards body that approved this spec?

    Thanks,

    Walter

    October 21st, 2009 at 22:27

  16. tom

    jonathan kew is english, see: http://www.tug.org/interviews/interview-files/jonathan-kew.html

    October 21st, 2009 at 23:04

  17. Richard Le Poidevin

    I’m in love, this will be fantastic!

    October 22nd, 2009 at 01:22

  18. […] you’re a total font nerd and you enjoy a soothing British accent, you might want to watch this video» about future firefox features (sorry for the […]

    October 22nd, 2009 at 02:53

  19. Zéfling

    And support for Ruby (HTML and CSS3) is still planned?

    October 22nd, 2009 at 02:54

  20. […] you’ve got an interest in fonts on the web you really do owe it to yourself to take a look at this page to get an idea of where things are heading. Although this is experimental work in Firefox, […]

    October 22nd, 2009 at 08:41

  21. James John Malcolm

    This is fantastic work!

    I hope that “font-variant: do-numbers-in-tabular-style;” (and other extensions) won’t just be supported in the @font-face, but also everywhere else. Being able to do “#mytable td:nth-one(2n) {font-variant: do-numbers-in-tabular-style;}” would be such a boon. [1]

    Also, is “font-variant:small-caps;” going to be kept separate from “font-variant:real-opentype-small-caps;” in the final implementation? I don’t think that would be wise.

    [1] Excuse the pig-latin-css

    October 22nd, 2009 at 08:47

  22. John Daggett

    @WalterGR
    As the article describes, this is work in development, it is not an existing standard. The initial proposal was posted on the www-style mailing list and the discussions will take place there, on the www-font mailing list, and within the W3C CSS Working Group.

    October 23rd, 2009 at 15:26

  23. […] After Firefox 3.6 – New Font Control Features for Designers […]

    October 23rd, 2009 at 20:44

  24. Phil Ricketts

    This is very interesting, these features are long overdue. The web needs better typography, and slowly, we’re getting it. Though really, what will change things is seeing IE implement some standard for font control such as this.

    This chap sounds like Salad Fingers (David Firth). I actually felt quite dirty after listening to this.

    October 24th, 2009 at 02:29

  25. […] future holds, and how browsers will one day begin to take full advantage of OpenType features: read After Firefox 3.6 – new font control features for designers and be sure to watch the […]

    October 24th, 2009 at 13:25

  26. […] today, Dan Klyn tweeted a link to a blog post describing new FireFox font features. The distinctive voice of the man in the video reminded me of someone… Soon we will be able […]

    October 24th, 2009 at 16:46

  27. […] after Firefox 3.6 – new font control features for designers at hacks.mozilla.org "Below is the same text rendered in HTML using the Fell Types revival fonts by Igino Marini with OpenType features enabled. Note the ‘ct’ ligature and the contextual form of the ‘s’:…" (tags: typography opentype design graphic-design HTML browsers rendering) […]

    October 24th, 2009 at 23:01

  28. dfthdfhdfh

    What about svgfonts?
    Are they usable in wott.
    Because they have benefits because they’re vector based.

    October 25th, 2009 at 07:45

  29. […] future holds, and how browsers will one day begin to take full advantage of OpenType features: read After Firefox 3.6 – new font control features for designers and be sure to watch the […]

    October 25th, 2009 at 12:49

  30. […] future holds, and how browsers will one day begin to take full advantage of OpenType features: read After Firefox 3.6 – new font control features for designers and be sure to watch the […]

    October 25th, 2009 at 15:22

  31. […] future holds, and how browsers will one day begin to take full advantage of OpenType features: read After Firefox 3.6 – new font control features for designers and be sure to watch the […]

    October 26th, 2009 at 12:04

  32. […] New Font Control Features For Designers […]

    October 27th, 2009 at 10:27

  33. Tjobbe

    @John Faulds – I’m English (can’t you tell from my name?), I don’t *think* he has a very English accent, it sounds it, but there’s something quite un-English about it, it really has a twang!

    Back on topic, seriously excited to the n’th degree with where fonts for the web are going and are going to go, exciting times ahead, the death of Arial? You read it here first ;o)

    October 27th, 2009 at 14:02

  34. […] http://hacks.mozilla.org/2009/10/font-control-for-designers/ (Firefox 3.6 ile yeni font tipi desteği) […]

    October 29th, 2009 at 10:18

  35. Dogan Weber

    Beautiful!

    I am looking forward finding this features implemented in further firefox-builds. Open source is changing computing day by day. Keep on rockin’.

    November 7th, 2009 at 06:31

  36. […] 我们把在Mozilla的工作都设定在这个前提下。我们第一个使提速JavaScript成为可能,CORS(跨域XHR请求),混合使用HTML和SVG,最先提出的基于Canvas3D的WebGL,支持硬件设备的地理定位和重力感应。我们正在帮助实现和标准化一些全新的CSS规则,这些规则可能被其他浏览器实现;我们带领互联网朝着现代的字体系统前进;我们提供互联网网站作者和用户更多的安全工具。我们的工作就是帮助保证互联网变得更加丰富多彩并勇往直前──这也是我们公司公共利益使命中非常重要的一条。这是五年中Firefox提供给我们的机遇。 […]

    November 9th, 2009 at 04:32

  37. Mozilla User

    I looove it! Way more useful than WOFF. Can you pleeaase make a Linux build? I can’t wait until FF 3.7!

    November 10th, 2009 at 11:55

  38. […] future holds, and how browsers will one day begin to take full advantage of OpenType features: read After Firefox 3.6 – new font control features for designers and be sure to watch the video.WOFF sample page — you will need the latest development version of […]

    November 13th, 2009 at 10:22

  39. […] with the situation getting better on the web (hey, we’re even getting ligatures!), the control is still going to be pretty bad for a long time. Print designers are masters of […]

    November 14th, 2009 at 06:13

  40. […] XeTeX 的作者 Jonathan Kew 虽然仍然在开发 TeXworks,但工作的重心已经放到了 Mozilla Firefox 3.6 的 WOFF 格式和 OpenType 复杂排版支持上,最近的一个视频里 Jonathan 提供了一个很棒的概览,有这样的一些特性之后,在浏览器里做一些认真的文本排版才可能成为现实 — 可惜浏览器仍然缺乏好的断行算法实现。这部分工作其实就是基于 harfbuzz-ng 的。而 WebKit-GTK 版本也开始了基于 harfbuzz-ng 的实现。 […]

    November 17th, 2009 at 22:48

  41. […] interesting features, like better font rendering and control (something that other browsers have placed a lot of emphasis on lately), higher speed and much more. Share and […]

    November 19th, 2009 at 06:45

  42. […] with the situation getting better on the web (hey, we’re even getting ligatures!), the control is still going to be pretty bad for a long time. Print designers are masters of […]

    November 19th, 2009 at 08:54

  43. Patrick Chuprina

    Hi,

    I can’t seem to find : gfx.text_layout.harfbuzz to change either in firefox 3.6beta or 3.7 landmine(pc version) what am I missing? Any help would be appreciated.

    Patrick Chuprina

    November 25th, 2009 at 20:03

  44. […] backed by Mozilla, type foundries,介紹了 WOFF 中的一些規格演繹與技術說明。在 after Firefox 3.6 – new font control features for designers […]

    December 1st, 2009 at 03:19

  45. […] All these methods act as a stop-gap whilst we wait for all browsers to allow embedding of custom fonts through @font-face (hint: we’re mainly waiting on Microsoft Internet Explorer), and for a look at what will soon be possible you can watch a great video from Mozilla titled new font control features for designers. […]

    December 8th, 2009 at 05:29

  46. Christian

    There are already special character entities for the one-quarter, one-half, and three-quarters fractions but I’ve wondered before why they didn’t have them for at least one-thirds and two-thirds.

    http://developer.cmzmedia.com/?p=32

    Really looking forward to being able to use ligatures and alternates, etc.

    December 14th, 2009 at 16:02

  47. hurr

    As Mr. Kew comes from SIL– are there any plans to support Graphite fonts in Firefox? He said in August[1] that WOFF would allow any sfnt font, but the draft WOFF spec only mentions “TrueType, OpenType and Open Font Format fonts”. I also found the sila project at mozdev[2] but it seems to be long defunct.

    [1] http://lists.w3.org/Archives/Public/www-font/2009JulSep/1279.html (WebOTF is what is now called WOFF)
    [2] http://sila.mozdev.org

    December 22nd, 2009 at 13:01

    1. John Daggett

      No plans currently for Graphite support but anything’s possible. As always, patches welcome!

      January 6th, 2010 at 19:30

  48. […] to standardize and implement some new CSS capabilities that are being developed in other browsers, we’re leading the web towards a modern font system and giving web authors and users more security tools. Our job is to help keep the web rich and […]

    December 28th, 2009 at 19:16

  49. […] start up their web browser and it will be better. Maybe it will crash less, maybe it will be improve typography support on the […]

    January 15th, 2010 at 23:10

  50. […] och stöd i vävläsare (Firefox), typsättningsprogram (XeLaTeX) och program för att skapa typsnitt […]

    January 21st, 2010 at 14:19

  51. […] http://hacks.mozilla.org/2009/10/font-control-for-designers/ (Firefox 3.6 ile yeni font tipi desteği) […]

    January 22nd, 2010 at 11:36

  52. […] su navegador y será mucho mejor. Probablemente con menos cuelgues, quizás con mejoras en el soporte para tipografías en la […]

    January 23rd, 2010 at 14:39

  53. BWRic

    Is there any way I can help get this developed more in Firefox? I’m a web developer at a design studio and would love to help.

    January 29th, 2010 at 06:52

  54. […] a short time. We’ve been inspired recently by beautiful redesigns, increasingly sophisticated browser support, and many more foundries choosing to embrace […]

    February 23rd, 2010 at 16:25

  55. Knsi

    Hi,
    thanks for this, I now can use opentype fonts and display ligature features with firefox, mostly.
    However, when printing the font is substituted by firefox, how can I fix that?

    November 5th, 2010 at 06:04

  56. […] (Updated from a blog post last year): […]

    November 9th, 2010 at 18:32

  57. John Ward

    I’m fascinated with the above video but unfortunately it seems to be problematic. The audio will keep going but the video wont move. If you click the progress bar you’ll get an update but not until you do that. Any chance of a re-upload or post on YouTube?

    December 14th, 2010 at 10:17

    1. John Ward

      I should say I’m using Chrome 8.0.552 and Firefox 3.6.12 and same problem in both.

      December 14th, 2010 at 10:18

  58. Derek Newcastle

    Thanks for the article, my web designers to use @font-face often, though I do wonder what repercussions we may experience by enabling such a large gamut of customised typography across the web—increased production time & more cross browser issues, possibly?

    December 17th, 2010 at 23:00

  59. dynamis

    note about sample code:
    “-moz-font-feature-opentype” property has been changed to “-moz-font-feature-settings”:

    https://bugzilla.mozilla.org/show_bug.cgi?id=511339#c7
    rename the property to -moz-font-feature-settings (following the current CSS3 Fonts editor’s draft)

    May 29th, 2011 at 21:06

Comments are closed for this article.