The Curious Case of Android Font Size

Basics first

“dp” — Density-independent Pixel — An abstract unit based on the physical density of the screen. The unit which is relative to a dpi (dots per inch) screen, on MDPI devices 1dp is roughly equal to 1px. When running on a higher density screen, the number of pixels used to draw 1dp is scaled up by a factor appropriate for the screen’s dpi. Likewise, when on a lower density screen, the number of pixels used for 1dp is scaled down. More on these scaling later. Using dp units is a simple solution to making the view dimensions in your layout resize properly for different screen densities. That is, dp for margins.

Why go for “dp” whereas it is not recommended unit for font size?

Because going forward with “sp” may end up breaking your beautiful design if the user has some wonky font size preference. Moreover, the user may end up blaming your app for not handling this and not their own life choice!

That’s not it. We can still have more superior control over this by using pixels(“px”) instead of “dp”.

We can define custom font size by declaring how much pixels should it accommodate in different density screens. This is more like “dp” only but with your custom scale factor.

MDPI

<dimen name="font_size_m">14px</dimen> <!--1X-->

LDPI

<dimen name="font_size_m">10.5px</dimen> <!--LDPI = (MDPI*0.75)-->

HDPI

<dimen name="font_size_m">21px</dimen> <!--HDPI = (MDPI*1.5)-->

XHDPI

<dimen name="font_size_m">28px</dimen> <!--XDPI = (MDPI*2)-->

XXHDPI

<dimen name="font_size_m">42px</dimen> <!--XXDPI = (MDPI*3)-->

XXXHDPI

<dimen name="font_size_m">56px</dimen> <!--XXXDPI = (MDPI*4)-->
XXHDPI looks fine but the text in HDPI looks HUGE.
<resources><!--XXDPI = (MDPI*3)-->
<dimen name="font_size_xxxl">150px</dimen>
<dimen name="font_size_xxl">120px</dimen>
<dimen name="font_size_xl">90px</dimen>
</resources>
<resources><!--HDPI = (MDPI*1.5)-->
<dimen name="font_size_xxxl">75px</dimen>
<dimen name="font_size_xxl">60px</dimen>
<dimen name="font_size_xl">45px</dimen>
</resources>
For each font size in HDPI, reduced number of pixels by 15.
<resources><!--HDPI = (MDPI*1.5)-->
<dimen name="font_size_xxxl">60px</dimen>
<dimen name="font_size_xxl">45px</dimen>
<dimen name="font_size_xl">30px</dimen>
</resources>

The question still remains, why “sp” is recommended unit for font size then?

Because it considers the font size preference of the user. This is the only primary reason for it, while I appreciate the point of using “sp”, this cannot be used when you are building an app which has complex design and you cannot compromise on even a pixel.

How big players are doing it?

Here is a comparison of how Reddit & Swiggy have their own approach to font size.

Comparison of Reddit on the Same device with different font preferences
Comparison of Swiggy on the Same device with different font preferences

Conclusion

There is no definite rule for what unit of font size should be used. It depends on the preference of the developer/designer and the complexity of the design. In our app Hush, we followed a mixed approach. We defined our own scale factors where it was necessary and used “sp” as well.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store