How to make the font size smaller than the browser's minimum default?

Question

I have an element with a font size that dynamically changes.

The issue is that most browser's limit the font size to 6px and some even 9px .

This can be found by the following flag: chrome://settings/fonts

Is there a way to make an element's font size below the minimum, without telling the user to change their browser's minimum.

I have considered using transform: scale(x) - but how do I go about scaling an element down from 9px (browser minimum in this case) and have it look like the target 4px (in this example)?

Answer 1

I have an element with a font size that dynamically changes.

The issue is that most browser's limit the font size to 6px and some even 9px .

This can be found by the following flag: chrome://settings/fonts

Is there a way to make an element's font size below the minimum, without telling the user to change their browser's minimum.

I have considered using transform: scale(x) - but how do I go about scaling an element down from 9px (browser minimum in this case) and have it look like the target 4px (in this example)?