IssueTracker

I'm writing on behalf of Dalton Maag, a typeface design studio. We built a custom typeface for a client, for use in Android apps, and the client reported that the spacing between letters looked wrong when rendered by Android on low-dpi screens. We reproduced the issue with the default Sans and Serif fonts of Android 13, as per the attached screenshots, to prove that it's not a problem with the specific font in use, but with the rendering method. We used the emulator from Android Studio, and the client confirmed that it's also an issue on real devices.

The problems are as follows:

Screenshot1_ooo.png

Screenshot 1: the text is a series of lowercase and uppercase letter o. The white space between two such o's should be constant. But we can see in the screenshot that it's not, and the o's looked "grouped" into small bundles, with tighter space inside the bundle, and bigger space between bundles. The randomness in the white space between the o's varies with the rendering size, and is most obvious to the naked eye in small sizes. This is a technical demonstration of the issue, more than a practical one, as such text is rare in user interfaces.

Screenshot2_TestWordTestWord.png

Screenshot 2: In practice, the issue affects real text, in that it distorts the spacing between letters inside words. Here, the text is "TestWord" written twice. We can see that the "st" letters are too close to each other in the first "TestWord", and that the letters "or" are too close in the second "TestWord". This doesn't reflect the intended rendering of the font, which has been carefully designed to look uniformly spaced and readable. As this affects even the default text fonts of Android, it's a rather serious issue, that probably causes jarring text rendering on all lower-end devices that don't have a high enough pixel density to make up for the random variations in the number of pixels between letters.

Speculation about possible technical causes is that probably Android isn't rounding advance widths that it gets from HarfBuzz as it should, or could be doing shaping with subpixel / fractional values but then not rendering with subpixel positioning.

I'm available if you have further questions. I would be delighted to be able to come back to our client with more information about this issue. Thanks in advance!

Android code for reproducing the waterfall example:

@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
    Row {
        Column {
            Text("Default Font")
            (9..20).map {
                Text(
                    text = "$name $it.sp",
                    fontSize = it.sp
                )
            }
        }
        Column {
            Text("Default Serif Font")
            (9..20).map {
                Text(
                    text = "$name $it.sp",
                    fontFamily = FontFamily.Serif,
                    fontSize = it.sp
                )
            }
        }
    }
}