Effectively Handling Font Size Across Multiple Screen Sizes in Android with Jetpack Compose

Question

What is your usual approach for supporting font size on various devices? While the code below performs well on an Android emulator with mdpi resolution (480x800), it displays large fonts that take up the entire screen on an hdpi device with the same resolution. How should we address this issue? Is my method of checking the screen width accurate?

enum class DensityDpiDimension(private val dpi: Int) {
    DPI320(320),
    DPI360(360),
 ...
    DPI560(560),
    ...;
    companion object {
        @Composable
        fun getDimension(screenWidthDp: Int): Dimensions {
            return ...
        }
        @Composable
        fun getMarginDimens(screenWidthDp : Int) : MarginDimensions {
            return...
        }
        @Composable
        fun getFontDimension(screenWidthDp: Int): FontDimensions {
            return when {
                screenWidthDp <= DPI320.dpi -> sw320FontDimensions
                screenWidthDp <= DPI360.dpi -> sw360FontDimensions
                s...
            }
        }

        @Composable
        fun getFloatDimension(screenWidthDp: Int): FloatDimensions {
            return ...
        }
    }

}

 @Stable
    data class FontDimensions(
        val sp12: TextUnit,
        val sp13: TextUnit,
        val sp14: TextUnit,
        val sp18: TextUnit,
        val sp20: TextUnit,
        val sp16: TextUnit
    )
    val smallFontDimensions by lazy {
        FontDimensions(
            sp12 = 12.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.sp,
            sp16 = 16.sp
        )
    }
    val sw320FontDimensions by lazy {
        FontDimensions(
            sp12 = 12.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.sp,
            sp16 = 16.sp
        )
    }
    val sw360FontDimensions by lazy {
        FontDimensions(
            sp12 = 12.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.sp,
            sp16 = 16.sp
        )
    }
    val sw400FontDimensions by lazy {
        FontDimensions(
            sp12 = 12.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.sp,
            sp16 = 16.sp
        )
    }
    val sw440FontDimensions by lazy {
        FontDimensions(
            sp12 = 13.sp,
            sp13 = 13.10.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.5.sp,
            sp16 = 16.sp
        )
    }
    val sw480FontDimensions by lazy {
        FontDimensions(
            sp12 = 12.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp16 = 16.sp,
            sp18 = 18.sp,
            sp20 = 20.sp
        )
    }
    val sw520FontDimensions by lazy {
        FontDimensions(
            sp12 = 22.80.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.sp,
            sp16 = 16.sp
        )
    }
    val sw560FontDimensions by lazy {
        FontDimensions(
            sp12 = 22.80.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.sp,
            sp16 = 16.sp
        )
    }
    val sw600FontDimensions by lazy {
        FontDimensions(
            sp12 = 22.80.sp,
            sp13 = 13.sp,
            sp14 = 14.sp,
            sp18 = 18.sp,
            sp20 = 20.sp,
            sp16 = 16.sp
        )
    }

Answer 1

Please refer to the official guidelines on screen densities.

Here are points that I would pinned from the documentation:

• Avoid using pixels to define distances or sizes. Different screens have different pixel densities, so the same number of pixels corresponds to different physical sizes on different devices.
• To preserve the visible size of your UI on screens with different densities, design your UI using density-independent pixels (dp) as your unit of measurement.
• When defining text sizes, you can instead use scalable pixels (sp) as your units. The sp unit is the same size as a dp, by default, but it resizes based on the user's preferred text size.

TLDR: In other words, when you use sp you don't need to specify different font dimensions for different screen densities. You can just use one.

And regarding to your problem of having a large font displaying on particular resolutions. It's probably a typo that you have for sw520FontDimensions, you put 22sp instead of 12sp there :)