Tag: Dynamic Type
17 posts

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.

There are a ton of things to love about SwiftUI. But one of my favorites it's got to be the possibility of previewing Variants: the possibility of seeing your UI in dark/light modes, all dynamic type sizes, and orientations, side-by-side.

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.

There is an Environment Overrides panel in the toolbar on top of Xcode's Debug Area. It allows you to select some of the most common accessibility options and Dynamic Type sizes, like in the Accessibility Inspector, plus select dark/light mode.

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

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

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.
You should really try to support Dynamic Type. If you can’t for some reason, and you want to fall back to the Large Content Viewer, you can do so. I’d limit it to “sticky” bars. Maybe you have a custom tab bar, navigation bar, or similar? Check the UILargeContentViewerItem protocol. Most UIKit components conform to it already. You'll just need to set showsLargeContentViewer to true and add a UILargeContentViewerInteraction to your component. https://developer.apple.com/documentation/uikit/uilargecontentvieweritem

You may have noticed that navigation/tool/tab bars don't scale with large Dynamic Type sizes. It would take too much space from the screen leaving very little real estate for the actual content. A tap and hold will show the Large Content Viewer.

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.

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

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.
Showing 1-12 of 17 posts
