Force font size to lower (override limit system font-size) in Mobile Application

Hi and hello everyone, I hope you are always happy wherever you are :) 

I'm making a program application that displays a business card, but in displaying the card display, if the name and e-mail are too long, the layout of the card becomes messy downward

Next I tried to reduce the font-size, both from the direct outsystems setting and also using css

However, the font displayed on the business card can't be small anymore, assuming my font-size on mobile has a minimum limit of around 8px, and my goal is to shrink it to be smaller than 8px, maybe 3px 4px and 5px.

I have tried and read the ways in the forum one of the ways I override the font using this forge


But it didn't work, the font that was displayed was still large

Is there a way to reduce the font size even smaller? or indeed we can't reduce the font smaller than 8px?

Thank you very much

Rank: #56

Hi Syamsu,

If you reduce your font-size too much then it becomes unreadable and provides a bad experience to the user.

May I propose a different approach? Perhaps a Show more / Show less pattern?

It is very easy to implement and it provides a good variation of showing little text and only show more on demand by the user.

In order to implement it, you just need a local variable to control if it is in compact or expanded view and show the first X characters of the text using Substr function or the full text.

Alternatively, you can use Tooltip from OutSystems UI, to allow the user to see the full text on a balloon on click: