AppleのDynamic Typeの設計を分析する

この記事の内容は、一度別記事で書いたがこの部分だけを独立することにした

Appleの設計

https://developer.apple.com/design/human-interface-guidelines/typography#dynamic-type-sizes

このページには（かなり下の方で）デバイスの設定と body などの各フォントの組み合わせによるサイズの一覧表がある。画像を貼る。

分析

分析の結果、6つのエリアに分かれる。

	標準より小	標準	標準より大	追加の大
bodyより大	1	-	3	5
body	-	-	-	-
bodyより小	2	-	4	6

横の違いはユーザーによる設定。
縦の違いは開発者が指定したフォント。

「標準より大」と「追加の大」の違いは、iOSデバイスの設定画面で「さらに大きな文字」がOFFのままで設定できるのが「標準より大」。ONにしたら設定できるのが「追加の大」。

あと、後の説明でよく出てくるので、「標準より大」の中で一番大きいところ(xxxLarge)を「簡易設定最大」ということにする。

まずは図にしてみた。横がデバイスの設定の違い。縦が body などの各フォントの違いで、赤が body の挙動である。

エリア1(左上)の特徴

body が引かれた値と同じだけ引く

• body が17から14(-3)になったら
• Title1 の28は25(-3)になる。

エリア2(左下)の特徴

小さくなる素ぶりを見せながら最低11を守る。

• body が17から14になったら
• Footnote の13は12になり
• Caption 2 の11は11のまま。

エリア3と4(中央上下)の特徴

body が足された値と同じだけ足す
単純な処理であるが、割合で見ると、大きなものは少し大きく、小さなものは激しく大きく、という理想が実現されている。

• body が17から23(+6)になったら
• Title1 の28は34(+6)になり、
• Caption 2 11は17(+6)になる。

エリア5(右上)の特徴

デバイスの設定で大きくするほど、body とのサイズの差が小さくなる。上に制限がある感覚。これ以上大きくしても意味がないという壁が60近くにある。

• body が23(簡易設定最大)から53(真の最大)(+30)になったら
• Title1 の28は56(+28)になり
• Large Title の40は60(+20)になる

エリア6(右下)の特徴

body と大きさの比が一定。「簡易設定最大」での比をエリア6でも維持する。
比が一定なので body との主従関係を維持するような挙動。
エリア4の「すべてに同じ値を足す」というやりかたをエリア6でやると、差(表で言うと縦の差)がわかりにくくなるので、エリア6では比を維持する。