Author here, you two mind telling me which operating system / browser / screen res you used? These render crisp on all my devices with macOS/ iOS in Safari and Firefox. Could be Chrome does sth I have to disable.
I find that the text of the site looks bad on Firefox in Linux, much worse than the screenshot of the actual Smalltalk system: https://i.imgur.com/LP2yNRI.png
Maybe they're just not doing as well at larger sizes?
Thanks for the screenshot. I think there certainly is something to that – these typefaces were designed to render at exactly one specific size. I mean that's why there is a "Sans10" and a "Sans12" in the ST-80 GUI. I've drawn a few glyphs of the 12 already, it's quite interesting how these faces differ between weights and sizes…
I made a webfont test page where you can see Sans10 at the original size[1]
There are rendering differences, in Firefox the type colour[2] is slightly lighter than in Safari. I'll have to look if there is a way to disable font-smoothing across Browsers with CSS.
woah - you are correct. I am on MacOS and it is antialiased in chrome but looks great and pixeltastic in safari! Hopefully just a css incantation or something?
Thank you. So my guess is the 1.5 display scaling plays a role here— there is a penalty to that, since it's not mapping pixels 1:1.[1] So macOS has to do some kind of anti-aliasing?
I'm of course not the first to find out,[2] but it's probably not advisable to try to make raster fonts work as webfonts nowadays. There is no reliable way to disable anti-aliasing. Even if there were, one would be very limited in terms of type sizes, which becomes moot because of displays running with odd scaling… and so on.
You can get the device pixel ratio from JavaScript using Window.devicePixelRatio. Maybe you can then add this as a css-variable to the body element and query it later on to compute a size for the fonts so they can match the "native" size of the pixels, for example using ggt.
