CODEWITHSUNDEEP
androidflutter
Sarvesh Dalvi
Sarvesh Dalvi

Reputation: 2708

What is the ideal way to scale font size in App Development?

I know this question might sound a bit odd. I am a newbie in Flutter Development. While making my app responsive I always face an issue while scaling the text. If I keep the font size constant (say 10 or 20) it sometimes looks too small on devices with large resolution or too big on small phones. Then I tried scaling it with respect to screen dimensions (like 4% or screen width etc) but then the question remains to scale it with respect to screen height or width ? Hence I want to know what is the ideal way for scaling the text in general.

Thankyou in advance for answering.

Upvotes: 2

Views: 424

Answers (1)

Daniyal Javaid
Daniyal Javaid

Reputation: 1636

You can create dimension files and the sizes defined in these files will be used according to the device's dpi. You will have to create:

  1. res/values-mdpi/dimens.xml
  2. res/values-hdpi/dimens.xml
  3. res/values-xhdpi/dimens.xml
  4. res/values-xxhdpi/dimens.xml
  5. res/values-xxxhdpi/dimens.xml

Following are the ratios you would want to use for different screen size: 3:4:6:8:12 (m:h:xh:xxh:xxxh)

Let's say you have a device(hdpi), you want to set the text size to 12sp. So you will set text sizes as:

  1. mdpi - 9sp
  2. hdpi - 12sp
  3. xhdpi - 18sp
  4. xxhdpi - 24sp
  5. xxxhdpi - 36sp

Make sure the name should be same in all 'dimens.xml'

res/values-mdpi/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="title">12sp</dimen>
   <dimen name="paragraph">9sp</dimen>
</resources>

res/values-hdpi/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="title">16sp</dimen>
   <dimen name="paragraph">12sp</dimen>
</resources>

res/values-xhdpi/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="title">24sp</dimen>
   <dimen name="paragraph">18sp</dimen>
</resources>

res/values-xxhdpi/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="title">32sp</dimen>
   <dimen name="paragraph">24sp</dimen>
</resources>

res/values-xxxhdpi/dimens.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <dimen name="title">48sp</dimen>
   <dimen name="paragraph">36sp</dimen>
</resources>

Upvotes: 2

Related Questions