Open root

Honor Dynamic Type Settings on a Website

iOS has a feature named Dynamic Type which developers can leverage to render text at user-specified sizes within their apps. To learn more about the feature, refer to the Typography section of the Apple Human Interface Guidelines. While Dynamic Type primarily benefits iOS apps, websites can also take advantage of this feature to offer readers a seamless experience that suits their visual needs. To see Dynamic Type working on a website, refer to this demo. When you're ready to begin integrating it into your website, refer to Adding iOS Dynamic Type Support to Better and Using Dynamic Type with Web Views.

It is worth mentioning that Dynamic Type may not provide the right distribution of font categories for your website's needs. For instance, this website frequently leverages multiple nested layers of headings. Dynamic Type doesn't have a great solution for that situation unfortunately. While you could at least leverage the body style to correctly-render the main content, remember that this could result in the body font being much larger than the headings if the user's setting is particularly large. Weigh the costs & benefits with experimentation to determine what's right for your website. Ultimately, this website chooses not to honor Dynamic Type to prevent the issue described above.