Prevent "fi" legature in "efficient"

[bill-myers]

Page(s) Affected

Homepage

What needs to be fixed?

The word "efficient" is rendered, at least on my Firefox instance, using a "fi" ligature rather than "f" and "i" glyphs, which is pretty weird since it results in the two "f" letters looking different.

Suggested Improvement

Prevent the usage of that ligature by inserting the zero-width joiner "‌", i.e. rewriting "efficient" to "eff‌icent"

[XAMPPRocky]

Thank you for your issue! Yes it shouldn't have been "fi", I've now replaced it with the correct ligature.

[Manishearth]

We shouldn't be using the unicode ligatures at all (there are pretty rare use cases for using those), and in this case it makes it strictly worse

It seems like Fira sans has a ligature for fi but not ffi. I don't see a pressing need to diverge from the font.

[Manishearth]

I reverted it. The ZWJ approach seems okay (we might actually want a ZWNJ?), but i'm not convinced we should be diverging from the font. @bill-myers can you post a screenshot of what you see?

Here's what I get:

this kind of thing is pretty standard with fi-ligatures, often an ffi will have a slightly different second f

[XAMPPRocky]

That must be a Firefox issue as on safari the ligature renders as I would expect.

[bill-myers]

This is on Firefox on Ubuntu, normal DPI, no zoom/scaling.

The horizontal line in the two "f"s is not aligned.

[bill-myers]

BTW, "font-variant-ligatures: none" in CSS may be a better fix than adding the zero-width character.

[bill-myers]

Also, changing "font-size: 36px" to "font-size: 37px" makes it look fine on my machine, and it seems that horizontal lines are only misaligned at some font size values.

[XAMPPRocky]

@Manishearth What version is your browser? I can't replicate that screenshot. Both Firefox and chrome render correctly.

Safari

Firefox

Chrome

[bill-myers]

I think it depends on the OS, and in particular Linux seems to be the problem (I assume you tested OSX or Windows since you include Safari)