Kerning and OpenType features in Firefox 3

Firefox 3 will be the first major browser with support for kerning and automatic ligatures. I tested the Firefox 3 release canditate and I have to say, it’s not perfect yet. But first the good news:

Kerning

Kerning is an important feature in print typography but for most of the (rather small) texts we read on the screen it is no big deal. But for larger headlines and print-outs it’s really nice to have support for kerning. See this comparison between Safari 3 and Firefox 3:

The Webkit developers claimed they have turned off kerning to avoid performance issues. But Firefox proves it can work.

Layout Features

Firefox 3 supports a few layout features of fonts with OpenType or AAT (Apple Advanced Typography) tables. The most obvious one is basic ligatures. In this example you can see the typical f-ligatures that are common in latin fonts and are now used by default in Firefox 3, if the font supports this feature.

This is nice for webpages in English, but it doesn’t work in all languages. For example, in German the use of ligatures depends on the words. “Auflauf” is a word where a ligature is wrong. In Turkish such ligatures are not used at all because they would lead to confusion between the characters “i” and “dotless i”. The logic for dealing with those exceptions is usually built into the OpenType fonts, but Firefox doesn’t honor them.

Discretionary ligatures are optional ligatures. The application should turn them off by default and the user might activate them for setting a fancy headline. Unfortunately, Firefox has turned them on by default and this could really mess up the body copy of websites.

But it gets worse: Firefox 3 also applies ligatures that are only valid in a special context, for example the end of a word.

Firefox doesn’t seem to check for context-dependent replacements. Which is a great pity, because this is the real power of OpenType layout features. See this next example:

A script font like that relies heavily on contextual replacements. Without support for Contextual Alternates and Contextual Ligatures such a font is almost useless. Most standard system fonts may not require such OpenType features, but when downloadable webfonts will someday be available in Firefox those features will hopefully be supported.

The kerning support will hopefully set an example. But the current use of OpenType features in Firefox 3 is rather disappointing. When ligatures are thrown in that are wrong in the used context or language, I would rather see no ligatures at all.

