Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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.

share|improve this question
up vote 4 down vote accepted

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.

share|improve this answer
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 '13 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 '13 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 '13 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 '13 at 7:00
@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 '13 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.

share|improve this answer
“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 '13 at 12:38
i couldn't find much about pixel layout but RGB seems to be very common. – oberhamsi Jun 27 '13 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 '13 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 '13 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!'

share|improve this answer
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 '13 at 12:44

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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