Dynamic Font Scaling | Ionic Framework

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.
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.
Dynamic Font Scaling is enabled by default as long as the typography.css file is imported. Importing this file will define the --ion-dynamic-font variable which will activate Dynamic Font Scaling. While not recommended, developers can opt-out of Dynamic Font Scaling by setting this variable to initial in their application code.
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.
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:
Developers have two options for relative font sizes: em and rem.
em units set the font size of an element relative to the font size of its parent.
In the following example, the computed font size of .child is 40px because it is a child of .parent (2em * 20px = 40px).
However, the em unit has a compounding effect which can cause issues. In the following example, the second .child element has a computed font size of 80px since the font sizes compound.
Due to this compounding effect, we strongly recommend using rem units instead of em units when working with Dynamic Font Scaling. rem units set the font size of an element relative to the font size of the root element, which is typically <html>. The default font size of the root element is typically 16px.
In the following example, the computed font size of .child is 32px because the font size is being computed relative to html, not .parent.
Ionic components that define font sizes and participate in Dynamic Font Scaling typically use rem units. This sizes the text in each component relative to the font size of the root element, which is usually the html element. This means that as the root element's font size changes, the text in all Ionic components scale in a consistent manner. This avoids the need to manually override each component's font size. Some elements inside of these components, such as icons, use em units instead so the elements are sized relative to the text, though the text itself is sized using rem units.
Dynamic Font Scaling in Ionic builds on top of an iOS feature called Dynamic Type. To do this, Ionic sets the font of the root element to an Apple-defined text style. For consistency, Ionic uses the body text style.
Using the Apple-defined text style enables Dynamic Type, allowing all text in Ionic components to scale according to the system-level preference. Note that these Apple-defined fonts only work on Apple devices. As a result, these fonts will not work on Android devices even if your app is using ios mode.
Ionic follows Apple's Human Interface Guidelines for Typography when an app is in ios mode. As a result, important content is prioritized when the text size changes. This means a few things:
The Android Web View's font scaling mechanism is always enabled in web content and will automatically scale font sizes defined using the px unit. This means that any maximum or minimum font sizes specified using px will still be scaled even if the final font size does not align with the maximum or minimum font sizes specified.
In the following example we are using the min() function to indicate that the font size of .foo should be no larger than 14px.
If the root element's default font size is 16px, and the system-level font scale is 1.5 (i.e text sizes should be increased by 50%), then 1rem will evaluate to 24px because 16 * 1.5 = 24.
This is larger than our defined maximum of 14px, so one might assume that the evaluated font size of .foo is 14px. However, since the Android Web View scales any font sizes defined using the px unit, this means the 14px used in our min() function will also be scaled by 1.5.
As a result, this means that the maximum computed font size is actually 21px since 14 * 1.5 = 21 and therefore the overall computed font size of .foo is 21px.
The Chrome Web Browser on Android behaves differently than the Android Web View. By default, Chrome for Android does not respect the system-level font scale setting. However, the Chromium team is working on a new feature to allow for this. When enabled, this feature will change the zoom level of the html element which will cause the layout to increase in size in addition to the text.
Developers can test this behavior by enabling the experimental "Accessibility Page Zoom" feature in chrome://flags.
See https://bugs.chromium.org/p/chromium/issues/detail?id=645717 for more information.
Each platfo