(SOLVED) Optimizing a font for a clear pixel display at 8 pt size. How?

mårten's picture

Dear Typophile members.
I'm compiling some letters (drawn by someone else) into a font. The letters are meant to be used in icon bitmaps sized 24 x 24 pixels and the characters were drawn to match this grid. However the result should not be a pure black/white pixel font but should show some gray tones as well. Please see attached image (desired look).
I made the font in TypeTool. The trouble is, I can't produce the right look in Photoshop when using the font. I use 8 pt size.
The UPM is 1024 and each pixel is 128 units (8 x 128 = 1024). Also every letter spacing is 128 units.

Clearly I'm doing something wrong. Does anyone know how to do this right?

Many thanks!


oldnick's picture

No can do with Type Tool. Other than making a Type 3 PostScript font (which I'm not sure can be done anymore), you might look at this...


mårten's picture

I don't want grayscales in the actual font. The glyphs look like the ones in the top two rows of the image. The pixel versions are just screen appearances at 8 pt (72 dpi). Thanks!

oldnick's picture

I don't understand what the problem is: if you get your "desired look" with XaraX export, then why not use it?

mårten's picture

Hi oldnick, thanks for helping me with this!

The glyphs were drawn in XaraX, so they are scaled perfectly and that's why it works. In the XaraX example, no font is used, it's just the glyphs drawn directly.

The two other images are from Photoshop, using the font that I created. First without anti-aliasing and then with anti-aliasing set to "sharp". The trouble now is to align the vector font with the screen pixels to get the same result that I got from XaraX.

Does it make sense?

jasonc's picture

It looks like the vectors are slightly off the grid. Are the sidebearings also set to whole pixels on your grid?

Jason C

oldnick's picture

As Jason pointed out, ALL measurements must equal whole pixel values for the font to work.
Therefore, the Ascender AND Cap heights MUST equal 896 and the Descender MUST equal 128. The Left Sidebearing should be zero, and the Right sidebearing 128.

BTW, if you scale everything 200% and generate a TTF-flavor font, your measurements would be ideal (2,048 UPM) for the format.

mårten's picture

Thanks guys.
I've gone through the Font Metrics and this is how it's set now:
Ascender 896, Cap height 896, Descender -128, left sidebearing 0, right sidebearing 128. I moved some anchor points that were off the grid by 1 unit. I also tried to change the UPM to 2048, but that didn't seem to change anything.

I've used auto-hinting on "A" and "B" in this example. Should I?

I think it looks a little better, at least the scaling is right, but some gray is still leaking to the neighboring pixels.

Any ideas what could still be wrong?


mårten's picture

It seems like this was altogether a Photoshop issue:
When I changed the anti-aliasing from "Sharp" to "Crisp" it suddenly works! Confusing.
Thanks for helping out with this!

Best Regards

mårten's picture

Another example:

dberlow's picture

Photoshop, cleartype and Apple quartz rendering all turn on pixels outside of the contour. Hope that helps.

Syndicate content Syndicate content