iOS の Dynamic Type でテキストサイズはどのくらい変化するのか？

## はじめに

iOS のアクセシビリティ機能の１つにユーザーインターフェース上のテキストサイズを自動的にスケーリングする Dynamic Type があります。

[Scaling Fonts Automatically - UIKit | Apple Developer](https://developer.apple.com/documentation/uikit/uifont/scaling_fonts_automatically)

Android ではテキストに対して Scale-independent Pixels (sp) という単位でのサイズ指定するのとは異なり、テキストに対して Header, Body のような用途別のスタイルで指定するのが特色です。

そのため、ユーザーのサイズ設定に応じて各スタイルのフォントサイズがどのように変化するのかが想像しにくいため、サンプルアプリを作って見た目と数値で確認できるようにしてみました。

## サンプルアプリ

サンプルアプリのリポジトリはこちらです。

[temoki/UIKit_DynamicType - GitHub](https://github.com/temoki/UIKit_DynamicType)

アプリを起動すると、デバイスの現在の設定に応じてカテゴリ別にテキストとそのサイズが表示されます。

<img width="375" alt="app_screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16508/3ddc4be0-a83a-1bbd-0c12-2ea6e1be32b9.png">

## フォントサイズを決める変数

### UIContentSizeCategory

[UIContentSizeCategory - UIKit | Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uicontentsizecategory)

ユーザーが iOS のアクセシビリティ設定で変更可能なテキストサイズのカテゴリです。「さらに大きな文字」を ON にすると、最大 12 段階でサイズを変更できることになります。

**さらに大きな文字 OFF**
<img width="375" alt="app_screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16508/180974fa-7971-2a46-c0b8-4173dec05a0f.png">

**さらに大きな文字 ON**
<img width="375" alt="app_screenshot.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16508/b3e05e47-5d10-69b1-89d5-073b832a0366.png">

| name | case | rawValue |
| --- | --- | --- |
| **XS** | `.extraSmall` | `"UICTContentSizeCategoryXS"` |
| **S** | `.small` | `"UICTContentSizeCategoryS"` |
| **M** | `.medium` | `"UICTContentSizeCategoryM"` |
| **L** | `.large` | `"UICTContentSizeCategoryL"` |
| **XL** | `.extraLarge` | `"UICTContentSizeCategoryXL"` |
| **XXL** | `.extraExtraLarge` | `"UICTContentSizeCategoryXXL"` |
| **XXXL** | `.extraExtraExtraLarge` | `"UICTContentSizeCategoryXXXL"` |
| **A11yM** | `.accessibilityMedium` | `"UICTContentSizeCategoryAccessibilityM"` |
| **A11yL** | `.accessibilityLarge` | `"UICTContentSizeCategoryAccessibilityL"` |
| **A11yXL** | `.accessibilityExtraLarge` | `"UICTContentSizeCategoryAccessibilityXL"` |
| **A11yXXL** | `.accessibilityExtraExtraLarge` | `"UICTContentSizeCategoryAccessibilityXXL"` |
| **A11yXXXL** | `.accessibilityExtraExtraExtraLarge` | `"UICTContentSizeCategoryAccessibilityXXXL"` |

### UIFont.TextStyle

[UIFont.TextStyle - UIFont | Apple Developer Documentation](https://developer.apple.com/documentation/uikit/uifont/textstyle)

UIKit の各種コントロールに設定するテキストスタイルです。

| name | case | rawValue |
| --- | --- | --- |
| **Large Title** | `.largeTitle` | `"UICTFontTextStyleTitle0"` |
| **Title 1** | `.title1` | `"UICTFontTextStyleTitle1"` |
| **Title 2** | `.title2` | `"UICTFontTextStyleTitle2"` |
| **Title 3** | `.title3` | `"UICTFontTextStyleTitle3"` |
| **Headline** | `.headline` | `"UICTFontTextStyleHeadline"` |
| **Subhead** | `.subheadline` | `"UICTFontTextStyleSubhead"` |
| **Body** | `.body` | `"UICTFontTextStyleBody"` |
| **Callout** | `.callout` | `"UICTFontTextStyleCallout"` |
| **Footnote** | `.footnote` | `"UICTFontTextStyleFootnote"` |
| **Caption1** | `.caption1` | `"UICTFontTextStyleCaption1"` |
| **Caption2** | `.caption2` | `"UICTFontTextStyleCaption2"` |

## テキストサイズの変化

UIContentSizeCategory と UIKit.TextStyle の組み合わせによるフォントサイズを表にまとめてみました。

| | XS | S | M | L | XL | XXL | XXXL | A11yM | A11yL | A11yXL | A11yXXL | A11yXXXL |
| --- | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: | :-: |
| **Large Title** | 31 | 32 | 33 | 34 | 36 | 38 | 40 | 44 | 48 | 52 | 56 | 60 |
| **Title 1**     | 25 | 26 | 27 | 28 | 30 | 32 | 34 | 38 | 43 | 48 | 53 | 58 |
| **Title 2**     | 19 | 20 | 21 | 22 | 24 | 26 | 28 | 34 | 39 | 44 | 50 | 56 |
| **Title 3**     | 17 | 18 | 19 | 20 | 22 | 24 | 26 | 31 | 37 | 43 | 49 | 55 |
| **Headline**    | 14 | 15 | 16 | 17 | 19 | 21 | 23 | 28 | 33 | 40 | 47 | 53 |
| **Subhead**     | 12 | 13 | 14 | 15 | 17 | 19 | 21 | 25 | 30 | 36 | 42 | 49 |
| **Body**        | 14 | 15 | 16 | 17 | 19 | 21 | 23 | 28 | 33 | 40 | 47 | 53 |
| **Callout**     | 13 | 14 | 15 | 16 | 18 | 20 | 22 | 26 | 32 | 38 | 44 | 51 |
| **Footnote**    | 12 | 12 | 12 | 13 | 15 | 17 | 19 | 23 | 27 | 33 | 38 | 44 |
| **Caption1**    | 11 | 11 | 11 | 12 | 14 | 16 | 18 | 22 | 26 | 32 | 37 | 43 |
| **Caption2**    | 11 | 11 | 11 | 11 | 13 | 15 | 17 | 20 | 24 | 29 | 34 | 41 |

グラフにもしてみました。

<img width="597" alt="スクリーンショット 2020-01-17 14.33.46.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/16508/30265226-1c90-0e06-c7c7-5a111b5c7d82.png">

「さらに大きな文字」が ON の場合に想像以上に大きなフォントサイズになることがわかりますね。この状態でもレイアウトが破綻しないアプリを作るのはなかなか大変そうです💦

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">MAXまで大きくしたら設定アプリはこうなる <a href="https://t.co/Qn3sFIpGEn">pic.twitter.com/Qn3sFIpGEn</a></p>&mdash; Tomoki Kobayashi🐢🐢🏝 (@temoki) <a href="https://twitter.com/temoki/status/1214520936742866944?ref_src=twsrc%5Etfw">January 7, 2020</a></blockquote> 

---

この記事では Xcode 11.3 と iOS 13.3 シミュレータで確認した結果を掲載しています。