bug: [7.5.0] Assumes html font size is 16px. Html font-size: 10px makes the text small for all ionic components.

[fieldscage]

Prerequisites

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

Ionic Framework Version

v7.x

Current Behavior

For the past 3 years of using Ionic, we have always used rem for font sizes and styling dimensions. However, we set the html font size to 10px and the body font size to 1.6rem. This allows us to write margin: 1rem for a 10px margin.

After upgrading to 7.5.0, component font sizes are small due to the html font size being 10px. There should be a way to denote to the Ionic framework what the html font size is instead of the framework assuming that the html font size is 16px.

Expected Behavior

ion-header > ion-toolbar > ion-title font size is 12.5px
Expected: 20px

ion-button font-size is 8.75px
Expected: 14px

Steps to Reproduce

1. ionic start myApp blank
2. Choose Vue
3. Add code to App.vue

<style lang="css">
html {
    font-size: 10px;
}

body {
    font-size: 1.6rem;
}
</style>

Code Reproduction URL

https://github.com/fieldscage/ionic-component-sizes

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 7.5.0

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v18.18.0 (/usr/local/bin/node)
npm : 9.8.1
OS : macOS 14.0

Additional Information

No response

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. While setting font-size: 10px on html and then doing font-size: 1.6rem on body works for your use case, that's not a great pattern to implement.

Ionic looks to the root font size to determine how to size the text in its components by using rem. In your case, the root font size is 10px, so all of Ionic's components will be sized based on that. If you don't want the font sizes to be based on 10px, then you shouldn't be setting the root font size to 10px to begin with.

I'd recommend using CSS variables instead of overriding the font sizes for this purpose. Your margins are tightly coupled to the root font size, so this means that any component (not just Ionic components) that uses rem will not render correctly in your app.

Instead, I'd recommend doing the following:

:root {
  --custom-margin-sm: 8px;
  --custom-margin: 10px;
  --custom-margin-md: 14px;
  --custom-margin-lg: 16px;
}

These are just example sizes, so you can set them to whatever you want. If you are using SASS, you can use a SASS variable so that the generated CSS variables update as you change the base SASS variable:

$default-margin: 10px;

:root {
  --custom-margin-sm: $default-margin * 0.8;
  --custom-margin: $default-margin;
  --custom-margin-md: $default-margin * 1.4;
  --custom-margin-lg: $default-margin * 1.6;
}

[fieldscage]

@liamdebeasi Take Bootstrap for example. They have a font-size-root variable and a font-size-base variable. This is very simple for Ionic to implement.

For us, this change in 7.5.0 created hundreds of UI errors without any warning of this side effect in your release notes or blog. Therefore, I saw it as a bug. Since, forcing everyone to use an html font size of 16px is constricting, should I pose this as a feature request?

[liamdebeasi]

Take Bootstrap for example. They have a font-size-root variable and a font-size-base variable. This is very simple for Ionic to implement.

This is not simple for Ionic to implement, and we think this would degrade the developer experience.

The only option to both avoid this problem and support Dynamic Font Scaling is to use em units. Doing so introduces a compounding effect which would make it difficult for developers to adopt Dynamic Font Scaling in their applications. This is because Ionic components would be influenced by ancestor font size changes. Developers would need to go through every instance of this and debug which font-size declaration was contributing to the behavior change.

Your application would likely run into this problem too if you used em font sizes anywhere in your application.

For us, this change in 7.5.0 created hundreds of UI errors without any warning of this side effect in your release notes or blog

This change is mentioned on both the announcement blog ("As part of this change most Ionic UI components have been updated to use rem units instead of px units where appropriate.") and on the Dynamic Font Scaling documentation.

Since, forcing everyone to use an html font size of 16px is constricting, should I pose this as a feature request?

Ionic does not force anyone to use a root font size of 16px. The rem values we chose were based off the values that existed prior to Ionic 7.5.0. Developers are welcome to change the font size of the root element. However, text will scale based on that root font size since that is how rem is designed to work.

---

I understand this is causing an undesired change in your application, but Ionic is working as intended here. Your application is telling the browser to set the root font size to 10px, so the browser is sizing rem font sizes based on that.

The approach your application takes makes it very challenging to customize font sizes since you can not use rem units otherwise you'd run into the same problem reported here. You could use em units, but then you'd get the same compounding effect I detailed above. I encourage you to consider implementing design tokens instead of relying on the root font size to set margin values.

[fieldscage]

This change is mentioned on both the announcement blog ("As part of this change most Ionic UI components have been updated to use rem units instead of px units where appropriate.") and on the Dynamic Font Scaling documentation.

These reference expresses the change in components but does not warn of side effects (and for us, this is a breaking change).

We desire to opt out of Dynamic Font Scaling and set the root font size to utilize rem for sizing like margin: 1rem. This way, the entire site can be scaled, not just the font.

The only workaround I see here is to have a shared style sheet between all of our apps, explicitly setting the font size of all Ionic components. (Which is an undesired maintenance as it will have to be updated with Ionic updates).

Btw, Bootstrap does both font-size-root/font-size-base and dynamic font scaling. So it is possible.

[liamdebeasi]

We desire to opt out of Dynamic Font Scaling and set the root font size to utilize rem for sizing like margin: 1rem. This way, the entire site can be scaled, not just the font.

My main argument was that this isn't a great practice in mobile applications and will lead to other issues that I've detailed in previous comments. Typically in mobile apps the text scales and related elements scale in size to accommodate the larger text size. However, things like margins and paddings typically don't increase in size except for specific circumstances (such as with complex components like a date picker).

Btw, Bootstrap does both font-size-root/font-size-base and dynamic font scaling. So it is possible.

According to twbs/bootstrap#34107, Bootstrap does not support font scaling on iOS which is what Ionic's Dynamic Font Scaling feature was primarily designed for.

The only workaround I see here is to have a shared style sheet between all of our apps, explicitly setting the font size of all Ionic components. (Which is an undesired maintenance as it will have to be updated with Ionic updates).

The other solution is to implement design tokens instead of relying on font size for padding and margin. Design tokens are very common in applications for implementing a consistent design system.

---

I think this thread has served its purpose, so I'm going to lock it.