The absolute worst is when a monospace font puts fi into a ligature with a width of 1 character, entirely defeating the purpose of being a monospaced font.
Can you provide an example of the font doing this? Substitution of individual characters with ligatures is in my experience a feature of the typesetting/display engine (which decides how to represent the "bytes" as glyphs), not the font itself. Indeed, this ligature substation is often something you can toggle in whatever application you're using if it's capable of doing the substitution at all.
I suspect is just a bug: the ligature tables were copied from the regular variant, and perhaps no one noticed for some reason. Maybe the assumption was that the renderer would turn of ligature processing in monospace mode at the time, and the reference renderer did that?
I can't find any examples now, but I'm positive that there have been "coding" fonts which do this that have hit the front page of HN. Highlighted as a feature in the screenshots, even.
Another example of form over function, to the utter detriment of function, IMHO.
OpenType fonts can define ligation pairs. If the editor implements OpenType ligatures, it will read the instructions from the font and implement them. There will probably be a setting to enable or disable ligatures entirely, and there may be another one for which ligatures to include.
I don't use ligatures at all, but I have seen it on websites. So perhaps it's the CSS of the website that has decided to do this. I don't have any specific examples off hand, but my mental picture puts it on sites that also use this style of font: https://rubjo.github.io/victor-mono/ (although typing fi into the sandbox on the site doesn't exhibit the behavior).
Yup. It's the browser that's choosing to display this. As 'gdwatson pointed out, the font can indicate which ligatures are available, but whether or not the substation occurs also depends on the typesetting engine.
So then it is the responsibility of the font to make sure that when a ligature that it made available is used that is displayed as two characters wide instead of one?
If that's the shape the font designer wants for the ligature glyph, yes. IIRC, Tonsky's Fira code is designed with this in mind (https://github.com/tonsky/FiraCode) (Butterick uses Fira Code as his example.)
But maybe it's the intent of the designer to have each glyph have the same width, not each "character", so the glyph LESS-THAN OR EQUAL TO (≤, https://www.compart.com/en/unicode/U+2264) would be the same width as < or =: it's ultimately up to the application/typesetting engine to decide whether or to substitute the character string "<=" as "≤", and to see if the font _has_ that character and how to render it to the screen.
I suppose you could have the typesetting engine choose to somehow read the two characters, note that there's a ligature substitution, and "fit" the ligature glyph into a two-character space (say, padding the glyph or horizontally stretching it), but I doubt that would be very pleasing.
But ultimately what gets displayed is up to the typesetting engine: it can choose to use or not use ligatures; it can choose the spacing between glyphs; whether to "fake" certain styles (such as italics), text justification — all sorts of behavior. Good typesetting is available in many more applications today than it was, say, 25 years ago. There was all kinds of janky behavior going on, both from the engines not using information in the fonts when it was available, and faking it or overriding it as well.
And your example about CSS and browsers is exactly this. There can be information added to indicate how things should be displayed, but it’s ultimately up to the renderer. All the tricks used to adapt to various ways browsers render the same data, and sometimes the same (font and CSS) data in different contexts (say, as part of a <p> vs part of an <input>) in the same browser.
