Day 113

Support Dynamic Type with text styles

8 Sep 2022

Dynamic Type is a feature that lets a user change the font size (smaller or larger) of the whole system or a particular app. To support it, choose a preferred font based on one of the 11 supported text styles: Large title, heading, body...

Four apps showcasing the available text styles: Large title, title 1, title 2, title 3, headline, subhead, body, callout, caption 1, caption 2 and footnote. Each one of the four apps has a different dynamic type option selected: extra small, large (which is the default), extra extra extra large and accessibility extra extra extra large. So it is easy to compare how these styles change for different dynamic type options. To support it, you can configure a preferredFont for a label, passing a textStyle.

Some of you have asked me how you can support what I do. This would really help, and would be hugely appreciated:

  • Find these posts useful? Share them at work, on social media, or with anyone that might find them interesting. Let's spread the word!

  • Check out any of my apps or games: Xarra!, RetroRapid!, or Mestre!.

    • A download and a review go a long way. They're free by default. On the App Store, ratings and reviews really help more people discover them.

    • Finding any of them useful? If so, and if you can afford it, purchasing lifetime access to all features or subscribing lets me buy the coffee that keeps me caffeinated. Caffeine keeps me going to maintain the apps, bring in new features that I hope you'll love, and keep writing.

You may also find interesting...

Make sure you support Dynamic Type up to the largest text size available. Take into account that there are five extra accessibility sizes available from the Accessibility Settings. It can make a huge difference for lots of users.

I wish the adjustsFontForContentSizeCategory was true by default. Instead, you need to configure it that way so elements adjust their font size as the content size category (dynamic type) changes when a preferred font is used for a given style.

If you are displaying something in two or more columns, you may want to change that to as little as one column when using some of the largest Dynamic Type settings to keep the text readable.


Content © Daniel Devesa Derksen-Staats on Accessibility up to 11! is licensed under CC BY 4.0. License details