3 ms·

I dislike the anti-aliasing of the pixelated fonts.

by chess_buster 4y ago

shaunxcode 4y ago
fair, maybe they will release a non-aliased version?
- moritz 4y ago
  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.
  - shaunxcode 4y ago
    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?
  - floren 4y ago
    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 https://i.imgur.com/LP2yNRI.png Maybe they're just not doing as well at larger sizes?
    - moritz 4y ago
      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-test https://moritzfuerst.net/projects/smalltalk-type/webfont-tes... [2]: https://en.wikipedia.org/wiki/Type_color https://en.wikipedia.org/wiki/Type_color
  - deleted 4y ago
    [deleted]
  - chess_buster 4y ago
    macOS Ventura 13.2.1 Safari Version 16.3 (18614.4.6.1.6) Dell 3840x2160 scaled to 2560x1440
    - moritz 4y ago
      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-scaling-on-mac-and-why-you-probably-shouldnt-worry-about-it https://appleinsider.com/inside/macos/tips/what-is-display-s... [2]: https://github.com/jdan/98.css/issues/125 https://github.com/jdan/98.css/issues/125
      - chess_buster 4y ago
        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/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...

I dislike the anti-aliasing of the pixelated fonts.

shaunxcode 4y ago

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

moritz 4y ago
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.
- shaunxcode 4y ago
  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?
- floren 4y ago
  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 https://i.imgur.com/LP2yNRI.png Maybe they're just not doing as well at larger sizes?
  - moritz 4y ago
    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-test https://moritzfuerst.net/projects/smalltalk-type/webfont-tes... [2]: https://en.wikipedia.org/wiki/Type_color https://en.wikipedia.org/wiki/Type_color
- deleted 4y ago
  [deleted]
- chess_buster 4y ago
  macOS Ventura 13.2.1 Safari Version 16.3 (18614.4.6.1.6) Dell 3840x2160 scaled to 2560x1440
  - moritz 4y ago
    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-scaling-on-mac-and-why-you-probably-shouldnt-worry-about-it https://appleinsider.com/inside/macos/tips/what-is-display-s... [2]: https://github.com/jdan/98.css/issues/125 https://github.com/jdan/98.css/issues/125
    - chess_buster 4y ago
      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/devicePixelRatio https://developer.mozilla.org/en-US/docs/Web/API/Window/devi...