Day 114

Dynamic Type sizes don't scale linearly

9 Sep 2022

When working with Dynamic Type, I find it useful to remember that sizes for the different text styles won't scale linearly, nor will they do proportionally between them. For larger dynamic type sizes, styles will come closer together in size.

Graph showing how the text size changes, in points, for the different text styles, as the dynamic type size changes. It is noticeable how styles get closer and closer to each other as the user picks a larger dynamic text size. Tere is always a hierarchy, but for small sizes, it is much more distinguishible. It seems a good strategy though, larger styles are already quite large and smaller ones will benefit from growing even more in order to become readable on mobile deices.

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...

For other UI elements that could also benefit from being scaled when using Dynamic Type, you can use UIFontMetrics's scaledValue(for:). Some good examples are progress bar components, which tend to be quite slim. https://developer.apple.com/documentation/uikit/uifontmetrics/scaledvalue(for:)

Ever wondered what the ideal width is for labels so the text is readable? Well, it depends. But readableContentGuide has you covered. You can configure the optimal width independently of Dynamic Type size or Size Classes. https://developer.apple.com/documentation/uikit/uiview/readablecontentguide

The fastest way for testing Dynamic Type while developing, and to quickly see how your app's UI flows, is by using the "option + cmd + plus/minus" to increase/decrease the text size in your simulator.


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