19

I'm a developer, I'm not a graphic designer. But there's one question that bugs me every since I've noticed it some years ago.

Anti-aliasing is a method for removing the sharpiness from high contrast divisions, such as character edges and geometric forms, if there's someone who doesn't know.

When you get an anti-aliased character written in black on a white background, and you zoom in to see the pixels, there are colors different from the ones found in gray-scale, which for me seems ilogical, since we only need to make a smooth transiction from black to white.

enter image description here

Question: Why are colors different from the ones found in gray-scale used for anti-aliasing a black character in a white background ?

PS.: I'd create the "anti-aliasing" tag if I had enough reputation.

Update: I've thought of a theory now.
If the letters are intended to be displayed in a computer monitor, and the smallest portion of a screen that can be black is an entire pixel composed of three little lights, that would cause the smallest dot in any letter to be fairly large, but if the anti-aliasing composed by surrounding or inner dots can be represented for only 1/3 of a pixel with some assistance from the color to the side that would mean that letters could be way smaller.

Is that it ?

Improve this question
4
  • 5
    That's exactly it. It's called 'sub-pixel rendering': en.wikipedia.org/wiki/Subpixel_rendering
    – DA01
    Feb 14, 2011 at 20:03
  • 1
    In font rendering, grayscale "smoothing" is usually called anti-aliasing and that colourful version is called subpixel rendering. In addition to @DA01's link, see also: en.wikipedia.org/wiki/Font_rasterization
    – Jari Keinänen
    Feb 14, 2011 at 20:57
  • 1
    please re-post your update as an answer when you get a chance :)
    – Hemi
    Feb 14, 2011 at 22:36
  • Whoa, I've got it right after all.. thanks for the links and explanations everyone!
    – MarceloRamires
    Feb 15, 2011 at 1:47

2 Answers 2

Reset to default
10

This is called clearType in windows (or sub-pixel rendering like Marcelo said) The idea is that instead of using 1 value for 1 pixel:
(127,127,127) < Gray

we can make the left side of this pixel less intense and the right side more
(55,127,185) - Blueish tint

and then the same for the right sided pixels
(185,127,55) - Orange ting
below it shows (no AA) - (Early Clear Type) - (Regular AA) - (Latest Clear Type)
enter image description here

In my opinion it only works well for small fonts (like the one you are reading now)
For regular graphics you use regular AA (In fact photoshop does not support clearType)
Hope this helps! Enjoy

Improve this answer
1
  • It took me a while to understand this answer. What helped was to understand that if a pixel on an LCD screen has a square shape, inside of which there are three divisions horizontally (red, green and blue), then besides using the entire pixel "squares" themselves to define the shape, what ClearType (and similar) do is calculate a specific color for the pixel so that the 3 divisions inside the square of each pixel will be lit up or dimmed down, to help to even further define the silhouette of the shape being drawn.
    – R. Navega
    Nov 26 at 3:42
3

My guess was right after all:

If the letters are intended to be displayed in a computer monitor, and the smallest portion of a screen that can be black is an entire pixel composed of three little lights, that would cause the smallest dot in any letter to be fairly large, but if the anti-aliasing composed by surrounding or inner dots can be represented for only 1/3 of a pixel with some assistance from the color to the side that would mean that letters could be way smaller.

Check the comments in the questions for some further help from DA01 and koiyu (thanks).

Just for reference, here are the Wikipedia links in the comments from DA01 and koiyu:

Improve this answer

Your Answer

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

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