-1

I have an idea, that I can have a font size like 16×32, then downscale it for various sizes. Unfortunately, a downscaling algorithm has to be picked, and bilinear leads to some inconsistency:

At the top there are some vertical lines being inconsistently downscaled into sharp and blurry, straight and bent.

At the middle, there is a sample of () being downscaled 2x horizontally.

At the bottom, a sample text in 16×32 Custom Font is downscaled to 8×16. Note how T, i, j and l have blurry vertical lines. Yet, when I shift the text one pixel left, the vertical lines switch their roles:

A gaussian blur applied beforehand leads to this blurry, but more consistent downscaling

What is the best way to downscale a bitmap font? Is it possible to somehow use hinting on a bitmap font?

Here is the sentence unshifted, which is what you should scale from, as many algorithms, like bilinear, are sensitive to pixel shifts:

Edit: I found out there is also a filter called a triangle filter; its scaling looks like this:

Compared to bilinear, which looks like this:

The triangle filter seems to give decent results, compared to the blurry Gaussian blur with scaling, or the highly inconsistent bilinear.

Also, there is an assumption in the scaling I want: each character is scaled individually to a size where width and height are both integers.

  • 3
    I could be wrong, but in my experience, pixel (bitmap) fonts have a native pixel size and the entire point of using them is to stay at that native size. – Scott Jun 6 '18 at 16:08
  • Of course bitmap fonts look best at their native size. But the thing is that developing fonts for more sizes takes more time and font filesize, which is to the power of 2 if the "width" operation in offices like Microsoft Word or OpenOffice is allowed. – Piotr Grochowski Jun 12 '18 at 9:41
3

I'm afraid that this is kind of a dead end.

Hinting helps when rendering vector text to a monitor. It doesn't apply to bitmap fonts. (I'm not exactly a font design expert, so if anyone disagree please say so.)

It doesn't really matter if you are scaling a 1-bit font or any other kind of 1-bit image. You are trying to display an "image" at half the original size and some kind of deformation will occur.

This happens because the pixels of the original image doesn't fit the pixel grid of the new downscaled size:

If you use nearest neighbour interpolation you get a "ragged" result:

If you use bicubic interpolation, you get a "blurry" result:

If you have to use this font I would recommend using bicubic smoother interpolation in Photoshop. It's not ideal, but it looks kind of ok:

If you do not have access to Photoshop, ordinary bicubic interpolation might be your best bet:

If you need the font to be 1-bit, I'm afraid you have to actually recreate the font at a smaller size.

  • "If you need the font to be 1-bit" * enter * For Microsoft Windows, I do, and scaling like that is not applicable for text rendering. For an imaginary OS which I do not have skills to create, I already have created my own bitmap font format specification that allows both anti–aliasing and scaling. – Piotr Grochowski Jun 6 '18 at 17:21
  • Have I offended you? I didn't mean to! I don't understand what you are saying. You are talking about blurring the text and ask "what is the best way" to scale a font. What other "ways" than interpolation exists? – Wolff Jun 6 '18 at 19:11
  • This comment (not answer) indeed offended me because of the "I don't understand what you are saying." joke. I hate it! – Piotr Grochowski Jun 7 '18 at 14:04
  • 1
    It wasn't a joke. I literally don't understand your comment and asked for clarification in order to be able to help (because your question interests me). Please stop hating and let's get back on the track: As I understand it, you are saying that my answer isn't helpful because the interpolation methods I mention isn't applicable for text rendering (which always use nearest neighbor). True. But then I don't understand what kind of answer you are looking for. – Wolff Jun 7 '18 at 15:13
  • It doesn't apply to bitmap fonts. (I'm not exactly a font design expert, so if anyone disagree please say so.) – To take another point of view at this: A bitmap font is one, which does not feature outlines, but is only available manually hinted by the font designer for one or a few specific sizes. – Wrzlprmft Jun 19 '18 at 9:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.