the bee's knees

September 17, 2009 8:49 AM

A talented Slovenian typographer creates the first handmade subpixel type family, ever.
posted by quoquo (125 comments total)

It can be used in favicons and for … well, one reason is enough

go you, dude. go you.

also, subpixel makes my eyes hurt.
posted by shmegegge at 8:52 AM on September 17, 2009

So?
posted by OmieWise at 8:52 AM on September 17, 2009

I don't know if I understand what is going on or why this is special. Could someone explain this to a non-font-geek?
posted by Falconetti at 8:54 AM on September 17, 2009

This is what the font is actually made of, Falconetti.
posted by flatluigi at 8:55 AM on September 17, 2009 [12 favorites]

flatluigi, the color blocks are a magnification of the small text? Really?

If so, that is a pretty awesome optical manipulation.
posted by oddman at 8:58 AM on September 17, 2009

The next EULA I click through might actually consist of a single page, now...
posted by $0up at 8:58 AM on September 17, 2009 [8 favorites]

I clicked on the link. Now what?
posted by iamkimiam at 8:59 AM on September 17, 2009

Can we get some context here? Why is this groundbreaking? Me no understand.
posted by spicynuts at 9:00 AM on September 17, 2009 [1 favorite]

Why is this post tagged "trolling?"
posted by OmieWise at 9:00 AM on September 17, 2009 [3 favorites]

I think possibly I am confused by what is meant here by either x-height or 3 pixels, because that looks to be 7px high to me.
posted by Artw at 9:00 AM on September 17, 2009

That is stunning.
posted by Optimus Chyme at 9:01 AM on September 17, 2009 [1 favorite]

flatluigi, the color blocks are a magnification of the small text? Really?

Yes, really, and this is in fact the key to sub-pixel rendering. If you look at an LCD monitor really closely, what appear to be square pixels are actually made up of three separate vertical stripes, one red, one green, and one blue.

By playing around with the colour of the pixel, you can individually control the brightness of each of these three stripes. This allows you to do clever things like drawing a dot that is made up of the right 2/3rds of one pixel and the left 1/3rd of the one beside it. Or draw lines which are less than 1 pixel wide.

Normally this is done by software since it's incredibly difficult and tedious. This guy is doing it manually. Neat!
posted by FishBike at 9:03 AM on September 17, 2009 [18 favorites]

I think possibly I am confused by what is meant here by either x-height or 3 pixels, because that looks to be 7px high to me.
posted by Artw at 9:00 AM on September 17

X-height is the distance between the baseline and the mean line.
posted by Optimus Chyme at 9:03 AM on September 17, 2009 [1 favorite]

subpixel rendering?
posted by Artw at 9:03 AM on September 17, 2009

the color blocks are a magnification of the small text?

Brains and eyes are funny things, right?
posted by MrMoonPie at 9:03 AM on September 17, 2009

flatluigi, the color blocks are a magnification of the small text? Really?

Yep. It's pretty impressive.
posted by mr_roboto at 9:04 AM on September 17, 2009

Artw: I think possibly I am confused by what is meant here by either x-height or 3 pixels, because that looks to be 7px high to me.

The 3-pixel x-height refers to the middle block of the character design, the part with no ascenders (like f, h, l, or any capitals) or descenders (like g, y, j).
posted by shakespeherian at 9:06 AM on September 17, 2009

Look at the picture flatluigi posted. You've got to admit that's interesting. I'd even call it groundbreaking, as I've never seen a font this microscopic. Three pixels tall, man!
posted by synthedelic at 9:07 AM on September 17, 2009

if you want to understand how cool it is, get your eyes really close, but prepare for eyestrain. there's detail in there that is smaller than one pixel.
posted by shmegegge at 9:08 AM on September 17, 2009

This is amazing because the typographer uses a variety of colors arraigned in such a way that it appears that there are clear black and white letters that are actually too small to be displayed clearly by your screen.

Impossibly tiny, yet legible black and white characters made out of blue and brown pixels.
posted by Freen at 9:09 AM on September 17, 2009 [4 favorites]

This reminds me of pointillism. Both require the creator of a work to work at a micro level to create something that, viewed at a macro level, appears wholly dissimilar. Very cool.
posted by Pope Guilty at 9:09 AM on September 17, 2009

Yeah, subpixel rendering. What's neat to me isn't just that he used colours, but he used multiple values of colours. So the font is effectively anti-aliased, too.

It should only work on LCDs, and only LCDs with the exact colour cell layout. OTOH it's perfectly legible on my LCD turned 90 degrees, which should be all wrong. I have to really squint to see fringing. (I run Cleartype on the vertical monitor too. Same all-wrong-yet-readable thing. I guess total luminance is more important than specifics of hue and saturation.)
posted by Nelson at 9:09 AM on September 17, 2009 [1 favorite]

I think perhaps I mean what problem does this solve. Or is it simply just neat?
posted by spicynuts at 9:12 AM on September 17, 2009

