Subpixel antialiasing for fonts rendered to an image?

As I understand it, producing an image with fonts that are subpixel antialiased is nonsense because once the font is rendered to an image (clarification: bitmap image), the subpixels will turn into full pixels (how could the image preserve the subpixel-ness of the font rendering?)

I could not find a definitive source to confirm or invalidate my understand.

Clarification: I want to deploy images with text in them to the web. So it’s not about a mockup or anything.


Subpixel font smoothing is (typically) part of the operating system’s type rendering engine. As such, it really has nothing to do with images.

The common bitmap image formats for the web (JPG, GIF and PNG) don’t allow the embedding of font information, so the best you can do is render the type as part of the bitmap image.

You could use subpixel rendering in a round-about way, though, by typing your text in an application (that supports it), do a screen shot of that, then place the screen shot in your image.

There are some image formats that do allow font embedding…on the web the most common would be SVG. If you’re embedding a font, then it’s the font, itself, that’s being used to render the text, so provided the operating system supports it, sub pixel smoothing will be enabled. (Provided the browser exposes it’s own SVG rendering to the operating systems font rendering.)

All that said, keep in mind that sub-pixel rendering only works when your type is on the x-axis of the screen. That’s fine on a laptop or desktop, but on a mobile device, it won’t work if the screen is rotated onto the y-axis. Furthermore, if you hard-set sub-pixel rendering into an image, it will only work in one of the 4 possible screen rotations.

Source : Link , Question Author : oberhamsi , Answer Author : DA01

Leave a Comment