Building a grayscale bitmap font...

neuenham's picture

I just started working on a grayscale font which will replace anti-aliased Univers 55 and 53 (9, 10 and 12pt) on a Flash site. The client isn't happy with the current site (the text is "blurry" - which is due to the font, Flash antialising, and also the colors, which I can't change) so I need to make two screen fonts, which won't have features that stray too far from the Univers family.
I tried out existing pixel fonts, but they look too much like pixel fonts. Then I discovered Ultrafonts, and after a few tests in Photoshop, I'm pretty sure grayscale pixfonting is the way to go. Don't get me wrong, the result won't look like Univers, it will just be the closest possible, as well as legible, at small sizes. Very neutral, not hip in any way.
I read on Typophile that it's tricky to actually turn font designs into grayscale bitmap fonts. Why? is it a hack of some sort? I don't intend to sell this font (it will belong to my client, since it's based on a registered typeface etc.) so the concept of splitting revenue with Truth in Design just to use their software once seems silly. Then again, I don't know how tricky the process is... Either way I'd love to learn more about it!
Oh and I'll post some images in Critique when it's over 5% done...

hrant's picture

> grayscale pixfonting is the way to go.

BTW, I recently discovered another advantage of grayscale fonts over b&w pixelfonts: they're more harmonious with the large type renderings in a composition (like titles, logos), which are always anti-aliased. And yeah, they're not horridly blurry - like here: Click on "Castellano", choose one of the top two links, and drown in the blur...

It's tricky to make them because the TT outlines have to look quite funny for the rendering to actually come out reliably on different platforms, applications, etc. For example between Flash and Photoshop. The Ultrafonts boys have spent a lot of time and brains figuring it out - they even have an automatic converter! Also, you should know that the trick is patented (the problematic prior art issue turned out to be a subset of it).

As for your concern of "just using it once":
- If your client wants exclusivity, he should pay extra for it.
- If it's not exclusive, nothing should stop you from using the nice resultant fonts on other projects, or even selling them (probably through Ultrafonts).

That said, I don't think any of the existing Ultrafonts will work for you here. But be warned, it's quite hard to get the hang of it. If you need help, and have the budget, I can do it for you.


neuenham's picture

Thanks a lot for your reply!

Indeed, the available ultrafonts are not what I need, but it's okay because I know exactly what I want.

I wish this client had the budget to pay a real typographer, but they don't have a cent at the moment (literally) and I'm just doing this to make everyone happy. Type-wise it's actually WORSE than the site you mentioned!

So yes, you're right, I should sell the font once it's made, or at least try...

For the moment I'm designing the font(s) in photoshop and I'll figure something out when it's time to build them.

To be continued...

ps: I just realized you're the designer of Mana - brilliant work!

hrant's picture

Glad you like Mana!
The 11 should be out in about two weeks.

> I'll figure something out when it's time

Just know that I waited 6 years between making the Mana-16 bitmaps and actually delivering a working font... :-/ So unless you could simply fall back on using text-as-image if you have to*, make sure you have a mechanism in place to deliver working -and robust- fonts before you spend all that time painting thousands of little gray dots!

* Which is only good for short text.

One other thing: make sure to check the results on Windows as you're working, since the gammas are quite different between platforms.


neuenham's picture

- After a few days solid pushing greyscale pixels (I nearly went insane) and lots of testing, I can say that it's a lot easier to design a font from scratch than to try to adapt an existing one. Univers has many very characteristic features, and they are hard to transpose to a 9x6 pixel grid. When I stay too close to the original typeface, the most obvious weaknesses are in fact the typical Univers features. Take them out and keep working, and it becomes an okay-looking grayscale pixel font with absolutely no particular style. Which is actually worth pursuing, I think, but it's not my original idea. I've been studying the optical illusion (or psycho-visual effect... or whatever it could be called) of shading, it's quite fascinating!
I use Windows on a high resolution, haven't tried viewing my work on a Mac yet, only on my cellphone, and I'm aware there will be a lot work to find the right shades (I think each font has its own perfect values).

hrant's picture

Welcome to loonieland! :->

It's good you're using Windows - you'll err on the side of aliasing (which people are used to) instead of blur on the Mac (which is fatal). Just make everything a hair too dark.

> only on my cellphone

Could you explain how you do that? My way involves a third party, and the "latency" can be annoying.


Mark Simonson's picture

Windows has a darker default gamma setting (2.2) than Macs (1.8), so middle tones look relatively darker on Windows, relatively lighter on Macs.

This can have noticeable effects on the appearance of antialiasing created for one platform viewed on the other. Windows antialiasing looks washed out when viewed on a Mac, Mac antialiasing looks heavy and blurry when viewed on a Windows machine.

hrant's picture

> Windows antialiasing looks washed out when viewed on a Mac

Which makes anti-aliased fonts (at least the good hand-made kind) look closer to plain old 1-bit screen fonts, which people are used to! So it's simply less bad.


neuenham's picture

hello again, sorry for the slow reply...
I gave up this project! I guess I didn't realize how much work it needs to get a good font. Now I have even more respect for grayscale pixel masters!
I just don't have enough time... :-(
About putting the font on a cellphone, I didn't actually implement a custom font or anything, just transferred a GIF via bluetooth.

hrant's picture

Heh heh. Yup, the complexities in grayscale design are not a subset of either b&w or outline design - the importance it places on illusion is unique in the field, perhaps even more pronounced than designing phone book fonts.

I don't know if I proposed this before, but if/when you have the budget to outsource such work, I'm here.

> just transferred a GIF via bluetooth.

Could you please detail this process? Thanks much.


Syndicate content Syndicate content