feat: global font size adjustment

[averyrousseau]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already include this feature request, without success.

Describe the Feature Request

Currently, there isn't a way to increase or decrease the font size by the same amount across the whole project. You can adjust the sizes on individual components, but this is annoying since you have to manually set the size for every component type used.

Describe the Use Case

My particular use case is a font that's just naturally small and hard to read at the default size (Teko), so I'd like to bump the font size across the whole app up by 5px or so. This feature also has accessibility applications, though -- you could add a size option to an app without causing non-typographic elements to scale as well.

Describe Preferred Solution

I can think of a few possible fixes:

1. New CSS variables for small/med/large font sizes that everything either uses directly, or is set relative to via calc adjustments. Googling around, it seems like there used to be SCSS variables like this in Ionic 4, but they've been removed.
2. One new CSS variable, something like --font-size-adjustment, that gets added to all sizes. This could be automated with a mixin, similar to padding handling RTL.
3. Update all font sizes to use em or rem units, so a global base size could be set on the root.

Describe Alternatives

As far as I can tell, the only alternatives are to either pick a different font, or manually update the font size for all components.

Related Code

No response

Additional Information

No response

[studioromeo]

Heya. Is there any advice on how to approach this? I noted in capacitor theres a text size plugin that uses -webkit-text-size-adjust. Is that the recommended path for changing font size in ionic?

[Lindsor]

I think option 3 provides the best experience and flexibility.
Usually if only em and rems are used, no px, then you can easily set the base font size in the root element and it will scale accordingly to the whole app and every component.
It also makes it so all paddings and spacings maintain the correct ratio.

If someone wants to just change 1 component font size or spacing then changing the font size on the root of that element will change it for only that element.

I think this is a rather large change though as it requires removing all px, values from the repo.

[liamdebeasi]

Thanks for the issue. This has been resolved via #28314, and this feature will be available in an upcoming minor release of Ionic Framework. Rather than add an explicit API, we opted to have our components use rem units internally so developers can adjust the root font size on html.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.