---

How To Toggle Between Dynamic Text Sizes in SwiftUI Previews

In this article, I show you how to toggle between dynamic text sizes in SwiftUI previews.

.sizeCategory

To render a SwiftUI Preview with an increased text size (Dynamic Type), we use the environment modifier on our view.

<span><span style="color: var(--shiki-token-function)">#Preview</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)">BarcodeView</span><span style="color: var(--shiki-token-punctuation)">(</span></span>
<span><span style="color: var(--shiki-token-function)">        code</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;N000012345&quot;</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-token-function)">        header</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;Meråpent bruker&quot;</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-token-function)">        footer</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;Deichman&quot;</span></span>
<span><span style="color: var(--shiki-token-function)">    </span><span style="color: var(--shiki-token-punctuation)">)</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-function)">environment</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-function)">\.sizeCategory, .accessibilityExtraExtraExtraLarge</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>

If you want to compare your view with different text sizes, you can add more previews like so:

<span><span style="color: var(--shiki-token-function)">#Preview</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-string-expression)">&quot;Normal Text Size&quot;</span><span style="color: var(--shiki-token-punctuation)">)</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)">BarcodeView</span><span style="color: var(--shiki-token-punctuation)">(</span></span>
<span><span style="color: var(--shiki-token-function)">        code</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;N000012345&quot;</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-token-function)">        header</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;Meråpent bruker&quot;</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-token-function)">        footer</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;Deichman&quot;</span></span>
<span><span style="color: var(--shiki-token-function)">    </span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>
<span><span style="color: var(--shiki-token-function)">#Preview</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-string-expression)">&quot;Extra Large Text Size&quot;</span><span style="color: var(--shiki-token-punctuation)">)</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)">BarcodeView</span><span style="color: var(--shiki-token-punctuation)">(</span></span>
<span><span style="color: var(--shiki-token-function)">        code</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;N000012345&quot;</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-token-function)">        header</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;Meråpent bruker&quot;</span><span style="color: var(--shiki-token-function)">,</span></span>
<span><span style="color: var(--shiki-token-function)">        footer</span><span style="color: var(--shiki-token-punctuation)">:</span><span style="color: var(--shiki-token-function)"> </span><span style="color: var(--shiki-token-string-expression)">&quot;Deichman&quot;</span></span>
<span><span style="color: var(--shiki-token-function)">    </span><span style="color: var(--shiki-token-punctuation)">)</span><span style="color: var(--shiki-color-text)">.</span><span style="color: var(--shiki-token-function)">environment</span><span style="color: var(--shiki-token-punctuation)">(</span><span style="color: var(--shiki-token-function)">\.sizeCategory, .accessibilityExtraExtraExtraLarge</span><span style="color: var(--shiki-token-punctuation)">)</span></span>
<span><span style="color: var(--shiki-color-text)">}</span></span>
<span></span>

This allows us to toggle between the different previews at the top of the preview canvas.