Hacker News Reader

Comment by chess_buster | Hacker News Reader

I dislike the anti-aliasing of the pixelated fonts.

fair, maybe they will release a non-aliased version?

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.

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?

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.

[1]: https://moritzfuerst.net/projects/smalltalk-type/webfont-tes...

[2]: https://en.wikipedia.org/wiki/Type_color

macOS Ventura 13.2.1 Safari Version 16.3 (18614.4.6.1.6) Dell 3840x2160 scaled to 2560x1440

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.

[1]: https://appleinsider.com/inside/macos/tips/what-is-display-s...

[2]: https://github.com/jdan/98.css/issues/125

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.

[1] https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

Reply on news.ycombinator.com