[Solved] Using pixel fonts without anti-aliasing

I’m trying to use a pixel font (called Silkscreen), which is made to be used at a font size of 8px.

When use the text TOP, pick that font, change the size to 8px, change the display method to Polygon and set Anti-Alias to 1x (off), the font does not render as expected. My TOP is set to resolution 256x256 and input smoothness to nearest pixel.

Below you’ll see that some characters (eg. D, F, G, H, M, etc) do not render correctly - when comparing the text in photoshop vs touchdesigner.

Is there something I missed?

Thanks!

Hi @lashan,

Set the „Display Method“ parameter to Bitmap for proper display of pixelfonts.

Cheers
Markus

Looks like after exploring some more, it might be an issue with the font itself.

I tried as you said to use the “Bitmap” display method and turning anti-alias off, but it is still giving some anti-alias. I tried two other pixel fonts and set them to the correct font size, but it looks like one didn’t work (has aliasing) and one did (no aliasing showing).

Is there any other approach I can take? Thanks again Markus

Hi @lashan,

just realizing 2 things:
you seem to be using an older version of TouchDesigner, can you update to the latest?
Also, please set the “Viewer Smoothness” parameter on the Common page to Nearest Pixel

cheers
Markus

Thanks for the reply Markus - I did some more digging and my instinct was right: I redownloaded the font (from Google Fonts this time) and that fixed it. It seems the original version of the font I had downloaded was not actually “pixel perfect”.

One issue I did run into is that I was not able to set the font size to 8px (there was still anti-alias), but my workaround was to set the font-size to 16px and then use a transform to scale it down by 50% to get to the 8px font-size I was trying to get. My fixed output below:

thanks again Markus!

Hi @lashan,

setting the “Viewer Smoothness” to Nearest Pixel should have fixed this. It did not have the right effect for you?

cheers
Markus

Nearest pixel does work, but not for all font sizes. For example, here is font sizes 8px to 24px below:

The ones I marked red are font size 16px and 24px. Because the font is based off an 8px size originally, it will only render “nearest pixel” perfectly without anti-alias when the font sizes are a multiple of 8, otherwise, there will be some aliasing. The confusing part is why it doesn’t render properly at 8px size, when that is the original intended font size for this font.

Keep in mind that my TOP is sized to 256x256 resolution, so using the proper font sizes to scale the font does matter here. If we were at a larger 1920x1080 resolution, I don’t think this would matter as much.

Hope that makes sense!

—Lashan