Day 119

Flip stack axis for large Dynamic Type

14 Sep 2022

One of my favourite Dynamic Type tricks is to use Stack Views and flip the axis from horizontal to vertical given a certain content-size-category threshold. So effortless and it works so well in so many scenarios.

Two examples of a song row in the Apple music app. One is for the large (default) size. Hypothetically, it could be build using three stack views: a horizontal one that holds what I've called main content stack view and the more options button, horizontally; the main content stack view, which has a horizontal axis too, with the cover art and another stack view, this one with a vertical axis, for the title of the song and the name of the band. The second example shows that if you change the axis for the main content stack view, from horizontal to vertical, the cover art will come before the stack view for the title of the song and the name of the band, leaving much more room for text to be displayed.

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:)

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

If you have any web views in your app (Terms and Conditions and Privacy Policy, I'm looking at you), you can also support Dynamic Type for them. You can set an Apple system font with the same styles available for native development in your CSS.


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