35 Comments

  1. Ivo 2008/06/14 at 7:20 PM #

    Thanks a lot, Ralf, for this interesting test run.

  2. Joe Clark 2008/06/14 at 11:13 PM #

    If language-dependency is a problem, just declare the language of text. Why not run a few test cases?

    I would also compare Opera. It exists, you know, and does many of the same things (many).

  3. ralfherrmann 2008/06/15 at 7:47 AM #

    Why not run a few test cases?

    Done. I tried setting a global language for the document and a local language for a p tag. Firefox doesn’t honor the ligature exceptions built into the font.

    I would also compare Opera.

    I just used Safari as an example of all the browsers not supporting kerning and OpenType layout features. At least in the above tests Opera produces exactly the same results as Safari.

  4. Eben Sorkin 2008/06/15 at 10:13 PM #

    Thanks for putting this together Ralf!

  5. John Daggett 2008/06/16 at 12:35 PM #

    Ralf, what are the fonts you’re using for your tests here? And I’m guessing you’re running your tests on OS X – 10.4 or 10.5?

  6. ralfherrmann 2008/06/16 at 3:35 PM #

    Fonts from top to bottom:
    -Bickham Script Pro
    -Optima (Mac dfont)
    -Corbel
    -Bickham Script Pro
    -Bickham Script Pro
    -(unreleased font)

    Yes it was done on OSX (10.5). I just tried the FF3 RC3 on Windows XP. It doesn’t have these ugly ligature bugs. Just the mentioned problem of not honoring the language-specific exceptions.
    And even the contextual substitutions work! Wow!

  7. Tyll 2008/06/19 at 3:25 PM #

    Thanks for the illustrations. Say, how do the ligatures affect quick find searching and general search engine indexing of websites? I imagine that indexing isn’t affected at all but does the Firefox quick find really break the ligatures down to their composites? If not, this typographic feature seems quite counter productive to me …

    Regards, Tyll

  8. ralfherrmann 2008/06/19 at 3:30 PM #

    Tyll,
    I haven’t tested it in every detail, but I am pretty sure the ligatures don’t affect the underlying text. Indexing and copy&paste should work like the ligatures weren’t there at all.

  9. Tyll 2008/06/19 at 4:01 PM #

    Whoa, you’re quick, thanks. :) Maybe you could post a follow up with examplary websites that actually use OpenType fonts where we can see the new feature in action … I couldn’t just now find a site that uses OpenType fonts, until I checked out Joe’s fawny blog from the comment above with FF3, where the hyperlinks are set in Candara, which seem to have a fi-ligature (while the Cambria of normal text doesn’t). Now, the fi-ligature behaves just like normal text, no problem with the quick find. Great!

  10. Noel HUrtley 2008/06/19 at 4:34 PM #

    It’s a step in the right direction for sure. Firefox 2 was surprisingly poor at rendering typography.

    Thanks for posting your analysis!

  11. Vladimir Vukicevic 2008/06/19 at 4:46 PM #

    Yes it was done on OSX (10.5). I just tried the FF3 RC3 on Windows XP. It doesn’t have these ugly ligature bugs. Just the mentioned problem of not honoring the language-specific exceptions.
    And even the contextual substitutions work! Wow!

    We use the platform’s native OpenType support for all of these features. On Windows, Uniscribe & friends do a good job of doing the right thing; under OS X, we’ve had to fight with ATSUI in many circumstances. Obviously, we haven’t quite won yet :) Probably some further configuration is required, but it’s also complicated by the obsoleteing of ATSUI and the introduction of Core Text in 10.5. We have people who are very interested in typography, so these are definitely things we’ll be working on!

  12. louidet 2008/06/19 at 5:27 PM #

    unfair test, we all know firefox is the best.

  13. Sam the Bright 2008/06/19 at 6:09 PM #

    Ooo… That’s interest. Thank for make compare.

  14. Dave Hyatt 2008/06/19 at 8:19 PM #

    We are also interested in eventually adding kerning and ligature support to WebKit (possibly only at larger font sizes, since the benefit at smaller font sizes is not worth the performance hit).

    I would love it if you could make your actual test cases available for download. This would help both WebKit and Gecko developers as we work on better typography support.

  15. PMurphy 2008/06/19 at 8:36 PM #

    We use the platform’s native OpenType support for all of these features.

    … so this varies from platform to platform? Would be interesting to see linux vs. windoze vs. OSX.

    On linux, I note that ligatures seem to work “better” overall than the OSX examples, but their subpixel/antialiasing is quite annoyingly off – e.g. “off”, the ff is rather lighter than the o, the stems of the ff are ~ 2-3 subpixels thinner than an “i” stem. No idea how much of that is font bugginess/misdesign, how much engine bugginess and how much firefox bugginess, but it’s annoying me to the point I’m considering turning ligature support off (at least if I can work out how to).

  16. kosmar 2008/06/19 at 11:58 PM #

    great stuff.

  17. Matt Alexander 2008/06/20 at 12:05 AM #

    Very interesting, thank you.

  18. Benjamin Meyer 2008/06/20 at 12:42 AM #

    So…. How do I test this myself?

  19. Chizu 2008/06/20 at 8:43 AM #

    Here’s a quick test case I made
    http://mymapofjapan.com/styles.html

    Not sure about all the font names, and I used some extras. Probably only works on a mac unless you’ve installed the fonts I used.

  20. Todd Dominey 2008/06/20 at 1:47 PM #

    These additions would certainly be more useful if both OS X and Windows shipped with more “shared” typefaces that designers could tap into. Here’s wishing those Vista typefaces some day make their way across the pond. There are some nice humanist sans in there.

  21. Jens Kutilek 2008/06/24 at 6:51 PM #

    Ralf, are you sure about the discretionary ligatures being used and the Bickham Script “something” example? I can’t reproduce it with the released FF 3.0/Mac.

  22. ralfherrmann 2008/06/24 at 6:54 PM #

    I heard the worst of those bugs were fixed in the final release. My test were with FF 3 RC3 on Mac.

  23. Jon Whipple 2008/06/24 at 8:02 PM #

    Ralf, this is a great visual comparison. Thanks for the information. using the icon above the example text is a great visual device as well.

  24. Hrishi 2008/06/26 at 3:52 PM #

    Wow. How do I write text with “ligatures” on my webpage?

  25. chris 2008/06/26 at 6:07 PM #

    Hrishi – you don’t, that’s the whole point, the font you use just does it automatically, assuming it has the ligatures built in.

  26. dyn 2008/06/26 at 10:20 PM #

    FF3 RC3 == FF3 Final. So if it’s fixed in the final release it’s fixed in RC3. Since RC3 was only one bug fix (FF3 crashing a lot on the Mac) you can even say it was fixed in RC2. Mostly problems in FF have to do with a faulty profile or some extension messing up.

  27. Nathan Myers 2008/06/30 at 9:39 PM #

    I’m sure I’m not alone in this. I’d like for Firefox to use more discretionary ligatures, particularly looped “sc” and “st”. In Libertine, these are grouped in “hlig”, where the regular ligatures are in “liga”. Can I persuade Firefox to use them? I would happily build Firefox (actually Iceweasel, on Debian) by myself, if necessary.

    Hint?

  28. ralfherrmann 2008/07/01 at 8:56 AM #

    I’d like for Firefox to use more discretionary ligatures, particularly looped “sc” and “st”.

    Those things cannot be on by default! We would need some CSS properties first, to control these OpenType feautures. So this should rather be proposed to those guys.

  29. Jürgen Jeka 2009/04/30 at 4:08 AM #

    In order to control kerning and ligatures Mozilla introduced the CSS property text-rendering in Gecko 1.9 (Firefox 3). See developer.mozilla.org/en/CSS/text-rendering.

  30. guide 2009/05/23 at 1:49 AM #

    Double WOW 2 your design!

  31. tip 2009/06/29 at 8:49 PM #

    A very very nice site with helpful informations! So keep up the good work – I already added the site to my personal favourites. All the best!

  32. login 2009/08/02 at 5:29 PM #

    I’d just like to thank you for taking the time to create this internet website. It has been extremely helpful

  33. Thomas Phinney 2010/05/12 at 4:03 AM #

    Does Firefox support class kerning for TTF, or only flat “kern” table kerning?

  34. Ralf Herrmann 2010/05/12 at 8:26 AM #

    OT kerning should work. See this test font: http://webfonts.info/wiki/forum/viewtopic.php?f=5&t=7
    (But it was CFF though)

  35. Thomas Phinney 2010/05/12 at 6:13 PM #

    Yeah, CFF is a different case. For example, the ATM driver on Windows translates OT-CFF class kerning to flat kerning behind the scenes (but only for pairs in WinANSI+MacRoman). I’d want to see (or hear of) it working in TTF to be sure….

 

Leave a Reply


*

More in Web Design & Webfonts (23 of 27 articles)