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.

3 Answers 3


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.

  • 1
    The rotation point is crucial because it illustrates the folly of using "static" or "baked in" subpixel anti-aliasing even on a single device. Then consider all the variable sub-pixel layouts and variable densities of screens even within manufacturer lines of products.
    – horatio
    Jun 28, 2013 at 17:53
  • @horatio agreed. In fact, I just realized that if you bake in the sub pixel rendering, it will only work in ONE of the 4 rotations (added to the answer)
    – DA01
    Jun 28, 2013 at 18:42
  • "by typing your text in an application (that supports it), do a screen shot of that, then place the screen shot in your image." that is excatly what i want to do and didn't know if it makes sense.
    – oberhamsi
    Jun 29, 2013 at 8:55
  • “…sub-pixel rendering only works when your type is on the x-axis of the screen.” That may be true of existing implementations, but it is possible to take advantage of subpixel antialiasing even for non–axis-aligned text. Depending on the display type, though, the results might not be as good as their axis-aligned kin.
    – Jon Purdy
    Jul 1, 2013 at 7:00
  • 1
    @JonPurdy yes it would depend on the screen, but note in this context, we're referring to 'baked in' font smoothing in the image, which wouldn't be able to adopt to any screen rotation other than the initial one that the rendered type was taken from.
    – DA01
    Jul 1, 2013 at 7:18

It makes sense to have subpixel AA fonts in images as long as the display the image is shown on has the same pixel layout.

  • 3
    “as long as the display has the same pixel layout” I think that pretty much means it doesn't make sense most of the time.
    – svick
    Jun 27, 2013 at 12:38
  • i couldn't find much about pixel layout but RGB seems to be very common.
    – oberhamsi
    Jun 27, 2013 at 12:45
  • Another way to word this is that sub-pixel smoothing is very much device-dependent. (At the very least, it's somewhat Operating System dependent)
    – DA01
    Jun 27, 2013 at 22:59
  • @DA01 that's a good way to put it. that's why i'm wondering how well it works if the subpixel AA is baked into the image as opposed to being created by the OS while rendering the font.
    – oberhamsi
    Jun 28, 2013 at 6:47

Simulating subpixel anti-aliasing in an image is very useful in case you are creating a mock-up for, say, a website. None of the regular type anti-aliasing options in Photoshop even remotely look like what a browser does with the very same font.

Making mockups with subpixel AA prevents surprises and customers going 'but the text doesn't look nearly as good as you showed us earlier!'

  • interesting, i'm more interested in actually deploying images with font in them to the web. would it make sense to have subpixel AA enabled for those?
    – oberhamsi
    Jun 27, 2013 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.