To everyone who doesn't understand what's going on here, go read FishBike's comment. This is cool stuff to be doing by hand.
posted by Richard Daly at 9:13 AM on September 17, 2009

Well, with explanation it actually seems pretty cool. Too bad the post didn't contain any context to help those who wouldn't have understood otherwise.
posted by OmieWise at 9:14 AM on September 17, 2009 [2 favorites]

I don't know if I understand what is going on or why this is special. Could someone explain this to a non-font-geek?

That, good sir, is an impossible task. Let us revel in our ignorance of this matter.
posted by hal_c_on at 9:14 AM on September 17, 2009

Speaking as someone who hand-set single color pixels for a pixel display font (once, and only once for a personal project) this is really freakin' cool. Good on font geeks for making the world a better, more readable place.
posted by 1f2frfbf at 9:17 AM on September 17, 2009

Why is this post tagged "trolling?"

Egads! The dreaded 1/3 ratio!


Iono.
posted by cashman at 9:17 AM on September 17, 2009

Spicynuts, I'll try to explain the problem.
This Slovenian's type is *really* small. 3 pixels tall.

Imagine the character "E". How would you represent that with only three pixels?
You could use one black pixel for the top horizontal stroke, one black pixel for the middle horizontal stroke, and one black pixel for the bottom horizontal stroke... but then there's no white pixels between the strokes, and it just looks like a solid black mass.

This type apparently cheats. It relies on the slight positional offset in the hardware components of a pixel.
posted by Richard Daly at 9:20 AM on September 17, 2009 [1 favorite]

Interesting. I recall that there's a variety of sub-pixel layouts (some shaped like triangles or straight lines or hexes) and what trips me up is how he could engineer a font that takes advantage of subpixel rendering without knowledge of the hardware it'd be displayed on.
posted by boo_radley at 9:25 AM on September 17, 2009

Mac users can hold down the Control key and then either scroll with the mouse wheel or drag two fingers on the trackpad to zoom in on the font image.
posted by Combustible Edison Lighthouse at 9:27 AM on September 17, 2009

Invisible to anybody over 45.
posted by tkchrist at 9:27 AM on September 17, 2009

Well, E isn't three pixels tall. But e is, which is stil quite impressive.
posted by Artw at 9:28 AM on September 17, 2009

If it's 3 pixels tall, how is it subpixel? Sorry to those who keep "explaining" it, but you keep repeating the fact that it's 3 pixels.
posted by desjardins at 9:29 AM on September 17, 2009

Richard Daly: "This Slovenian's type is *really* small. 3 pixels tall."
The x-height is three px. The total height seems to be seven or eight.
posted by boo_radley at 9:30 AM on September 17, 2009

So, what are the implications of this? Is it a breakthrough in type design? Did somebody defy internet 'rules' in some way? Or is it just a cool picture?

Maybe this post could be fleshed out a little more. Some background, history, or future directions for font design/creation.
posted by iamkimiam at 9:32 AM on September 17, 2009 [1 favorite]

Interesting. I recall that there's a variety of sub-pixel layouts (some shaped like triangles or straight lines or hexes)

Ordinary LCD monitors are pretty much all split the pixel vertically into rectangle, although the layout of the three colours varies.

what trips me up is how he could engineer a font that takes advantage of subpixel rendering without knowledge of the hardware it'd be displayed on.

I'm sure he just based it on the most common layout.
posted by cillit bang at 9:33 AM on September 17, 2009

If it's 3 pixels tall, how is it subpixel? Sorry to those who keep "explaining" it, but you keep repeating the fact that it's 3 pixels.

It's not subpixel as in the letter are smaller than a pixel. It's subpixel because the letters use features that are smaller than a pixel.
posted by borkencode at 9:36 AM on September 17, 2009 [1 favorite]

A good way to understand what's happening: Look at the picture that flatluigi linked to.

Then look at it again, while squinting heavily.

This type apparently cheats. It relies on the slight positional offset in the hardware components of a pixel.

I don't think so. If that were the case, it wouldn't be legible when you squint at a magnified version of it, would it?
posted by Flunkie at 9:37 AM on September 17, 2009 [1 favorite]

desjardins: If it's 3 pixels tall, how is it subpixel? Sorry to those who keep "explaining" it, but you keep repeating the fact that it's 3 pixels.

Take a look at this image. The term 'subpixel' is a little misleading-- the way that it works is that, because each pixel on an LCD monitor is made of three tiny stripes (R, G, and B, or B, G, and R in some cases), if you put reddish pixels next to blueish pixels, and make the relative color levels just right, the red bit and the blue bit occupy only those specific stripes of the monitor's pixels, and your eye sees it as one pixel that lives partially on one monitor pixel and partially on another (see the 'Examples' section on the Wikipedia page).
posted by shakespeherian at 9:39 AM on September 17, 2009

Okay, you will hear "ems" refer to width and "exs" referring to height if you mess about with CSS. Let us ignore the freakin' horrible state of affairs with implementation of the ex by various browsers and just think of it as a vertical height unit.

