Scale text - Jetpack Compose

In Jetpack Compose, you can use Scale-independent Pixels to scale text. This unit ensures that the user's preferences are taken into account when determining the font size. We recommend to define the fontSize property inside the Typography object in your code to ensure consistency throughout your app.

You can use the @PreviewFontScale annotation to preview different font scales.

val typography = Typography(
    titleLarge = TextStyle(
        fontSize = 20.sp,
    ),
    bodyLarge = TextStyle(
        fontSize = 16.sp,
    ),
    headlineLarge = TextStyle(
        fontSize = 20.sp,
    ),
)

@FontScalePreviews
@Composable
fun fontScalePreviews() {
  Text(text = "This is font scale ${LocalDensity.current.fontScale}")
}