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.

About this entry

You’re currently reading “Kerning and OpenType features in Firefox 3,” an entry on Ralf Herrmann’s Typography Weblog

Published:: 06.14.08 / 6pm

Category:: Technology, Web Design

Ivo

06.14.08 / 7pm

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

Joe Clark

06.14.08 / 11pm

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).

ralfherrmann

06.15.08 / 7am

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.

Eben Sorkin

06.15.08 / 10pm

Thanks for putting this together Ralf!

John Daggett

06.16.08 / 12pm

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?

06.16.08 / 3pm

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!

Tyll

06.19.08 / 3pm

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

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.

06.19.08 / 4pm

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!

Noel HUrtley

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

Thanks for posting your analysis!

Vladimir Vukicevic

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!

louidet

06.19.08 / 5pm

unfair test, we all know firefox is the best.

Sam the Bright

06.19.08 / 6pm

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

Dave Hyatt

06.19.08 / 8pm

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.

PMurphy

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).

kosmar

06.19.08 / 11pm

great stuff.

Matt Alexander

06.20.08 / 12am

Very interesting, thank you.

Benjamin Meyer

So…. How do I test this myself?

Chizu

06.20.08 / 8am

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.

Todd Dominey

06.20.08 / 1pm

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.

Jens Kutilek

06.24.08 / 6pm

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.

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

Jon Whipple

06.24.08 / 8pm

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.

Hrishi

06.26.08 / 3pm

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

chris

06.26.08 / 6pm

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

dyn

06.26.08 / 10pm

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.

Nathan Myers

06.30.08 / 9pm

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?

07.01.08 / 8am

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.