The Flea's Knees - Handmade Subpixel Type Family with 3px x-height

It has x-height of 3 pixels, it is italic, inspired by old masters and most important – made by hand. You must not look too closely, because colors get visible. It's work in progress. Here:

I am also writing a program which will set text automatically. These horizontal lines in the picture is actually information about glyph unicode value and positioning.

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

Scroll down for additional weights of roman, bold & bold italic.

The title was "First Handmade Subpixel Type Family, Ever*".
[* Moderator's note: Miha's enthusiastic use of the claim "first ever" has been seriously challenged by StoneCypher. Read on for the drama and sub-pixel intrigue, if you dare!]

PS: [[http://mrl.nyu.edu/~perlin/homepage2006/tinyfont/index.html|Ken Perlin's work]] is interesting too.

Comments

It's the bees knees!

This is impressive. It *is* legible (I even found a typo ;-) ).
FWIW, the "B" and especially "D" look decidedly blue to me.

So, why an italic? Did you actually find it easier to make an italic than an upright font at this sort of size?

Interesting how the lowercase s and z require descenders to work with a 3-pixel x-height.

T

Piotr, thank you and welcome to Typophile. I think you just found a name for the font!

Nina, "e" is not done yet (it's copied "c") and this is why there are typos :-D. But I agree about glyphs being too blue, I have to correct them. As a consequence the counter will be darker.

Italic was chosen because the benefits of subpixel design are the most prominent. There just can't be a normal pixel font (in italic) and with such or even higher x-height – and still looking remotely as good.
Well I think italic is actually harder to do, but there are nicer glyphs possible! ("f", "z", upright parentheses, etc)

Well, 3-pixel x-height is certainly interesting! Small caps are going to be hard to do :-D

(Oh, and if you asking yourself why are there two lines of numbers. First line are old-style numerals, second will be lining.)

I didn't know png could hold subpixel information. What kind of software do you use?

I use Photoshop – when you see one pixel enlarged, you can control just its one color. But if you were watching physical pixel very closely (with microscope) you could find its three subpixels were changing. This thing is possible because of hardware. Specifically, this works only on LCD screens.

When you mix a color for one pixel, you use three sliders: each slider is actually for one subpixel. The tricky part is that you have to imagine color components, because full pixel colors which are displayed are confusing.
(Read about it on Wikipedia and here.)

I was thinking more why I started italic and not roman. I think because of all beautiful color patterns at 1600%. Also a little suprising fact, maybe: in all lowercase letters there are only three gray pixels (and all three are in "z")! Else are colors. Evenmore: in italic, there are no spaces between letters visible at 1600%.

This typeface is best seen on monitors with higher PPI (I have 133).

The possibility of subpixel lettering isn't exactly exclusive to LCD monitors, but they certainly help.

Long ago I used to do subpixel editing for graphics in Pinball Construction Set on the Apple ][, including lettering with a technique not entirely unlike what is shown here. Back then, though, it was the limitations of the graphics system, including the relatively low screen resolution that made it possible, though crude, on a CRT monitor.

The Atari home computer systems (late '70s/early '80s) used a similar system with the character set. The "high res" graphics mode actually addressed half a "color clock" on color tv screens. To get a fully white dot on a black background, you had to plot two adjacent coordinates. Otherwise you would get a red or blue dot. You could also get solid red or solid blue by plotting only the odd or even coordinates. It worked very similar to the Apple II. In fact, Pinball Construction Set was able to be ported to the Atari with very little modification because of this (not to mention the fact that they had the same microprocessor).

Oh, and I was sure this is the first such font. Well maybe it is the first for LCD screens.

I have worked some more on it. I added a normal weight, which was much more easier to create than italic. Of course, it's clearly … or not so clearly not finished.

You said " Oh, and I was sure this is the first such font. Well maybe it is the first for LCD screens."

Are you kidding me?? You invested time and energy into the basis of what already exists? You have these titles of profession in your profile - yet it doesn't add up ! I can say I'm a plumber if I can put some pipes together properly - if you want to play these games. Maybe you should do 2 minutes of historical research on development of modern digital typefaces and the technology they are displayed by (crt / lcd / plasma / phosphor) before you come to the conclusion what you are doing is BASIC research when adapting - calibrating for technology and general accessibility of computer users. You are backwards in your logic and do not commend your lack of observational ability. It's not a first! It's astounding to me you would truly think you made this up.

BUT - you said it best about your approach " I would be a perfectionist if I wasn’t so lazy." That's even pushing things. To be a perfectionist would imply you understand fundamentals.

What is your intended application of such tiny fonts - ? I look around and people even in their 20's are wearing eyeglasses due to poor eyesight - and people over 40 have a hard time even with newspapers... is this for the micro version of Iphone tech? But funny thing is they are pushing now a larger iphone - going to the ipad size. Oh - right for the i-watch. Regardless this is redundant and pointless as others already have this perfected if needed in application.

What I find equally disturbing is your audience just laps it up readily. Amazing lack of basics happening with all this available information. Oh but I must remember -the information most are lapping up - is what is channeled to them from their personal google robot aggregator. Old stuff is for the dust bin - right?

This is really cool!

How did you decide how to choose the pixel colors to address the subpixels? Are you using the [1/9,2/9,3/9,2/9,1/9] filter described by Steve Gibson in the link you mentioned above?

I am amused and impressed.

Isn't the hardware going to pose a problem? I mean, the color LED arrangement is not always R-G-B, there's also R-B-G and diagonal arrangements etc.

Believe me, I am amused myself :-). Specially when thinking whether it's worth to do monospaced numerals, case-sensitive parentheses and such.

Some colors were copied form Windows rendering and maybe mixed further (I have saved them in palette a very long time ago). I have five shades of both blue and red and three grays, but it's more important how you combine these colors.

In italic, stem is just a little less than 1 pixel wide. It is mostly presented with two pixels of red and blue: sometimes, it's dark red & light blue (pixel seems to be more on left); dark blue & light red (pixel seems to be more on the right); or both pixels of equal lightness. Actually I use this mentioned filter, but more from experience.

Italic glyphs always start with red and end with blue, because this way they can be set in words together without problems. For some glyphs, such as en dash, 70% (or less) gray color is used.

Hardware may be a problem, but most LCDs have the same positioning of subpixels.

Very impressive!

I'm also very impressed! The roman looks surprisingly legible on that size. I think the "s" with a descender would disturb the reading process a little bit.

Nicely done.

Has anyone built a chart that shows the relation between the specific colors needed to trigger the individual combination of sub-pixels?

Amazing work.

It would be interesting to see if legibility is different for a colour blind person.

Just a hunch, but colorblindness might improve legibility. The colors (I assume) are used to trigger a combination of the 3 sub-pixels.

Maybe 4 pixels in x-height could be also a good experiment. The "e" baseline alignment would be probably impossible using 3 of them.

Thank you for your kind comments! I had similar feelings, this is why I hurried and just had to post the typeface even with some glyphs not done.

Darrel: You can start by reading the two links I posted above and then study The bee's knees in detail. If you look at italic l or [ you will notice how pixels start to repeat and how diagonals are made.

I think legibility is the same or just minutely better for colour blind people. There was already discussion of this on Typophile, but some arguments were not even mentioned (for example, various combinations of color blindness type and text color give different legibility).

I decided to make the hard glyphs on the end … my excuse is until I finish program for automatic layout I can't quickly enough test them. Indeed the "e" and "s" are the most problematic. Maybe I can help with a two pixels x-height font? (here)

I just had a colour blind friend check it out and he confirms it is legible, and made the same suggestion that the condition may improve legibility. Probably one of the very few occasions where colour blindness could be of use.

Very interesting. When I look at the large, magnified .png above, it is illegible until I sit back and squint, thereby reducing the size and colour factor. Great work.

Amazed by the 3px x-height! Really impressive work, congratulations! :)

