iOS の日本語システム フォントは少し小さく表示される
ある方に教えていただいたちょっとやっかいな Issue があります。
その Issue について、かつてコードページという角度から英数字と日本語の間の溝に向き合っていたことを思い出しながら、興味深く感じたので自分なりに理解したことをまとめてみます。
iOS のシステムフォント
iOS ではシステム フォントとし SF (San Francisco) が採用されてて、条件によって SF Pro Text と SF Pro Display が使い分けられたりしているようです。
そして、SF Pro には日本語が含まれていないので、日本語は ヒラギノ角ゴシック ProN で表示されます。
見た目の印象を揃える自動調整
SF Pro とヒラギノ角ゴシック ProN を同じフォントサイズで表示した場合、ヒラギノ角ゴシック ProN の方が若干大きめに見えてしまいます。
iOS はこれを同じくらいの大きさで見えるように約 93.5% のサイズに自動調整して表示するようです。手元の iPhone で試してみたところ、若干わかりにくいですが、確かににそんな感じです。
何が困る？
Figma などのデザインツールを使って作成したデザインで指定されたサイズをそのまま実装すると、iOS 上では想定よりも少し小さく表示され、意図したデザインにならない、ということが発生してしまいます。
そもそもシステム フォントを使わず、ヒラギノ角ゴシック ProN を明示的に指定して、欧文も和文も同じフォントにしちゃう、という逃げ方をすぐ思いつく方も多いと思います。
しかしながら、この方法についても、テキスト オブジェクトの高さが実際よりも小さく計算されてしまい、グリフが切れて表示されてしまう場合があるという別の Issue ががあるため、残念ながらワークアラウンドとして簡単に採用する訳にも行きません。
どうする？
残念ながら現時点ではスマートな解決方法がないため、Figma 指定したサイズと同じサイズで表示するためのフォント サイズを計算し、何らかの方法で実装側に伝えてそのフォント サイズで実装してもらう、ということしかなさそうです。
サイズの計算については、iOS 日本語システムフォント サイズ計算 というプラグインがあるのでコチラが役に立ちそうです。
参考文献
この記事が気に入ったらサポートをしてみませんか？