Aliased type in web browsers?

Mark Simonson
Mark Simonson Posts: 1,734
edited February 2022 in Technique and Theory
I got a question from a user of my font Anonymous Pro, which contains embedded bitmaps for some sizes. They appear in certain circumstances (for instance, they can be enabled by turning off font smoothing in Terminal on macOS).

This user wants to use Anonymous Pro on his website and display the bitmaps, but he hasn't been able to make that happen. As far as I know, it's not possible with modern browsers to disable antialiasing via CSS or other means from the server side. I'm wondering if anyone can confirm this.
Tagged:

Comments

  • Mike Duggan
    Mike Duggan Posts: 239
    not a confirmation, but even though it should be possible to disable antialiasing for browsers via the GASP table, I think there are hard coded defaults that kick in that will overwrite that. 
  • Mark Simonson
    Mark Simonson Posts: 1,734
    edited February 2022
    It's been a long time since I worked on it, but it looks like I set GASP to 1 for the range in which there are bitmaps.
  • John Hudson
    John Hudson Posts: 3,186
    I suspect you will only manage to get the desired results in some environments: some are simply going to ignore the presence of embedded bitmaps and use rasterised outlines instead.

    The gasp table determines how rasterisation is applied at ppem sizes/ranges. You can set to grid-fitting only, but that won’t necessarily mean that you get the embedded bitmaps.
  • Mark Simonson
    Mark Simonson Posts: 1,734
    Yeah, even in desktop apps and operating systems, it's hit or miss. Probably the only thing that would get the effect he wants is a "pixel" font where the outlines mimic the bitmaps. But that has its own problems, such as mismatch between the simulated bitmap pixels and device pixels.
  • Justin Penner
    Justin Penner Posts: 65
    When I last looked into this, Linux was the only operating system that still supports any kind of bitmap fonts.

    As Mark suggests, you can make a vector-based "pixel" font which will render correctly if the font size is set to a multiple of the pixels per em. You can see a demo of this in the introductory sentence on my home page. The catch is, that since most web browsers artificially embolden fonts by default (up to a certain px size), this creates a dark halo effect on the text which can be mostly eliminated through the non-standard CSS feature font-smooth (you'll need to use the vendor-prefixed properties).
  • Mark Simonson
    Mark Simonson Posts: 1,734
    Although it might solve his problem, I'm not sure if it would be worth my time to create a faux bitmap version of Anonymous Pro. ¯\_(ツ)_/¯
  • Saurabh Sharma
    Saurabh Sharma Posts: 23
    @Mark Simonson Chrome does support -webkit-font-smoothing (vendor specific CSS property) with values as antialiased, auto, inherit, initial, none, revert, subpixel-antialiased and unset. By default, the smoothing seems applied. But when these values are changed, no effect is seen. Even using "none" or "unset" doesn't work. (This applies to all fonts).




  • John Hudson
    John Hudson Posts: 3,186
    What about the Apple and Google bitmap formats used for colour fonts, I wonder? Maybe if one loaded the font with tables for every possible SFNT bitmap format, that might increase the hit rate?
  • Michael Rafailyk
    Michael Rafailyk Posts: 146
    edited February 2022
    @Mark Simonson Many websites still use this settings (turn antialiasing on / sub pixel rendering off, in CSS) for macOS browsers, at least Apple and Medium. This settings let the fonts looks not too heavy on low resolution screens. But if you use high resolution Retina display, you may not see the difference because a pixels are too small for the eye.

    The first line for Firefox and the second line for Safari and Chrome:

    -moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
  • Mark Simonson
    Mark Simonson Posts: 1,734
    edited February 2022
    @Michael Rafailyk Understood, but the issue is how to get web browsers to display embedded bitmaps, not how it renders the outlines.

    Embedded bitmaps are a legacy of early TrueType, an alternative to delta hinting for small ppems on low res 1-bit displays. It is rare to find fonts that have them nowadays, so it's not surprising there is little support for them in modern apps and operating systems, including web browsers.

    In the end, I think the solution in this user's situation is a faux pixel font, plus the setting to reduce font smoothing, as @Justin Penner mentions.

    Turns out, it's easier than I remembered to make such a font starting from a legacy-format bitmap font using BitFonter 3, an app produced by FontLab about 15 years ago, which is what I used to create the embedded bitmaps in Anonymous Pro back then in the first place. I keep an older Mac laptop around for running apps like this that are no longer supported on modern Macs. I just had to remember how to use it (BitFonter 3, that is).

Categories