Hacker News Reader

Comment by kccqzy | Hacker News Reader

Ligatures are missing :(

Look at the IE5 screenshot. The second last line has the word "finibus" and notice how the "f" and the "i" seem to be combined together. That's a ligature. In contrast in the body text of the website I don't see any. The word "file" in the paragraph right above the screenshot is missing that ligature.

Kerning is, well, also wrong. So wrong that I literally trouble reading the body text, but I have no trouble reading the text in the IE5 screenshot. (Bad kerning: once you see it you can't unsee it.)

View on HN

Actually, IE5 didn't do automatic ligatures; what you see in "finibus" is simply an "f" glyph and an "i" glyph which are close enough that the dot of the "i" nestles into the top-right of the curve of the "f", and the serifs at the base run together... just like they do for the "in" and "ni" pairs following.

(It was possible to render a real ﬁ glyph, but only by using the Unicode presentation-form code point U+FB01; IE5 didn't do automatic ligatures in Latin script, and even if it did, Times New Roman did not have the OpenType support for that.)

It does appear that the IE5 screenshot shows significantly tighter letter spacing in general than the body text, which is why we see the "fi" glyphs touching in IE5 whereas they're separate in the text of the page. I guess that's probably related to size-specific glyph metrics or hinting that is snapping the glyph advances to a narrower width than the "fake-bitmap" font produces.

> Actually, IE5 didn't do automatic ligatures; what you see in "finibus" is simply an "f" glyph and an "i" glyph which are close enough that the dot of the "i" nestles into the top-right of the curve of the "f", and the serifs at the base run together.

That's actually a really neat solution in the absence of explicitly defined ligatures... since there is no antialiasing, it only needs a little care when designing the font at the pixel level and choice of kerning and the result will be indistinguishable. fi is a very geometrically natural ligature though, i wonder if it doesn't work so well for others that are too dissimilar to their components.

Yep, we deliberately didn't convert the full set of glyphs from each of the fonts we support, mostly just because it was quite laborious (not to mention CPU time-consuming) to generate our relatively small range of weights, sizes, and font families as-is, so missing ligatures are a known issue.

If it's really illegible, i wonder if there isn't some other rendering bug happening – we admittedly didn't do much testing other than Chrome/Safari/Firefox on latest macOS. And i've seen some pretty weird glitches with this kind of custom font, e.g., https://github.com/jdan/98.css/issues/13. If something is truly that broken feel free to hit us up at webmaster@ with a screenshot, we'd appreciate the bug reports!

Well, you don't need to do much for this, because there are only two ligatures that were commonly supported: 'fi' and 'fl'.

For the kerning, ok, that's more work...

For concrete examples, take a look at any word where a 'd' is followed by a letter with a vertical stroke on the left side (e.g. "did", "middle", etc).

Agreed, the terrible kerning on this page hurts my eyes.

Reply on news.ycombinator.com