How to generate smooth fonts with Processing sketch? Resulting font does not have the right height

[zalexzperez]

I have a 172x320 display.
I'm trying to generate a monospace font with just numbers, as tall as possible (taking up as much as 160-170px in height).

So I downloaded Roboto Monospace Bold 700 Italic, here's the file:
RobotoMonoBoldItalic.zip

Placed the .ttf file inside the Create_font/Data folder and configured the Processing sketch as following, these are the relevant lines:

String fontName = "RobotoMonoBoldItalic";
int  fontSize = 168;

//Unicode blocks:
0x0030, 0x0039, //Example custom range (numbers 0-9)

The preview shows that the generated font only has numbers, good.

However, upon using the font to print a 3-digit number inside a fullscreen sprite (320x172), with the idea to have the numbers both horizontally and vertically alligned, and the following code inside void setup() to achieve it:

tft.begin();tft.setRotation(1);
tft.fillScreen(TFT_BLACK);
spr.loadFont(RobotoMonoBoldItalic168);
spr.createSprite(320, 172);spr.fillSprite(TFT_BROWN);
spr.setTextColor(TFT_GOLD, TFT_BROWN, true);
spr.setTextDatum(TC_DATUM);
Serial.printf("The text height is %d\n", spr.fontHeight());
spr.drawNumber(123, 320 / 2, (172 - spr.fontHeight()) / 2);
spr.pushSprite(0, 0);

fontHeight() reports the font is 161px tall, however the displayed numbers are clearly smaller than that and they're almost aligned to the top border of the display, like this:

If the Unicode block is set to Basic Latin, the reported font height is 164px and the displayed numbers are still smaller than that.

It looks like the Unicode blocks selection only removes glyphs but does not set the desired height for just them, so it's applying it as if all the ignored characters in the original font are present.

I tried using FontForge to remove all glyphs except numbers, generated the font, but the outcome is still the same.
Feels like the removed glyphs heights are still getting accounted for, so there would be some extra changes required in that program, but I have no idea how to do it.

Thanks in advance

[CoreyCoop]

Just tell it a larger number, test it, and iterate until you get the size you want. (you can get within a pixel by doing the math for your first try, hint, cross multiply, it's the easiest way to do linear interpolation.) Also you will have to be aware of the issues of rounded vs. flat bottoms and tops, If you look carefully, most fonts, when they have round tops and/or bottoms extend a bit above and/or below the non-rounded ones, because by eye they look more like they are the same size that way. I've been dealing with this problem for years, if you make, for instance that '1' you show above the exact height of the visible space, then the top and bottom of the '3' and the top of the '2' will get (and look) chopped off. So always test with a 3 or 8 as well as any other numbers you wish.

[zalexzperez]

I'm at a point where I still don't know which fonts I will use.
This trial and error process is exactly what I wanted to avoid.

In the example sketches there are some attached custom fonts that clearly don't have the problem I described. For instance, in the Sprite\Animated dial example, custom font NotoSansBold36 (number-only font) works out of the box. I can just use middle center datum and the text will be vertically centered.

Thanks for your reply

[Blitz54]

I see this is a little old now, but I had the same issue with the bounding box for the glyphs including all glyphs in the font even though I didn't select them.

How I solved it.

1. Installed FontForge.
2. CTRL+A, then Select Click all the glyphs I'm keeping to unselected them, the DELETE all the others.
3. This is optional I think. I saved the file, closed the program, and reopened it just to confirm it properly deleted stuff.
4. On the top bar, >Element>Font Info>General
5. Set Em Size to 1000 when saving to .otf or 2048 if .ttf (I think it can do .ttf)
6. Double click all the glyphs and make sure they're very close or directly on the bottom line. You can batch edit by selecting all of them in the overview, then right click and transform them with y. That, or mess around with the Ascent/Descent if they reach below the line.
7. Adjust the Ascent and Descent. As I said I put mine on the base line, so I set it to 997 Ascent and 3 Descent, just to give myself some leeway.
8. Generate font, I did .otf
9. Use the processing script like you did before, select the glyphs you need.
10. BAM. Should be a much tighter bounding box for the glyphs.

One thing, I did not test how this looks when text wraps around. The descent/ascent may need to be adjusted for that, I'm not sure. I'm only printing on one line. You may also need to tweak the position of the glyphs once or twice to get it perfect.