7 ms·

What is going on with the "st" ligature on this site?

by davidmurdoch 4y ago

smegsicle 4y ago
automatic font ligatures and their consequences have been a disaster for the human race
- moritzwarhier 4y ago
  Sorry to be snarky, but this whole comment thread borders on satire for me. If I can think of a "disaster for the human race", it's probably people being paid obscene amounts of money in exchange for advancing the destruction of the environment.
deleted 4y ago
[deleted]
Cerium 4y ago
There is a CSS rule: font-feature-settings: "liga", "dlig" [1]. This rule enables both standard (liga) and discretionary ligatures (dlig). The discretionary set often includes a loop "st" ligature [2]. [1] https://css-tricks.com/almanac/properties/f/font-feature-settings/ https://css-tricks.com/almanac/properties/f/font-feature-set... [2] https://helpx.adobe.com/fonts/using/open-type-syntax.html#dlig https://helpx.adobe.com/fonts/using/open-type-syntax.html#dl...
- iamflimflam1 4y ago
  Hopefully fixed - didn't see anything on my machine so was wondering what people were talking about!
  - moritzwarhier 4y ago
    Couldn't see it on FF Android either
  - iamflimflam1 4y ago
    Funny, just looked at one of my previous blog posts and it's strangely appropriate! https://www.atomic14.com/2020/08/25/how-do-we-debug.html https://www.atomic14.com/2020/08/25/how-do-we-debug.html
- moritzwarhier 4y ago
  Interesting, I had not yet heard of or thought about that CSS property, but it makes sense that it exists. For example, one could enable them for headlines only, or only for smaller font sizes, only with a minimum DPR...
- robocat 4y ago
  https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings https://developer.mozilla.org/en-US/docs/Web/CSS/font-featur... says “Whenever possible, Web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position. These lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature.” Using https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian... you can disable font ligatures (yayyy!). Safari Mobile allows JavaScript shortcuts to run in any web page: I created a web shortcut in the Apple Shortcuts App to disable ligatures using JavaScript, and run it from the page share icon in Mobile Safari - unobvious functionality! I only learned that feature was available on the iPad today! I would prefer a user style sheet override. . .
cabirum 4y ago
It sticks out like a sore thumb and is completely unnecessary for this typeface.
mattlondon 4y ago
Have to agree - very distracting. After a while I kinda lost track of what the article was saying and just started "spotting" the ligatures.

What is going on with the "st" ligature on this site?

smegsicle 4y ago

automatic font ligatures and their consequences have been a disaster for the human race

moritzwarhier 4y ago
Sorry to be snarky, but this whole comment thread borders on satire for me. If I can think of a "disaster for the human race", it's probably people being paid obscene amounts of money in exchange for advancing the destruction of the environment.

deleted 4y ago

[deleted]

Cerium 4y ago

There is a CSS rule: font-feature-settings: "liga", "dlig" [1]. This rule enables both standard (liga) and discretionary ligatures (dlig). The discretionary set often includes a loop "st" ligature [2]. [1] https://css-tricks.com/almanac/properties/f/font-feature-settings/ https://css-tricks.com/almanac/properties/f/font-feature-set... [2] https://helpx.adobe.com/fonts/using/open-type-syntax.html#dlig https://helpx.adobe.com/fonts/using/open-type-syntax.html#dl...

iamflimflam1 4y ago
Hopefully fixed - didn't see anything on my machine so was wondering what people were talking about!
- moritzwarhier 4y ago
  Couldn't see it on FF Android either
- iamflimflam1 4y ago
  Funny, just looked at one of my previous blog posts and it's strangely appropriate! https://www.atomic14.com/2020/08/25/how-do-we-debug.html https://www.atomic14.com/2020/08/25/how-do-we-debug.html
moritzwarhier 4y ago
Interesting, I had not yet heard of or thought about that CSS property, but it makes sense that it exists. For example, one could enable them for headlines only, or only for smaller font sizes, only with a minimum DPR...
robocat 4y ago
https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings https://developer.mozilla.org/en-US/docs/Web/CSS/font-featur... says “Whenever possible, Web authors should instead use the font-variant shorthand property or an associated longhand property such as font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position. These lead to more effective, predictable, understandable results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an OpenType font feature.” Using https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-ligatures https://developer.mozilla.org/en-US/docs/Web/CSS/font-varian... you can disable font ligatures (yayyy!). Safari Mobile allows JavaScript shortcuts to run in any web page: I created a web shortcut in the Apple Shortcuts App to disable ligatures using JavaScript, and run it from the page share icon in Mobile Safari - unobvious functionality! I only learned that feature was available on the iPad today! I would prefer a user style sheet override. . .

cabirum 4y ago

It sticks out like a sore thumb and is completely unnecessary for this typeface.

mattlondon 4y ago

Have to agree - very distracting. After a while I kinda lost track of what the article was saying and just started "spotting" the ligatures.