How to get pixel-perfect fonts?

[DavidUchina]

I used Galenmereth's pixel perfect plug-in, but the fonts still have a bit of blur to them.

 

[Andar]

Basically don't zoom and don't go fullscreen?

OK, joking aside - the problem is basically that what most people call blur isn't a true blur at all, but mixed color pixels between the true pixels. Because a true blur would involve moving pixels.
This blur is an artefact of the distortion needed whenever a zoom is not an exact full size-up. You can have pixel-perfect results on 200%, 300%, 400% and so on - but never if you have something like 133% zoom etc.

As soon as you have a zoom that is not a true multiple number of pixels, you can only choose which distortion you want to have (either blurring or geometric distortions based on the formulae used).

Just imagine - you have a 2-pixel picture of one black and one white pixel, and want to give it a 150% zoom. You now have three pixels. left one is black, right one is white - but which color do you assign the new middle pixel? The grey of mixed color is what you see as blur, but if you give black then the divider is still crisp but no longer in the middle of the picture.
And there is no perfect solution for that - geometric distortions often make the letters difficult to read even if it maintains perfect pixelation on pixel-based pictures (while photorealistic pictures look better with color mixing and so on)

You can probably find a font that handles zooming better, or ask for a custom plugin that uses different mathematics for different types of screen and so on, but there will never be a perfect solution and some time you have to decide if your time is worth looking further for minor improvements.
The solution above already looks like one of the better compromises.

 

[DavidUchina]

Ohh, that makes sense, thank's a lot, I will just make the resolution a rounder number so it upscalese perfectly

 

[caethyril]

I believe it may also be due to font rasterisation, i.e. rendering vector font data to a bitmap canvas. For a system-independent solution, I suggest using a plugin for "bitmap fonts", i.e. something that will let you treat each letter exactly like any other image in the game.

I did some reading and it seems the blurring can be caused by various things, including:

1. Non-integer render coordinates for the text on the target canvas;
2. The browser's conversion of TrueType (i.e. vector) font data to pixel/shader data;
3. System/application display scaling.

The usual solutions seem to be to:

• Pre-rasterise the fonts, e.g. "bitmap fonts", or
• Apply some kind of post-processing, e.g. sharpen and/or scale down.

I think pre-rasterisation is the best option here: as I understand it, font rasterisation is CPU-heavy, but bitmaps can almost be fed directly to the GPU.

Related:

Raster, Vector, TrueType, and OpenType Fonts - Win32 apps

Raster, Vector, TrueType, and OpenType Fonts

docs.microsoft.com

 

[Andar]

I will just make the resolution a rounder number so it upscalese perfectly

and that has other problems - different people have different monitor sizes, sometimes even with different aspect rations (4:3, 16:9, 16:10 etc).
You can get fullscreen perfect for one monitor, only to have the picture distorted on different monitor sizes.