Imagine it, if you will, as the height of the lowercase letter x. Now imagine that x floating on the barred paper you learned to print upon as a child. Letters with descenders (q, p) dip below the bottom line where the x rests. Letters with ascenders (b, d) have parts that rise up the line where the top part of the x lies.

Letters that would have neither would be c, e, o and such. So, while some individual letters might take more than three pixels to show in height, the x-height (the height of the middle body of letters) is three pixels.

The subpixel part comes from the fact that any given pixel is not a perfect overlay of red upon blue upon green in an LCD monitor. Rather, they rest next to one another in these little stripes. At a distance, your eye blends these.

The subpixel construction uses these stripes of color to trick your brain into seeing full letters — recall dithering, with gifs? This is a similar principle ... at a distance, these stripes mesh together in a single color. However, because there is a displacement of the colors, it's just enough perceptually to create a structure, and therefore a shape.

One of the ways you can see this is to create in Photoshop a thin horizontal bar of pure blue, one of pure red, and one of pure green, and lay them one under the other. They do not quite line up. You could do this same trick vertically, with a different arrangement.

I can't wait to look at this stuff on my old Sony Trinitrons.
posted by adipocere at 9:41 AM on September 17, 2009 [2 favorites]

I took a macro photo of my monitor.
posted by Pyry at 9:42 AM on September 17, 2009 [60 favorites]

I'm not a font expert, but it seems like people in this thread have done a pretty good job explaining it so far. Sub-pixel refers to the fact that the font uses parts of a pixel to create the font. Like, if you imagine a font where the letter l is just a stack of individual pixels, in this font it is not even that wide.
posted by snofoam at 9:44 AM on September 17, 2009

Imagine the character "E". How would you represent that with only three pixels?

Clarification: the capital E is 5 pixels tall. It's the lower case letters, minus ascenders (like those on f, h, l, or any capitals) or descenders (for g, y, j), as shakespeherian noted earlier. Oddly, the lowercase s and z require descenders to work with a 3-pixel x-height, as noted by Thomas Phinney on the linked thread.
posted by filthy light thief at 9:45 AM on September 17, 2009

On the LCD monitors this font is designed for, each pixel is made up of three bars: Red, Green and Blue going from left to right. A vertical pure red line is physically slightly to the left of a pure blue line, even if they're on the same pixel.

So you can make it look as if something is between two pixels by making the pixel on the left blue, and the pixel on the right red. And you can transition from one side to the other by changing the brightness of the red and blue.
posted by lucidium at 9:47 AM on September 17, 2009

ok ok ok. everybody:

artw's comment links to a wikipedia article on sub pixel rendering, and fishbike's comment is a decent explanation of how it works.

basically, it's a font made with details that are less than a pixel wide. it simulates a black line smaller than a pixel by using custom values in the RGB blocks that make up a single pixel. typically, you need software to achieve things like this. it makes very tiny things look antialiased even though they're too small for antialiasing, and can improve the anti-aliasing on standard sized fonts. (if you have a mac, go to System Preferences and check out the "appearance" section. there's a checkbox for "use LCD font smoothing." that's sub pixel rendering to smooth out the anti-aliasing on your fonts. it only works on LCDs.)

now, what this dude did is he created a font set BY HAND using sub pixel rendering which is far smaller than you could normally produce while still having that level of clarity on a computer display. thanks to sub pixel rendering, it's still remarkably readable at an x-height of 3. (NOTE: THE X HEIGHT IS NOT THE FULL PIXEL HEIGHT OF THE FONT. as Optimus Chyme already said, the x height is the difference between the base line and the median. roughly half the height of the font, though individual letters in said font will have different heights.)

now, as others have mentioned, you can SORT of see what kind of blocks these letters are made up of by zooming into his font. but be aware, once you zoom in, you're no longer rendering as sub pixels, so you're not really seeing what your screen would display anymore. instead, you're seeing the pixels he used to make it because he knew that that arrangement of those colors would create the desired effect at the pixel level when rendered. i think. his process is kind of a mystery to me. all i know is once you zoom in, you're not seeing the actual font as your screen displays it anymore, you're seeing a weird approximation of pixels.

as to the question of why or what for: as I quoted upthread, he says this is basically for favicons and one use is enough, which is sort of a cutesy way of saying "i wanted to do it, that's the only use I can think of, but I just wanted to try it anyway."

hope this helps. yes, this fpp needed more info at the start.
posted by shmegegge at 9:48 AM on September 17, 2009 [3 favorites]

adipocere: One of the ways you can see this is to create in Photoshop a thin horizontal bar of pure blue, one of pure red, and one of pure green, and lay them one under the other. They do not quite line up. You could do this same trick vertically, with a different arrangement.

This is an excellent way to explain how this works. Three cheers.
posted by shakespeherian at 9:55 AM on September 17, 2009

spicynuts: "I think perhaps I mean what problem does this solve. Or is it simply just neat?"

If "must solve a problem" was the requirement for a FPP, this would be a very quiet place.
posted by Plutor at 9:58 AM on September 17, 2009 [2 favorites]

