Hello! I have a question about font rendering on ...

# compose-ios

[Alex Askerov]

Hello!

I have a question about font rendering on iOS. It is very different from the native rendering. It seems like it's the same font, but the font-kerning is not the same. Maybe something else is at play, but the kerning is what catches the eye the most.

This is quite an important issue for us because we are integrating the compose screen into an already existing app. Inconsistency in font rendering is not what we want, and our design team fairly unhappy about it.

As an example, I've attached two screenshots. The first one is SwiftUI, and the second one is Compose. Both are just default texts with no additional settings and different font sizes, ranging from 10 to 20.

Maybe someone have any ideas how to fix it on our side. Is there any plans for making font rendering closer to the native one? Thanks!

[Konstantin Tskhovrebov]

Yes. Default settings are different and you have to play with line heights and paddings on the compose side

[Konstantin Tskhovrebov]

As I see it is not a rendering problem but the styling

[Alex Askerov]

Ok thanks!
Seems like it basically a letter spacing. I will try to play with it.

But anyway, I think it make sense to have it out of box similar to platform defaults.

[Konstantin Tskhovrebov]

It should be the same between platforms for the same compose widgets

[Alex Askerov]

Got your point. Thanks!

But take a look at it from a Compose user's perspective, especially users like us who integrate Compose screens into existing iOS and Android applications.

Basically, Compose already has platform-specific fonts. They are not the same between platforms.

On Android, by default, I get the same-looking fonts as on any other screen. But on iOS, I do not. For me, this seems like a problem. Maybe it's not a big deal for those who are creating Compose multiplatform apps from scratch, but for those using it in existing apps, it could be a blocker.

I would say that I'm expecting one of two behaviors: either fonts will look totally the same between platforms or they will look native by default. Right now, it seems to be somewhere in between.

[Alex Askerov]

btw, tried letterSpacing, it works, but anyway even with zero spacing in not as narrow as default SwiftUI

[Konstantin Tskhovrebov]

image.png

[Konstantin Tskhovrebov]

https://github.com/terrakok/ComposeIosFontsTest

[Alex Askerov]

Ok seems like with custom font it's fine. Could be an option.
But if I use default font, I've got the difference.

Text(
    text = "Default font: Whereas recognition of the inherent dignity", fontSize = 18.sp,
)

Text("Default font: Whereas recognition of the inherent dignity").font(.system(size: 18))

[Konstantin Tskhovrebov]

seems like defaults are not equal with the system

[Konstantin Tskhovrebov]

@Elijah Semyonov do you know why?

[Elijah Semyonov]

Because Skia doing layout differently (inter letter spacing is bad imo), and default font weight on Compose and iOS being different

[Konstantin Tskhovrebov]

yes

default font weight on Compose and iOS being different

that is the question

[Elijah Semyonov]

I’ve just scanned through the code and both should return W400. Weird, I guess @Ivan Matkov is more informed about this behavior.

[Ivan Matkov]

> Right now, it seems to be somewhere in between.
Regarding that. Compose is not monolith - we have a few layers.

Default font (compose.ui layer) should be system for sure - we don't want to embed the font because it will increase the app size
In the same time design system (like compose.material3) defines exact look, sizes padding etc - there is no reason for Compose doesn't apply the value that it sets. For the material library there is no reason to make it different unless it's another device type (big screen, mouse-driven etc).
If you need system like UI - material library is a way to go only for Android. For other you need some alternative (see https://github.com/alexzhirkevich/compose-cupertino as a good example).
So, if you have a wrapper like MaterialTheme around this text/screen/app - it's expected that it will behave like it should in material world.

Speaking of text layouting itself. Compose does delegate it to SkiaParagraph, the issue here can be only passing wrong parameters here, but currently I'm not sure that it's the case.
Adjusting defaults of foundation.text.BasicText (not material.Text) probably makes sense, but it needs to be carefully investigated/compared first. Not only with SwiftUI but also with other layouts. Another good reference is browser

[Alex Askerov]

Default font (compose.ui layer) should be system for sure - we don't want to embed the font because it will increase the app size

In the same time design system (like compose.material3) defines exact look, sizes padding etc - there is no reason for Compose doesn't apply the value that it sets.

Yes, agree, that's clear. When I wrote about "somewhere in between" I mean only fonts, nothing more.

[Alex Askerov]

So, I’ve played a bit little bit more. Seems like the only thing that wrong is letter spacing. Even in example from Konstantin everything looks fine only because there is ⁠style=MaterialTheme.typography.titleLarge in compose code which set letterSpacing=0 under the hood.

I’ve also tried to set zero letter spacing for default system font. It make it closer to SwiftUI but anyway compose has wider spacing.

[Alex Askerov]

There is same issue for Flutter https://github.com/flutter/flutter/issues/150824

If I understand correctly, Flutter's text rendering is handled by Skia, which delegates text shaping to HarfBuzz. There's an issue on HarfBuzz (link), which complained about HarfBuzz's text tracking deviates from that of macOS in 2019. Although I don't quite get the content in that page and whether the issue was considered fixed.