Font sizes don't match

General JUCE discussion
1

Hi,

I thought that with JUCE 8, all font issues were resolved. However, I’m still seeing differences when copying font settings from Figma to JUCE, the sizes don’t match exactly. I typically have to increase the font size by 1 or 2 pixels in JUCE.

Is there a way to get correct font sizing in JUCE without having to make these adjustments?

Best,

Jelle

2

Yeah, I noticed this, but you can also have a helper figmaToJuce which will solve the issue.

3

Sure, but is the font adjustment the same for all fonts? And is it the same on mac vs Windows? Is the font size a fixed pixel adjustment or is it a relative proportion to the font size? I don’t want to need to think about this…

4

Some recommendations:

  • Make sure you’re using portable metrics (TypefaceMetricsKind::portable) for your Font instances.
  • When setting font sizes, there are generally two functions you can use, a Height version, and a PointHeight version (e.g. setHeight() and setPointHeight()). You should generally prefer the PointHeight versions if you’re trying to match the sizes you see in other programs. Be careful when calling Font and FontOptions constructors - the heights passed to these constructors do not use points. It’s best to explicitly request points by calling FontOptions{}.withPointHeight (...);.

If none of that helps, then please provide the following, and I’ll try to work out what’s going wrong.

  • an example of a font that displays differently in Figma to JUCE
  • the font size you’re setting in Figma (ideally, share a Figma project)
  • a snippet that shows how you’re drawing the same text in JUCE
2 Likes