Adding some experimental bold weight (there could be bold and black weight) and some glyphs of bold italic, which will be as interesting to create as italic. Well, I chose to make additional weights first instead of mastering italic and roman.

This image is actually a new font format :-)

It couldn't be any more different from David Farey's [[http://new.myfonts.com/fonts/adobe/itc-beesknees/|Beesknees]] so I don't think anyone would confuse the two, but you may wish to rethink the name of the typeface to avoid arm wrestling with ITC, Monotype, Linotype and Adobe.

Wow! that works distubingly good.

Just registered here to say that I think this is great. Well done! Keep up the great work.

ps: on the latest images, I see some background colour that is not quite white, especially around the lowercase italic m,n,o

Thank you for the tip, John, I really should checked this before … although there are small differences in names I think I will change it. Truthfully I didn't think a lot about it before. So, any suggestions? It could be deviant and represent something physically very small :-)

Ingrid, Matt, welcome to Typophile!
(there is indeed this not-really-white color, but unluckily not only there…)

"tnyfnt - a font so compact, we had to get rid of all the vowels in the name." ;)

It looks lovely, and is shockingly readable. Great work!

You could call it 'The Bis Nis', which could be read as either beesknees or business.

Really breathtaking. Keep going, I've never seen anything like this before.

Fleas' Knees?

Thanks for the welcome! I've already made a few blog posts on here ;)

I was chatting to a friend about this earlier and they said that there have been sub-pixel fonts on Nintendo DS for some time now (before 2005). Mainly on the homebrew scene, where they are used to fit more text on screen (text viewer, nethack game). They don't look as cool as yours, though! I am yet to see them first-hand on a DS.

http://gbax.gp2x.de/gbax2005.html
http://ds.qj.net/Textviewer-for-the-NDS/pg/49/aid/1520
http://stuartp.commixus.com/nhds/

ps: in Photoshop you can use the selection tool (with zero or low tolerance) and the "similar" menu command to select all the not-quite-white... if you want to change it to real-white.

Firmin Didot would've loved that ornamented specimen :D
The lining figure 1 is ambiguous the old style one is awesome though.
Is there a font format that supports colour?

Amazing work. I have never seen this before; really cool concept.

as for the name, I think mites are pretty small. 'Mite-y' or 'mite-sized' or something...

"mites"
Acarina sounds pretty good.
Or maybe a small venomous spider? Envia, Missulena? (There's more here.)

Thank you all for the suggestions! I was combining some names and made names such as The lengthy legs of little bees, Antonie van Leeuwenhoek's type, Lawyer's fineprint, sbpx_fnt and Micrommata virescens' diary font (also possible Zilla diodia's diary font etc). Hard to choose one!

Johnny, this lining 1 is already on my to-do list :-) I chose to do such specimen (actually, this is font format, specimen will contain some short text!) because it nicely contrasts with new technology. The mix of old & new.

