Hey Matt, would you hone your questions a bit with specifics about your intent? Unless you want another potentially huge deluge of information around the subject of subpixels, antialiasing, graphics libraries, and gameboy advance homebrewing etc. (which is already abundantly available courtesy of John Haugeland over at miha’s flea’s knees thread) I would suggest narrowing your focus. This sounds like a general request on the subject – which is totally valid – but please tell us more about the contexts in which you are interested.

What file types support it?

For bitmap images, I can answer this unequivocally: any file type that supports color allows you to address subpixels. Also, the sharpest and most effective subpixel antialiasing/rendering is achieved at the border between pure white and pure black.

Sincerely,
William Leverette

Matt, you said you understand the concept so I'll write how I started: When I made my first subpixel design last year (only one word), I took some screenshots of OS rendering of black text. I chose and saved five colors of red and five of blue, each ranging from the lightest to the darkest. I think I first made some diagonals for exercise :-) Designing with subpixels is similar to pixel art, consequently you use its strategies: for example, working with 32× magnification and looking on 1× scale opened in the other window at the same time.

"What file types support it?"
I just add a maybe obvious information that the format has to be lossless (PGN or GIF) and "saved for web".

"How do you render type or graphics accurately using subpixels?"
You (or the viewer) has to have a LCD monitor, set in native resolution, with image displayed with 1× magnification. Monitor must not be used rotated and must have a RGB ordering of subpixels. According to Microsoft, a "very small number" of LCD screens use BRG ordering.

Subpixel art is appropriate in the smallest sizes, because there you can be better than rasterisers!

William, a "potentially huge deluge of information" is certainly a possible danger in this thread. :-)

>You (or the viewer) has to have a LCD monitor, set in native resolution, with image displayed with 1× magnification.

And, you don't need to make bitmaps to do this, you can use outlines. Just set the grid in your font design program to the number of pixels in the target font size, set the sample window of text to that size, and you are drawing outlines to a particular grid size, seeing the results live. And, you can reuse the outline for other sizes, other grids. http://fontbureau.com/test/franky/ is an example on a design far less tiny and interesting than Miha's. . . but you have to follow Miha's above instructions to see it correctly.

Cheers!

the only browser I see Frankly in is Safari. Why is that?

Mike, if you "view source" you'll see the links to the fonts. It would be nice if FB could zip them all up to make it easier for proofing in other browsers, alternately you'll need to download each font individually (there seem to be over 40) and install them in the normal way.

>the only browser I see Frankly in is Safari. Why is that?

It's just a demo, it's basic principle is independent of OS and I refuse to make anything but products for other browsers.
(And, as you can read MS steals everything it can get its hands on anyway. ;)

Cheers

I saw Franky some time ago. I viewed it in Safari on Windows and I could change the rendering from Mac to Windows … and I was confused: when you change the rendering type the font is also changed, strange.

Doing a handmade subpixel typeface for text at sizes such as 5 pixel x-height and maybe 4 is certainly not worth it. I am not sure for 3 pixel x-height, I didn't make any tests.

@mike_duggan
"the only browser I see Frankly in is Safari. Why is that?"
The Franky demo uses the @font-face CSS rule to call TTF fonts into the page.
Safari is probably the only browser you currently have installed that supports it.
You can also use: Firefox > 3.5.x, Opera 10, or Chrome with web fonts enabled. (Note: haven't tested the Franky page in any of these yet.)

Cheers, Rich

The Franky page is not displaying the desired fonts in Firefox 3.5.3 on Mac OSX 10.5.4, for whatever reason.

i agree with ken, same problem for me.

edit: i'm on 10.6.1

William Leverette:

Also, the sharpest and most effective subpixel antialiasing/rendering is achieved at the border between pure white and pure black.

From my understanding of your comment, you're saying that the division between the blue and red pixels (on an RGB LCD screen) is stronger than at other subpixel boundaries. This also seems to be the case to me, but why is that?

ClearType and other similar subpixel rendering schemes seem to use the same low-pass filter that is applied to each color (and this is corroborated by everything I've read, including Platt's paper). Here they seem to be ignoring any differences between divisions. Could sharper rendering be achieved by somehow taking into account this division?

Best wishes,
Stephen

@kentlew, simon, et al,

Yeah, I checked the Franky page against those browsers that support web fonts and both the font display and the JavaScript that does the switching is whacked.
IE is a complete bomb because the fonts are TTF. In the others, either the Franky font doesn't display or the JavaScript switcher doesn't work.
I'm sure it can be made to work cross-browser but the @font-face syntax needs re-doing, so does the JavaScript, and EOT files need to be created for IE.
I think the Franky page is a really interesting exercise.
It's an interesting and clever solution to a very real problem. And there may be some way to consolidate the fonts into one file to create a more practical solution, who knows.
I even volunteer to try and fix it.
But if the fonts involved are not free to download outside of browser display and manipulate as needed of course no can do.

@mattmc
I'm a little confused by this sub-pixel image thing. Is this a way to use a screen shot to make a sharper bitmap image of a font? In other words, to use the LCD screen's x-axis sub-pixel rendering to create better anti-aliasing?

>And there may be some way to consolidate the fonts into one file to create a more practical solution, who knows.

Done. It's called TrueType for FreeType.

Cheers!

@mattmc

Thomas Fuchs, the creator of the script.aculo.us Javascript library has created something called Textorize which uses the Mac OS X rasterizing engine to create bitmap text he claims is sharper and better anti-aliased than what you can get out of Photoshop or ImageMagick. (They do look good, Windows rendering included.)
Intro with slideshow here:
http://mir.aculo.us/2009/09/29/textorize-pristine-font-rendering-for-the...

And now, it seems, there's a new website devoted to it:
http://textorize.org