🎚️
AppleのDynamic Typeの設計を分析する
この記事の内容は、一度別記事で書いたがこの部分だけを独立することにした
Appleの設計
このページには（かなり下の方で）デバイスの設定と 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 211は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では比を維持する。
Discussion