Font sizes and New Line distance for different fonts

I tried to switch the font for one of our plugins and ran into issues. Even when both fonts are from Google and work the right way in web applications and other programs.

The main problem I’m having is, that JUCE uses pixels for the height measurement. Setting the height in points makes the font sizes equal.

In the past it was not clear what the right way is to set the font height, as you can see in this post from jules:

But today it is pretty clear that points is the way to go and I think JUCE should also start to align this with the other ecosystems.

There is a method that lets us set the height in points. Unfortunately, the JUCE framework calculates the new line distance according to the pixel size and not the Points. This results in a new line distance that is different for different fonts. Even when they have the same size in points.

Here is an example. You will see that the Poppins font is much smaller when you set the same size in pixels. When you set the size in points for both fonts, then the font has the same size. That’s a good thing, but the distance to the new line is calculated from the pixel size of the font and is much bigger for the Poppins font:

This makes font switching a pain.

I would even accept a breaking change when things in this area could be improved. I think web applications are a good reference for font sizes and things like that. It should work similarly in JUCE.

Any thoughts?

Are you sure about this? I think that JUCE should use the line gap specified in the font itself. For example, I see that Poppins Regular has an em size of 1000 and a typo line gap of 100, while Roboto Regular has an em size of 2048 and a typo line gap of 102. If both fonts are set to the same point size “P”, this is equivalent to setting their em sizes to match. Therefore, the line gap for Poppins will be 100 * P / 1000, while the line gap for Roboto will be 102 * P / 2048. The result is that Roboto line gaps will be approximately half the size of Poppins line gaps for any given point size.

FWIW in Firefox I see the following for the two fonts you mentioned at the same point size. It looks like the line gaps change depending on the font.


Thanks for the answer. The spacing between the new lines was a guess. It was obvious for me that it depends on the pixel size because the pixel size of the Poppins font is much larger for the same point size. Thanks for verifying. My fault.

A way to manipulate the new-line space for a font or the drawing functions would help to make this more flexible.

I will add font.setPointHeight(size); to all my font declarations to make sure different the fonts have the same size. Would be great to be able to do this in the font constructor. But I think this can’t be changed anymore.

Thanks for your help!

You can pass FontOptions{}.withPointHeight() to the Font constructor to specify a size in points.

1 Like

Great, thanks.

Just noticed that I have to change all font initialization anyway because the old one without the options is deprecated.