.Net MAUI

Getting started with Font Scaling in .NET MAUI

Howdy! 🙋‍♀️ Continuing with ☃️ Coding Winter 2021 – C # and .NET MAUI ❄️” initiative, today is #DayEleven and we will be learning about Font Scaling in .NET MAUI!

When using our mobile device we notice that everything we see has the same font sizes, this is a configuration that the user can adapt according to their needs, therefore, it’s important that we make sure that our application adapts to the font size configured in the Operating System to maintain a good user experience. This is called Font Scaling and in this article, we are going to learn how to do it in the .NET MAUI. Let’s see! 😎


Let’s start!

How does Font Scaling work?

To achieve this, .NET MAUI has given us a property available in all the controls, its name is FontAutoScalingEnabled a property that by default is enabled so that the controls automatically adapt to the user’s preferences, however, if for some reason you want to disable it, you can do so by setting the property value as False. But also, it works with FontImageSource to adjust the font of the icons! In this way, you have a fully adapted user interface! 💚💕

How can I configure the preferences on my device?🧐

In both Android and IOS, you can access with the following steps:

    • Settings ➡ Display and Brightness  (Display on Android)➡ Text size.

La imagen tiene un atributo ALT vacío; su nombre de archivo es 97124d44-8d5a-4cc1-9869-7951e36b8447

Finally, you can see some dimension examples in the following image obtained from the official documentation.

the same UI at different text scaling


Finally, I leave some important points!

  • When using Font Scaling, I recommend that you verify the final result of your UI in each of the dimensions to make sure that no design is broken and if so, that you can fix it!

 

  • You may need to develop an application that has set requirements unrelated to system preferences. You can do it, just keep in mind that the application remains as adaptable and friendly as possible.

If you want to know more information about .NET MAUI, I invite you to see the .NET MAUI Roadmap Previews.


And voila 🤓, in this simple way, we already have our user interface adapted to user preferences with .NET MAUI! 🕵️‍♀️

Spanish post:

References:

I hope this article has been super useful for you! ⭐️ Thanks for reading! 💚💕

Tagged ,

Leave a Reply

Your email address will not be published. Required fields are marked *