Dynamic Font Scaling
Dynamic Font Scaling is a feature that allows users to choose the size of the text displayed on the screen. This helps users who need larger text for better readability, and it also accommodates users who can read smaller text.
Dynamic Font Scaling is supported on Android, iOS, and iPadOS starting in Ionic v7.5.
Try It Out
Be sure to try this on an Android, iOS, or iPadOS device.
If you are testing on Chrome for Android, make sure "Accessibility Page Zoom" is enabled.
Follow the Changing the Font Size on a Device guide to set your preferred font size, and watch the text in the demo below grow or shrink according to your preferences.
Enabling Dynamic Font Scaling in Ionic
This feature is currently opt-in on iOS. However, it will be enabled by default starting in Ionic 8 at which point the following CSS will no longer be necessary.
Dynamic Font Scaling is already enabled by default on Android. Developers can enable it on iOS using the following steps:
- Ensure that the typography.css file is imported.
- Add the following CSS to a global stylesheet:
html {
--ion-dynamic-font: var(--ion-default-dynamic-font);
}
Under the hood, Ionic sets the following CSS on iOS devices to enable Dynamic Font Scaling:
html {
font: var(--ion-dynamic-font);
}
Using Dynamic Font Scaling
Integrating Custom Components
Developers can configure their custom components to take advantage of Dynamic Font Scaling by converting any font-size
declarations that use px
units to use rem units instead. An easy way to convert from px
to rem
is to divide the pixel font size by the default browser font size, which is typically 16px
. For example, if a component has a font size of 14px
, then this could be converted to rem
by doing 14px / 16px = 0.875rem
. Also note that any Ionic components that have had their font sizes overridden should also be updated to use rem
units.
One thing to keep in mind is that the dimensions of your components may need to change to accommodate the larger font sizes. For example, width
and height
properties may need to change to min-width
and min-height
, respectively. Developers should audit their applications for any CSS properties that use length values and make any applicable conversions from px
to rem
. We also recommend having long text wrap to the next line instead of truncating to keep large text readable.
Custom Font Family
We recommend using the default fonts in Ionic as they are designed to look good at any size and ensure consistency with other mobile apps. However, developers can use a custom font family with Dynamic Font Scaling via CSS:
html {
--ion-dynamic-font: var(--ion-default-dynamic-font);
--ion-font-family: 'Comic Sans MS';
}