Does font-size affect the rendering of ligatures?

Question

Gecko and Webkit browsers support rendering of ligatures ff fi fl ffl via text-rendering: optimizeLegibility (font must have ligatures, e. g. Calibri).

MDN page says, that only text of size 20px and higher will get ligatures. According to my own research this is not true:

• Firefox will render ligatures by default;
• Chrome (& Safari) will render ligatures if you specify text-rendering: optimizeLegibility;
• both engines seem to don't mind the font size.

Am I missing something here? Or it's just a mistake (outdate?) on MDN page and we should fix it?

[edit] Additional reading: Smashing Magazine's “A Closer Look At Font Rendering”.

Answer 1

Firefox supports a preference browser.display.auto_quality_min_font_size that allows you to adjust the value that it uses to decide whether to choose its font rendering path. However the only part of the code where this is still honoured in current versions of Firefox is on Windows XP where small font sizes or an explicit text-rendering: optimizeSpeed will render using GDI instead of Uniscribe.

Note that Thunderbird sets the value of that preference to zero for some reason.

Answer 2

Actually, the MDN page says that text of 20px or higher will get ligatures either way, with optimizeLegibility overriding that.

More generally, just how worthwhile it is to use ligatures or not (and other factors affecting legibility such as a particular kerning between any two particular glyphs) varies not just with size, but from font to font. It wouldn't surprise me to find this changing quite rapidly with versions. Certainly, the underlying tech isn't standing still.

Answer 3

Your analysis is correct. Some additional observations:

Apparently the font-variant-ligatures property described in CSS3 Fonts has not been implemented. Instead, Firefox implements the low-level font-feature-settings property, with the prefix -moz-, so you can actually prevent Firefox from applying ligatures by setting

-moz-font-feature-settings: 'liga' 0

on an element.

If you wish to prevent ligatures in specific occurrences, you can insert ZERO-WIDTH NON-JOINER (ZWNJ) between characters that could otherwise get ligated, e.g. f‌i instead of fi.