Sorry for the lack of info in the initial post. Stage fright!
And thanks to those who explained how this works!

As for the trolling tag, if you dig a little deeper into the discussion in the linked thread, you'll come across a guy called StoneCypher, who, although well informed about the subject, wrongfully claims that this has been done before and get's pretty psyched about it.
posted by quoquo at 9:58 AM on September 17, 2009 [4 favorites]

If it's 3 pixels tall, how is it subpixel? Sorry to those who keep "explaining" it, but you keep repeating the fact that it's 3 pixels.

The width of the lines used to create the letter forms are (or appear to be) smaller than 1 pixel.

Follow me through this crazy metaphor.

Its like, taking a waffle, and filling in the squares with syrup. You can write the letter E on a big waffle, with 5 squares high, 5 squares across. Each horizontal line of the E has a row of blank waffle squares. Now try to write the letter E, one half of a square to the right. You would end up with two vertical rows, halfway filled in with syrup. Now try to write the letter E, but I only give you a 3x3 waffle. You would just have a big soggy waffle, with all the squares filled in.

Normally you can't get a finer resolution than one pixel. Sub-pixel rendering takes advantage of LCD screen's RGB striped pixels and creates the illusion of a 1/3 pixel. Normally there is nothing smaller than a pixel, (or a waffle square). In fact, each of these pixels are set to be a single solid color in photoshop, but they take advantage of RGB striped pixels to appear to be darker over one third of the pixel. Where this shit gets real crazy, is when you combine your 1/3 pixel with neighboring pixels to create an offset pixel. This is like a square of syrup centered over 4 corners of a square.
posted by fontophilic at 9:58 AM on September 17, 2009

Ok, so I'm finally able to read that color of blocks as 'ipsum dolor' and I think I understand how this whole subpixel thing is working.

One more question: those blocks are actually the color of a single pixel, so represent the combined effect of the three constituent subpixels, right?

If so, then it's oddly satisfying when miha says

Also a little suprising fact, maybe: in all lowercase letters there are only three gray pixels (and all three are in “z”)!

since that means that at least one of the three subpixels is activated at a different level than the rest within each pixel, within each letter (except a few in z). Painstaking work, and quite impressive. Thanks to everyone for both asking and answering the questions that led me to understand why this was so cool!
posted by scrutiny at 10:00 AM on September 17, 2009

It should only work on LCDs

I'm viewing it on a CRT (hi, I'm DevilsAdvocate, just arrived from 1997) and it's perfectly legible to me.
posted by DevilsAdvocate at 10:04 AM on September 17, 2009

One more question: those blocks are actually the color of a single pixel, so represent the combined effect of the three constituent subpixels, right?

Yes, that's it. The colour isn't desirable itself, just a means to an end--specifically, getting the red, green, and blue stripes of each pixel to light up the desired amount.
posted by FishBike at 10:04 AM on September 17, 2009

Zooming in on the ipsum dolor text in my other, cheaper monitor produces a significantly less impressive effect. You get what you pay for, I suppose.
posted by Pyry at 10:06 AM on September 17, 2009 [7 favorites]

Normally this is done by software since it's incredibly difficult and tedious.

It seems like the best way to do this manually would be to have an LCD monitor emulator tool of some sort. So you would have a window that basically looks like Pyry's photo, and you could tweek the individual pixel colors until it looked right. Pretty much like zooming in to an image in a paint program, but realistic on a sub-pixel level.
posted by burnmp3s at 10:07 AM on September 17, 2009

I'm viewing it on a CRT (hi, I'm DevilsAdvocate, just arrived from 1997) and it's perfectly legible to me.

As a side-effect of sub-pixel rendering, pixels are not just funny colours but also different brightnesses. I'm thinking this comes out close enough to the older style font anti-aliasing stuff (using various shades of gray and not just black or white pixels) that the result is legible. Just maybe not as sharp-looking as it is on the intended display devices.
posted by FishBike at 10:08 AM on September 17, 2009

I can't wait to look at this stuff on my old Sony Trinitrons.

There's nothing in a Trinotron that would make one pixel align perfectly with any particular three stripes. Essentially the aperture grille performs an analog scaling/resampling of the image to the display's native resolution (on a Trinotron it's in the horizontal dimension only), whatever that might be.
posted by cillit bang at 10:10 AM on September 17, 2009

I'm viewing it on a CRT (hi, I'm DevilsAdvocate, just arrived from 1997) and it's perfectly legible to me.

Subpixel rendering is pretty legible on a normal monitor. If you're running Windows, turn on ClearType. That's the Microsoft subsystem for rendering any regular (vector) font with subpixels. You'll see that you can read that, too, and you might decide that it in fact looks better (because ClearType also smoothes out the curves - it 'antialiases' each letter).

Still, if you view it on a LCD monitor, you'll go from 'pretty legible' to 'ZOMG THAT SHIT BE SHARP YO'. It's like going from 20/40 vision, where you can see pretty much everything you need to see well, to 20/10 vision, where everything is crisp and awesome and holy crap is that an eagle on that roof and wow golly gee.
posted by suckerpunch at 10:13 AM on September 17, 2009

