Large difference in font size iOS/Android

I am finding a quite annoying difference in behavior of rendering fonts/texts between Android and iOS, depending on the font. I know I can expect small differences but the large font height difference results in not being able to ‘write once and deploy on multiple platforms’ without serious complications.

Constructor of component:

m_tekoBoldFontFace = Typeface::createSystemTypefaceFor(VintageSynthBinaryData::TekoBold_ttf, VintageSynthBinaryData::TekoBold_ttfSize);
m_tekoBoldFont = Font(m_tekoBoldFontFace);

m_tekoRegularFontFace = Typeface::createSystemTypefaceFor(VintageSynthBinaryData::TekoRegular_ttf, VintageSynthBinaryData::TekoRegular_ttfSize);
m_tekoRegularFont = Font(m_tekoRegularFontFace);

m_robotoCondensedFontFace = Typeface::createSystemTypefaceFor(VintageSynthBinaryData::RobotoCondensedRegular_ttf, VintageSynthBinaryData::RobotoCondensedRegular_ttfSize);
m_robotoCondensedFont = Font(m_robotoCondensedFontFace);

m_robotoMediumFontFace = Typeface::createSystemTypefaceFor(VintageSynthBinaryData::RobotoMedium_ttf, VintageSynthBinaryData::RobotoMedium_ttfSize);
m_robotoMediumFont = Font(m_robotoMediumFontFace);

Paint:

void TestComponent::paint (Graphics& g)
{
g.fillAll (Colours::black);
g.setColour(Colour(255, 255, 255));
g.setFont(50);
g.drawSingleLineText("PIygj!", 50, 200);
// initial draw has no font assigned
g.setFont(m_tekoBoldFont);
g.setFont(50);
g.drawSingleLineText("PIygj!", 50, 300);

g.setFont(m_tekoRegularFont);
g.setFont(50);
g.drawSingleLineText("PIygj!", 50, 400);

g.setFont(m_robotoCondensedFont);
g.setFont(50);
g.drawSingleLineText("PIygj!", 50, 500);

g.setFont(m_robotoMediumFont);
g.setFont(50);
g.drawSingleLineText("PIygj!", 50, 600);
}

Both Android and iOS tablets have a scale/dpi factor of 2, so the font heights should be approximately 100 pixels (give or take).

As you can see in the next screengrabs, Android displays it relatively nicely, with the Teko fonts being somewhat smaller, but that’s ok as long as it is consistent across platforms. The Teko font is the one I am actually using, the other 3 are just examples. One interesting finding here is that the first text without an assigned font both gives equal size.

Everything in red is drawn by myself to aid explaining the problem. I am using JUCE 5.4.7.

Any suggestions welcome!

Yes, I have observed this too. I have implemented workarounds using #if JUCE_ANDROID and such to reduce font sizes by a given amount.

That would be an ‘if-all-else-fails’ solution. JUCE should be a write-once experience.

4 Likes

What do the numbers signify? There doesn’t seem to be any consistency between them for the same face but different weights, yet the “unstyled” numbers match. I wouldn’t be surprised if there was no way JUCE could tackle this OOTB for every font that it may be given.

But for the same font it’s strange that there is so much difference.

2 Likes

+1

We’re also seeing significant differences in the size of one and the same font provided as JUCE binary data between Android and iOS, with iOS rendering consistently with Windows and macOS, hence Android seems the odd one out. Obviously we could consider a font scalefactor for Android specifically, but a more consistent font rendering in JUCE would obviously be a much nicer solution :slight_smile:

1 Like