Brick. Webfonts that look good

This kind of uglyness due to the lack of ligature if not as noticeable on digital media, where we typically don't have the 1200+ dpi that print does and where, hence, you tend not to have these kind of 'f' (for example) because fonts have been hinted (or specifically chosen / created) not too have these issues.

I hope my explanation makes sense: I'm not a native english speaker but I did write and typeset myself about a dozen books (most with Quark XPress, one with LaTeX)... And they were all using ligatures IIRC (I should check for my LaTeX one: it's been a long time).

Ligatures are just single glyphs that represent multiple letters (or their equivalents). So for example the classic ‘fi’ pair is often turned into a ligature as I’ll discuss below, but the ampersand symbol ‘&’ is also a ligature (it originally came from the Latin word et, meaning “and”, although in many fonts today a much more stylised form is used).

In languages like English, ligatures are basically useful for two things: decoration (usually in slightly quirky fonts going for a certain stylised look, rather than everyday typesetting) and tidying up clashes between adjacent letters.

The ‘fi’ pair is an example of the second type. In classical typefaces designed for printing, the ‘f’ would often have quite a long overhang at the top. That worked fine when the following letter was something low like an ‘a’ or ‘o’; you’d just close up the spacing a little, perhaps allowing the top of the ‘f’ to reach over the next letter a little, and everything looked lovely.

Unfortunately, if the following letter was something tall, like an ‘l’ or a dotted letter such as ‘i’ or ‘j’, this left the typesetter an unwelcome choice between moving the letters further apart (creating an awkward space in the lower half) or keeping them close together (creating a dense area or even touching/overlapping symbols in the upper half). Either way, the result tended to be distracting when set at typical body text sizes. So, ligatures like a combined ‘fi’ were adopted as a solution, in that particular case following the spacing and general shape of the original letters but slightly adjusting the top area to avoid the clash.

Unfortunately again, at some point the idea that using such ligatures was automatically a good idea caught on, and instead of serving a useful purpose (fixing clashes in fonts where the design of the font created a clash) they became something supposedly desirable for their own sake, one of those examples of typographic snobbery that just won’t die.

That means today we see them not only where they are genuinely useful but also where they’ve been forced artificially. For example, you’ll get a sans serif screen font where the regular ‘f’ has a short overhang and would quite happily sit next to a normal ‘i’ or ‘l’ with no problems, and then someone comes along and creates a distorted ‘fi’ ligature for it where the ‘f’ is extended and then clumsily wrapped into the dot over the ‘i’, even though there’s no reason to do that and actually it distorts the shaping and reads worse than the original.

The other common mistake is to try and use techniques that work at body text sizes (where the useful kind of ‘fi’ ligature is a minor adjustment that should go unnoticed by a typical reader) and apply them at larger sizes for things like headings or pull quotes (where the adjustment becomes a big, obvious distortion when scaled up). In most cases, text set at large sizes would have been just fine with the original ‘f’ and ‘i’ glyphs and perhaps a touch of extra spacing, but sadly modern digital typography often lacks the hand-finished refinement that the old masters used to produce (at least in my rose-tinted view of history), because it’s just too much extra work to fine-tune everything.

And thus we get things like the example here, where perhaps the ligature has been applied at a size a little larger than it really suits, and so you get what looks like an ‘h’ in the middle of the word and to some readers it then becomes the very distraction it was supposed to avoid.

I glanced at the CSS but couldn't find the reason.