Hacker News Reader

Hacker News

Comment by theginger | Hacker News Reader

Full thread

theginger

What is with the font joining the character c and t on this site?(In headings)

View on HN

In a previous lifetime I was a huge typography nerd (I could name 95% of common fonts in just a glance ~10 years ago).

These are ligatures. I got the code to enable them from Kenneth's excellent Normalize-Opentype.css [0]

[0]: https://kennethormandy.com/journal/normalize-opentype-css/

I was wondering the same thing. That doesn't seem to happen in the Lato font on Google Fonts:

https://fonts.google.com/specimen/Lato?preview.text=Reaction...

EDIT: It's called ligatures: https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian.... The CSS for headings on this site turns on some extra ligatures.

Specifically, `font-variant-ligatures: discretionary-ligatures` enables this.

(So does `font-feature-settings: "dlig" 1`, which is the low-level equivalent; the site includes both.)

I was wondering that too - I don't think that's a ligature I've ever seen before.

It's not joining it in a kerning sense, that's just the remarkably serif nature of EB Garamond, which has a little teardrop terminal on the tip of the 'c'. It's possible that you have font smoothing that is tainting the gap, otherwise it's your eyes.

No, the heading font is Lato, not Garamond, and it's definitely some kind of digraph that only shows up with the combination "ct". Compare the letter "c" in these two headings: https://i.imgur.com/Zq53gTd.png

This should be upvoted. Thank you, I hadn't realized that OP was referring to the heading font or scrolled down to see what is yes, quite a remarkable ligature. It appears to be Lato delivered from <https://brick.freetls.fastly.net/fonts/lato/700.woff> The ligature appears due to discretionary ligatures being turned on.

     h1, h2, h3 {
     font-feature-settings: "kern" 1, "liga" 1, "pnum" 1, "tnum" 0, "onum" 1, "lnum" 0, "dlig" 1;
      font-variant-ligatures: discretionary-ligatures;
     }

Actually, EB Garamond has c_t and s_t ligatures.

and a very subtle f_f. I don't find those nice though.

It does, but those would only be applied if the `font-variant-ligatures: historical-ligatures` property were specified, so they don't appear on this site.

I inspected for a ligature and any evidence of CSS kerning being turned on before commenting, but I didn't test it to see what the page looked like with it turned on, so I didn't have active knowledge of the possibility of a ligature. If I'd know, it would have been better to give wider scope to the possibility that somehow kerning was being activated by OP's browser. I should have known better than to make a remark about a font without absolutely scrupulous precision! I actually appreciate the comments and corrections.

I was curious about this as well, it looks as though he’s using a specific font which creates a ligature between those letters. I think it’s specific because it’s only on the CT and it’s on other pages in his site. I went further to investigate what this might be and it’s a little used print style: https://english.stackexchange.com/questions/591499/what-is-t...

Reply on news.ycombinator.com