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

miha's picture

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: Ken Perlin's work is interesting too.

Comments

inni's picture

It's the bees knees!

nina's picture

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?

Thomas Phinney's picture

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

T

miha's picture

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.)

Frode Bo Helland's picture

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

miha's picture

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).

cuttlefish's picture

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.

Mark Simonson's picture

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).

miha's picture

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.

sgh's picture

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?

brockfrench's picture

I am amused and impressed.

mekka's picture

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.

miha's picture

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.

ill sans's picture

Very impressive!

outrasfontes's picture

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.

aluminum's picture

Nicely done.

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

mads's picture

Amazing work.

chrstphrknwtn's picture

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

aluminum's picture

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

outrasfontes's picture

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

miha's picture

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)

chrstphrknwtn's picture

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.

Steve Ross's picture

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.

geenius's picture

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

miha's picture

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 :-)

John Lyttle's picture

It couldn't be any more different from David Farey's 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.

o00o's picture

Wow! that works distubingly good.

gingerbeardman's picture

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

miha's picture

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…)

Tonamel's picture

"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!

John Hudson's picture

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

borisforconi's picture

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

eliason's picture

You could call it Antonie.

gojomo's picture

Fleas' Knees?

gingerbeardman's picture

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.

johnnydib's picture

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?

Chandler.'s picture

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...

nina's picture

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

miha's picture

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:

evank's picture

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)

merraksh's picture

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?

ironmaus's picture

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

miha's picture

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.

jwr's picture

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.

hans's picture

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.

aluminum's picture

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

sveinn's picture

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

StoneCypher's picture

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/

Pasquale's picture

This is outstandingly neat

miha's picture

Sveinn: It looks better than I thought. Although I disagree: it looks worse (no dots on i, j; unreadable E, F and s if not set in context; no counter in B, 8 and maybe R). What about bold italic?

John Haugeland: I am very sorry if I was dishonest, I had no such intentions. There was actually a comment about being first one already and I suggested that maybe this is first such font for LCD screens (unlike Apple II). I also did a google search, but I found only automatically rendered subpixel fonts. Only later there was a comment that it is indeed not the first font … But is this the first font family? With roman, bold, italic and bold italic? (this is the most basic font family) I changed title to this.

BTW, I would love to see some examples of your (or someone else) hand-made subpixel typefaces.

the font on the GRC page from ten years ago looks just as good as this does
If you mean typeface used in menu, well, its x-height is more than twice bigger than mine. Not fair to compare.

Syndicate content Syndicate content