Day 123

Space label baselines for Dynamic Type

18 Sep 2022

What is the ideal distance between labels? It depends on styles for both of them and the dynamic type size, right? You wouldn't want to have the same distance for small and large text sizes. We can configure a standard distance between baselines.

There is a piece of text composed of a title and some body text. One of them has the large text size, the default one. The other one has the AX5 text size configured. There is a line showing a constraint between the first baseline of the body and the last baseline of the title. The code configures a system spacing between them so it dynamically adapts to any configuration. That is a better solution than configuring a constant vertical space between labels, which wouldn't look good for all text sizes.

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

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.

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

Text Size is one of my favorite Control Centre controls. It lets you quickly change the Dynamic Type size, of the whole system. But also, you can now specify a different setting per app. Also, check out Dark Mode, Magnifier, Sound Recognition...


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