Day 122

Find ideal label width with readableContentGuide

17 Sep 2022

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

There is an iPad with a title and some text. It has the default text size and the text has fairly large margins on both sides so the text can be read without having to move your head too much. You could fix the, but then for large sizes, it wouldn't work that well. Instead, you can configure the anchor of your labels to be equal to the anchor of the readable content guide. That way, the of the label will be optimised for the dynamic type text size chosen. Another example shows how margins are smaller for extra-extra-extra large sizes, and for AX5, there are barely any margins and the text goes almost side to side of the iPad.

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

Day 120

Use fewer columns with large Dynamic Type

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.

Day 130

Scale custom UI with UIFontMetrics

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

Day 129

Support Dynamic Type in WKWebView CSS

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.

Apple Dynamic Type iOS

← Day 123

Day 121 →