Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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 ?

share|improve this question
4  
That's exactly it. It's called 'sub-pixel rendering': en.wikipedia.org/wiki/Subpixel_rendering –  DA01 Feb 14 '11 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 –  koiyu Feb 14 '11 at 20:57
1  
please re-post your update as an answer when you get a chance :) –  JamesHenare Feb 14 '11 at 22:36
    
Whoa, I've got it right after all.. thanks for the links and explanations everyone! –  MarceloRamires Feb 15 '11 at 1:47

2 Answers 2

up vote 7 down vote accepted

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

share|improve this answer
    
Thank you! that's clarifying! =) –  MarceloRamires Feb 15 '11 at 10:31

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:

share|improve this answer

Your Answer

 
discard

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.