About this font being the first [subpixel] hand made … well maybe just bold italic is the first one? Here is the lowercase, still having troubles with e, s and this time also spacing:

This is really amazing work. Being somewhat graphically challenged myself -- and having tried to create readable favicons in the past -- I am just blown away by how readable it is.

I would definitely like to make use of this...Any idea what kind of license you'll be releasing it under? (Creative Commons, etc)

The enlarged image posted by miha suggests that it could be an effective captcha: I could only read "ipsum dolor" only at a distance and by crossing my eyes (and it looked black and white...). I wonder what a bot would have to do... Did you ever experiment with this?

I support 100% "Flea's Knees" as the cutest mini-"Bee's Knees" name.

Evan, I think I am going to release it under free* license (not yet, it is not finished). I know this has a drawback of a lot of potential misuses, but anyway. I also think I could sell it as well if I wanted, but its use is very limited – only for screen, only for small amounts of text.** Furthermore, it did take some time to create it, but time is not even remotely comparable to time spent drawing "normal" typefaces.

*CC, No Derivative Works & modified Attribution.
** I know creating bold and bold italic may be a sign of text typeface, but I just like doing it :-)

Of course, there will be a small Flash app to set text. But be patient :-P

About using it as a captcha: since letters start to repeat, it would't be so good.

BTW, welcome to Typophile, Evan, P.B. and Matthew.

This is very impressive, congratulations!

I have two monitors, one of which is rotated 90deg to the right. As expected, the font does not display as well on that rotated monitor. I was actually surprised it was readable at all!

I don't know that the pixel ordering in these panels is.

Bee's Knees is a FANTASTIC name for this font. Kudos for thinking of that when Piotr posted.

But please, in the name of taste, not "The Bis Nis" - ewww.

ah! jwr brings up an interesting issue with sub-pixel smoothing. I imagine that could be a big issue on iPhones.

I'm sorry if I'm pissing on the bonfire, but it looks just like the Mac OS X font rendering.

That is Gill Sans Italic Size 6, in TextEdit

Uh, there's a pretty big difference between first subpixel font ever and first one you're aware of. I hate to be the one to break it to you, but the Apple ][gs shipped with one in ROM; you missed this boat by more than 30 years.

The GameBoy Advance homebrew development community has been using them actively for more than ten years. I released a program that automatically dumped SPAA fonts for the GBA in probably 2003 or so. My old webpage has a 3xV (typically 2) font on it - significantly smaller than yours.

Please don't claim first ever when you haven't even tried looking to see if someone beat you to it. There are three bitmapped subpixel fonts on the first page of google hits for subpixel font.

This isn't actually impressive at all; the font on the GRC page from ten years ago looks just as good as this does. This is just a two-filter matrix applied to a larger font. Big whoop.

You'll find people get really bitter when you claim to have beaten them to the punch on something that's actually 30+ years old.

It's dishonest.

John Haugeland is http://fullof.bs/

This is outstandingly neat