just sneeze on your monitor and you'll see
posted by Baby_Balrog at 10:13 AM on September 17, 2009

Post needs a pearlsbeforeswine tag.
posted by Liver at 10:13 AM on September 17, 2009 [8 favorites]

(come to think of it, depending on the exact alignment of the beams, a color CRT should inherently do a form of subpixel rendering on every image)
posted by cillit bang at 10:13 AM on September 17, 2009

People keep asking for the "significance" of this or keep saying "so what." As is mentioned in the original post by the creator of this font, it can be used in favicons. Obviously, this is not game changing, earth shattering, or likely to alter the life paths of the laity.

It's just an example of someone pushing technology a little further. Being a little more creative, a little more innovative, and that's fascinating and impressive. This typeface will not cut minutes off your morning commute, tone your abs, or reduce the impact of human action on global climate, but it's cool as hell.

And it gives other smart people ideas, which is always good.
posted by Brosef K at 10:16 AM on September 17, 2009 [8 favorites]

Cool.
posted by Guy_Inamonkeysuit at 10:28 AM on September 17, 2009

Seems to be a lot of comments in that thread that its not remotely the "First Evar".
posted by Ogre Lawless at 10:28 AM on September 17, 2009

I'm looking at it on a LCD monitor, and I see a lot of color fringing, and it definitely doesn't read as black. I'm not sure how much worse it could look on a CRT.
posted by smackfu at 10:32 AM on September 17, 2009

ts;dr
posted by weapons-grade pandemonium at 10:36 AM on September 17, 2009 [2 favorites]

ts;cr

Except that I could read it! Sweet!
posted by Salvor Hardin at 10:49 AM on September 17, 2009

I want to write something in the enlarged approximation of the typeface and put it on a t-shirt. Then, when I'm far away, people will be able to read it, but as they get closer, it'll fall apart into pixels.

Yeah!

And, yes, I understand that it won't work exactly right because my t-shirt doesn't split each pixel vertically into red, green, and blue subpixels. I can deal.
posted by ocherdraco at 10:58 AM on September 17, 2009 [2 favorites]

now we need somebody to make handmade chuck closian subpixel images.
posted by quoquo at 11:16 AM on September 17, 2009

Normally this is done by software since it's incredibly difficult and tedious.

More importantly, because software has access to the computers knowledge of what its display hardware is, and so can apply the correct kind of sub-pixel rendering to get a successful result with that specific hardware.

This font doesn't work on some people's displays (which no doubt is contributing to some of the head-scratching), and on some, it works brilliantly. And others, it works, but not optimally...

>>This type apparently cheats. It relies on the slight positional offset in the hardware components of a pixel.

>I don't think so. If that were the case, it wouldn't be legible when you squint at a magnified version of it, would it?"

It's not legible when squint at the magnified version of it. If it appears similarly legible when squinting, then that most likely means that the font does not work on your display and so you haven't seen it working, due to your display having an arrangement of sub-pixel elements that differs from what it expects.

It's cool, but it's also something cool that you use for yourself - you wouldn't want to use it in professional software or websites unless the target audience had known display hardware. (Eg. software bundled with a laptop for use on that laptop, websites which polled for display hardware, etc)
posted by -harlequin- at 11:17 AM on September 17, 2009

The font itself is pretty neat, but the thread that's linked from the fpp is hilarious. Apparently the thread title has been changed at least once or twice. It seems when it was started, the guy was claiming the first subpixel font ever, which then changed to "Well, I can't find any other examples of a handmade subpixel font(oh, wait except this one for the Apple II)" and ultimately ended up as "no one else ever made a whole subpixel font family, so there!" At least, that's my read on it.

*Please note that the quote marks there are paraphrases, not direct quotes.
posted by owtytrof at 11:20 AM on September 17, 2009

(Well ok, it is fairly legible when squinting, but let's call that semi-legible - you don't get the detail of where the lines are when it is working properly, just the overall density)
posted by -harlequin- at 11:22 AM on September 17, 2009

This was a very interesting post. The discussion on Typophile took a sudden turn when a guy named John Haugeland started blasting the designer for calling his subpixel font "first ever" (although his rants contain a lot of interesting information). You see, we have needed fonts like this since over thirty years ago, for screens (gadgets, games etc. where the type is necessarily very small). Difference is, Miha "the Slovenian" did his font by hand in Photoshop, whereas other subpixel fonts are generated by some program. Also, Miha's font is extremely legible and elegant, if you can say that for a 3px x-height font.

Anyway, think about legibility and elegance of type next time you browse the internets using your small screen handheld.
posted by acrobat at 11:35 AM on September 17, 2009 [1 favorite]

so...does the color of the pixels change depending on what it's next to? for example is the leftmost pixel of an 'e' the same shade when it follows an 'o' as when it follows an 'l'? do they overlay?

