How to use the .dynamicTypeSize modifier in SwiftUI
Dynamic Type allows users to set their preferred text size on the device they are using. This is great for accessibility, but without proper planning parts of your app can render useless if larger text sizes are not accounted for.
In cases where your design does not allow for larger text sizes, the .dynamicTypeSize
modifier can be used to set an upper limit.
Usage
You can use the modifier with either a specific Dynamic Type size, or a range of sizes.
<span><span style="color: var(--shiki-token-function)">VStack</span><span style="color: var(--shiki-color-text)"> {</span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Text</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-string-expression)">"Small text"</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span><span style="color: var(--shiki-color-text)"> .</span><span style="color: var(--shiki-token-function)">dynamicTypeSize</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-function)">.small</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Text</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-string-expression)">"Text scales to accessibility1 size"</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span><span style="color: var(--shiki-color-text)"> .</span><span style="color: var(--shiki-token-function)">dynamicTypeSize</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-keyword)">...</span><span style="color: var(--shiki-token-function)">DynamicTypeSize.accessibility1</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span></span>
<span><span style="color: var(--shiki-color-text)"> </span><span style="color: var(--shiki-token-function)">Text</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-string-expression)">"Text can scale between small and large"</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span><span style="color: var(--shiki-color-text)"> .</span><span style="color: var(--shiki-token-function)">dynamicTypeSize</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-function)">.small </span><span style="color: var(--shiki-token-keyword)">...</span><span style="color: var(--shiki-token-function)"> .large</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>