CODEWITHSUNDEEP
flutter
poultrynews
poultrynews

Reputation: 639

Is it recommended to set Font size with respect to display size?

For the sake of responsive design, should font size be a set number or variable which depends on screen size?

I ask this specifically because Flutter uses 'logical pixels' when assigning FontSize, and I'm unsure how they behave on different screen sizes.

When going from display sizes 4" to 6.8", or even 10" tablets, is something like this:

fontSize: min(MediaQuery.of(context).size.height,MediaQuery.of(context).size.width) /4

better than straight up hard coding fontSize: 40?

And I guess this question is more specifically about texts placed within other containers / columns / stacks and which may interfere with other design elements if they were to display in unintended ways.

What's the behavior like if containers width / height was dependent on screen size

Container(
  width: MediaQuery.of(context).size.width / 2,
  height: MediaQuery.of(context).size.height / 3,
  child: Text('This is a sample text')
)

vs if the container had a fixed size

Container(
  width: 400,
  height: 500,
  child: Text('This is a sample text')
)

What are the best practices in these cases?

Upvotes: 2

Views: 913

Answers (1)

Mehmet Esen
Mehmet Esen

Reputation: 6876

It's very situational.

In some cases, your fontsize should be fixed according to design principles. No problem there unless there are possible overflows.

If there are possible overflows, you have two options:

1 - If you want fixed fontsize, use https://api.flutter.dev/flutter/rendering/TextOverflow-class.html

When overflow occurs, you'll just crop the text however you want.

2 - In case of responsive design, there are multiple practises, but your example is not healthy in terms of responsiveness. Since there are many aspect ratios available for devices, you can't estimate how will look your design. I suggest to you mostly rely on device width instead height.

One way I use commonly, using FittedBox.

https://api.flutter.dev/flutter/widgets/FittedBox-class.html

FittedBox(
  fit: BoxFit.fitWidth,
  child: Text(someText)....

It will wrap automatically available space accordingly your fit type.

Another solution is you can create if conditions for specific range of sizes instead making an arithmetic calculation.

if(width < 400) fontsize = 14;
else if(width < 500) fontsize = 16;
...

Lastly, there is a very useful package for this kind problems, take a look at it: https://pub.dev/packages/auto_size_text

Upvotes: 2

Related Questions