also, this is really cool!...there is a big difference between fonts that are automatically rendered smaller and those that are hand-tooled to be tiny tiny tiny
posted by sexyrobot at 11:37 AM on September 17, 2009

Brains and eyes are funny things, right?

In this case, it's mostly your LCD monitor, not your brain.
posted by delmoi at 11:39 AM on September 17, 2009

If it's not in comic sans, I'm not interested.
posted by blue_beetle at 11:44 AM on September 17, 2009

this is beautiful and fantastic.
posted by lapolla at 11:49 AM on September 17, 2009

Pyry's comparison shot is awesome. It makes me want to go and macro-photo a whole bunch of LCD screens to compare them.

And this font is wonderful too. Even if it has been done before, it's one of those intricate tasks, like watchmaking, that you just have to applaud for the sheer dedication of the maker.
posted by pivotal at 11:53 AM on September 17, 2009

/me puts font nerd hat on: John Haugeland indeed gives some very interesting facts, but I can authoritatively say this one is incorrect: "The Apple Newton and the Palm III both had SPAA color fonts."

Having developed freeware fonts for the Apple Newton 2.0 and 2.1 systems (which I obliquely referenced above) the display fonts are 1 bit pixel fonts. The Apple NewtonOS did many interesting things with fonts such as support vector and bitmap in a single font for viewing and printing, but it did not generate color fonts, or use sub-pixel rendering for those fonts.
(If you're really interested in this minutiae, read this doc (pdf) from Apple.)

/font_nerd_hat_off

Anyway, what's really impressive to me is that this guy is doing these fonts in Photoshop on a pixel by pixel basis and tweaking it to look right by eye. That's serious geek cred.
posted by 1f2frfbf at 11:57 AM on September 17, 2009 [2 favorites]

For all of you who don't quite understand the practical application of this technology, it takes that miniscule text that is a royal pain in the ass to read and makes it smaller.
posted by digsrus at 12:03 PM on September 17, 2009 [3 favorites]

This is pretty nice, I can see where it would be useful.

(I also expect to see a 19-year-old designer's web site the uses it as the only font soon enough.)
posted by maxwelton at 12:04 PM on September 17, 2009

good gravy that john haugeland guy is such a dick
posted by Optimus Chyme at 12:10 PM on September 17, 2009

Wow. I saved the picture flatluigi posted to my desktop, and the preview icon is a perfectly legible (but teensy) ipsum dolor.
posted by gamera at 12:15 PM on September 17, 2009

For all of you who don't quite understand the practical application of this technology, it takes that miniscule text that is a royal pain in the ass to read and makes it smaller.

web 2.1
posted by Blazecock Pileon at 12:25 PM on September 17, 2009

Anyway, what's really impressive to me is that this guy is doing these fonts in Photoshop on a pixel by pixel basis and tweaking it to look right by eye. That's serious geek cred.

In Photoshop? Yeah that is impressive.

I tried it once. It started just trying to do a few headlines. The client liked a particular treatment I made the mistake of custom comping by hand, pixel by pixel. And then they wanted like 40 separate headlines. So I thought, hey, I'll make a font in Photoshop. So not like thought it was going to go.
I gave up after about 15 hours invested. Zooming in and out started to make me slightly insane.
posted by tkchrist at 12:30 PM on September 17, 2009

This was one of those things that I first looked at and thought "Wow, that's really small, but so?.."

And as the implications of exactly what I was looking at dawned on me, the grin on my face got progressively bigger and bigger.

Neat.
posted by quin at 12:40 PM on September 17, 2009

There are many ways to define x-height, but you might as well just model it as the height of the lower-case x. Typefaces with high or large x-height include Futura and Helvetica; typefaces with low or small x-height include Mrs Eaves and Weiss.

In this respect the definition is not at all like the definitions of en space and em space, which aren’t related to the letters N and M (except in debatable deep history).
posted by joeclark at 1:09 PM on September 17, 2009

ZOMG THAT SHIT BE SHARP YO!

I just wanted to say that.
posted by desjardins at 1:26 PM on September 17, 2009

filthy light thief: "Oddly, the lowercase s and z require descenders to work with a 3-pixel x-height, as noted by Thomas Phinney on the linked thread."

If this is making sense in my head correctly, that is because this subpixel rendering is assuming the vertical bar configuration. You can increase granularity on the left or right, since [&nbsp||][|  ] looks the same as [|||][   ] except shifted slightly. But since you can't selectively turn off the top of the pixel you can't save any space on latitudinal features.

Taking a vertical cross-section in the middle of an "s" or "z" results in (at minimum) five distinct topographical elements: on/off/on/off/on. Since we can't save any space with subpixel rendering along that axis, those characters require at least five pixels and thus the descender.

At first I thought I was mistaken about something here, because I couldn't understand how they'd get "e" into three vertical pixels (since it has the same middle cross-section). Then I looked closely and I'm pretty sure the "e" and "c" are identical which is fucking cheating.
posted by Riki tiki at 1:27 PM on September 17, 2009

Frick. That should've been "[ ||][|  ] looks the same as [|||][   ]".
posted by Riki tiki at 1:32 PM on September 17, 2009

I can tell the e and c apart, though not in the italicized version.
posted by Kattullus at 1:35 PM on September 17, 2009

Oh, okay, I was looking at the italicized version. They solve it in the standard font by giving lowercase "e" a descender.
posted by Riki tiki at 1:38 PM on September 17, 2009

So... is StoneCypher full of shit or merely really, really annoying (but right)?
posted by Kattullus at 1:43 PM on September 17, 2009

Kattullus: he's being really, really annoying, and while what he says is technically correct, it completely misses the point. He repeatedly pointed out examples of algorithmically rendered fonts, combined with stupid tangents into color spaces and whatnot in an attempt to increase his dork cred.
posted by zsazsa at 1:51 PM on September 17, 2009 [1 favorite]

Kattullus: He's not wrong, but he's not really right either. This sort of thing has been done before, but usually on the fly by software, not by eye in photoshop. Also: many of his examples are flawed, and at least one is plain wrong, as I said above.

On preview: zsazsa has it.
posted by 1f2frfbf at 1:56 PM on September 17, 2009 [1 favorite]

He repeatedly pointed out examples of algorithmically rendered fonts

Maybe some of them are, but surely the Apple II's font must've been hand-drawn, no?
posted by equalpants at 2:00 PM on September 17, 2009

Kattullus: "
So... is StoneCypher full of shit or merely really, really annoying (but right)?"

Check out his blog.
posted by boo_radley at 2:36 PM on September 17, 2009

Riki tiki: Then I looked closely and I'm pretty sure the "e" and "c" are identical which is fucking cheating.

In the linked thread he says he isn't done with the 'e' yet; right now it's just the 'c' as a placeholder.
posted by shakespeherian at 2:37 PM on September 17, 2009

Great work, but I doubt he's the first. Beagle Bros. Soft Seventy fonts were probably created by hand since we didn't have the technology back then to do it any other way. And they were certainly designed for subpixel rendering.

Damn I feel old.
posted by chairface at 2:56 PM on September 17, 2009

I'm wrong. I booted up Soft Seventy in an emulator to check. The font is damn skinny but does not appear to use the Apple II's goofy subpixel problem.
posted by chairface at 3:07 PM on September 17, 2009

Hmm, he might not have done lowercase E because it may not be possible in only three vertical pixels. I think you'd need five, because it has two holes.
posted by Malor at 3:16 PM on September 17, 2009

Alright, now which one of you bastards is going to recreate MeFi in 3 x 3 pixel format?

Come on.

Make sure you test it on the appropriate hardware.
posted by Brosef K at 3:42 PM on September 17, 2009

Is this something I'd need to have a computer to understand?
posted by JustAsItSounds at 5:20 PM on September 17, 2009 [1 favorite]

So...now I can fit more information on my computers?
posted by Salvor Hardin at 5:49 PM on September 17, 2009

Scaling down monitor-comparison.jpg looks really crazy on a computer monitor. Cheggit.
posted by tehloki at 6:39 PM on September 17, 2009

So when can I download and use these fonts?
posted by Vectorcon Systems at 7:54 PM on September 17, 2009 [1 favorite]

Use the following as a bookmarklet to zoom the image in and get a rough idea, if you want.


javascript:(function(){%20function%20zoomImage(image,%20amt)%20{%20if(image.initialHeight%20==%20null)%20{%20/*%20avoid%20accumulating%20integer-rounding%20error%20*/%20image.initialHeight=image.height;%20image.initialWidth=image.width;%20image.scalingFactor=1;%20}%20image.scalingFactor*=amt;%20image.width=image.scalingFactor*image.initialWidth;%20image.height=image.scalingFactor*image.initialHeight;%20}%20var%20i,L=document.images.length;%20for%20(i=0;i
posted by Kickstart70 at 8:28 PM on September 17, 2009

There were scads and scads of Apple II games that had hand-made fonts with color-based anti-aliasing, but those were exploiting the goofy HIRES color encoding, not the monitor's pixels.
posted by fleacircus at 10:31 PM on September 17, 2009

And yes, StoneCypher is like a one-man slashtwat in those comments.
posted by fleacircus at 10:43 PM on September 17, 2009

He's also read this thread and is responding to it in the typophile one.
posted by Busy Old Fool at 12:31 AM on September 18, 2009

I hope my trolling tag wasn't a self-fulfilling prophecy?
And I hope John's not after me. I'm not good at this.
posted by quoquo at 1:28 AM on September 18, 2009

First I just wanted to say that subpixel rendering is only used to create black fonts with shades of grey, i.e. turning subpixel elements OFF by setting the colours for whole pixels appropriately, but you've probably already figured that out.

Also, it's so sad to see how that wonderful sense of achievement gets shattered in the linked thread by one bullying twat - which is what we learn this John Haugeland to be with utmost certainty.

In claiming "Yeah, I used to date a Slovak named Miha who was a girl. I’d have thought had I that wrong, s/he would have said so." he also amply proves to be a liar or a man of bad memory for there is no such female name (or nickname) as Miha in Slovak.
posted by Laotic at 2:56 AM on September 18, 2009

Christ, what an asshole.
posted by lucidium at 4:52 AM on September 18, 2009

So, what would everyone here who's calling Haugeland a troll be writing if this post linked to a site claiming to be the first website to log interesting links around the web and allow members to comment on them, which by the way launched only last week? The combined snark and vitriol would leave his lone voice of indignation in the shade. Sure, he goes overboard, but people do that when they're pissed off.

He isn't pissed off that Miha made this font, he's pissed off about the claim to be first in a field that's clearly close to his heart. Miha's post title currently claims that this is the "first handmade subpixel font type family, ever". Haugeland has posted various links to refute that, but a little reasoning would suffice:

Difference is, Miha "the Slovenian" did his font by hand in Photoshop, whereas other subpixel fonts are generated by some program.
posted by acrobat at 11:35 AM on September 17 [1 favorite +] [!]

Before anything was done on a computer "by some program", it was done first by pioneers by hand. If you live in a world in which automated anti-aliasing already exists, there's no way you can claim to have just created the first handmade subpixel fonts.

The shame of it is that Miha's fonts deserves attention for being so unusually tiny, and yet he's claiming being first in ways that aren't unusual (i.e. handmade subpixel fonts). Why the obsession with being first, anyway? In this particular domain, surely what matters is making the best.
posted by rory at 6:06 AM on September 18, 2009

He isn't pissed off that Miha made this font, he's pissed off about the claim to be first in a field that's clearly close to his heart.
vs.
Why the obsession with being first, anyway?
posted by smackfu at 6:28 AM on September 18, 2009

So, what would everyone here who's calling Haugeland a troll be writing if...

I think the relative levels of civility and general helpfulness in this thread (explaining what exactly is going on here, and why it's neat and different) versus his vitriol in that thread kind of answers that. Yeah, Miha was being a little grandiose by claiming "FIRST EVAR!", but hey, he's doing cool work, and he got a little carried away, I've been there. He comes back and apologies for his mistake, updates the original post and takes the information well, something you certainly can't say for Mr. Haugeland.
I mean it's okay to correct people and give more information, but sheesh, our mods would have sat him down and given him a serious time out for that crap. That's why we pay to be on here.
posted by 1f2frfbf at 6:46 AM on September 18, 2009

Sure, everyone's relatively well-behaved in this thread, but I was wondering what a thread that trod on Metafilter's patch would read like. We've all seen enough pissing elephants and their textual equivalents to guess.

I don't see Haugeland claiming to have been first, just being annoyed at the promulgation of a claim that overlooked all prior art. If you care at all about your field, whatever it is, you'll feel compelled to correct such mistakes when you see them.

And he keeps coming back because (from reading between the lines; I haven't watched it happen) Miha has apparently been editing the title of the thread to refine his claim, but has left in the "first" aspect. So he isn't taking the information all that well, it seems.

As I said, it's a shame, because the teeny-tiny fonts Miha has made are genuinely cool.
posted by rory at 7:41 AM on September 18, 2009

And phrases like "one-man slashtwat" and "bullying twat" don't exactly mark us out as the height of civility, entertaining though they are.
posted by rory at 7:44 AM on September 18, 2009 [1 favorite]

Laotic: subpixel rendering is only used to create black fonts with shades of grey

I'm not sure that's true. I zoomed in on a screenshot of OS X rendering blue text, and you can clearly see it bringing in reddish pixels on the left hand side to create a subpixel anti-aliasing effect.
posted by chrismear at 10:28 AM on September 18, 2009

chrismear: "I zoomed in on a screenshot of OS X rendering blue text,"

that's just regular antialiasing, I think.
posted by shmegegge at 10:40 AM on September 18, 2009

Tried it again with a green letter, and compared with the rendering when you turn off 'LCD font smoothing' (screenshot), there's definitely red and blue pixels on the appropriate sides. So it does look like it's at least attempting to do subpixel aliasing on coloured text.
posted by chrismear at 1:27 PM on September 18, 2009

chrismear, try taking a macro shot of the LCD lattice - that way we'll see what happens on subpixel scale.
posted by Laotic at 1:29 PM on September 21, 2009

Haven't got a good enough camera, sorry. Although I don't really see what a photo would show us above and beyond the actual pixel data that I've recorded in those screenshots.
posted by chrismear at 2:46 PM on September 21, 2009

You would, in theory, see how the differently-colored pixels are actually displaying on the R, G, and B elements of the LCD screen, which would either confirm or deny that you're observing subpixel rendering rather than simple anti-aliasing. Zooming in on subpixel artwork only gives an approximation of how the artwork displays.
posted by shakespeherian at 2:50 PM on September 21, 2009

You don't need a photograph to know that that's sub-pixel anti aliasing. The fact that it's using a colour other than the range between the text colour and the background shows that it's using sub-pixel aware rendering. That or it's broken.
posted by lucidium at 3:28 PM on September 21, 2009