I would like to emulate the font scale of devices inside of common compose code. So the idea is that...

# compose

[Timo Drick]

I would like to emulate the font scale of devices inside of common compose code. So the idea is that i want to create a webapp which previews how the content of a Android compose app looks like. To be able to show different font scale configurations of the device i would like to change the text size to simulate this. I already migrated the compose UI from Android to common compose code. But now i need a way to alter the font size for all compose child components in my preview composable. Is this possible?

[Zoltan Demant]

@Composable
fun scaledDensity(scale: Float): Density {
    return with(LocalDensity.current) {
        Density(
            density = density * scale,
            fontScale = fontScale,
        )
    }
}

CompositionLocalProvider(
    LocalDensity provides scaledDensity(1.4f),

Is what I do, works great on desktop!

[Timo Drick]

Wow thank you so much. Helps a lot. And so easy solution 😄

[Albert Chang]

Note that this isn't simulating the non-linear font scaling on Android 14+ so it won't be completely the same effect.
Check here for the implementation.