【UIデザインTips】 iOSで和文フォントだけ小さくなる罠

前置き

iOSの和文フォントが英文より小さくなる罠について、意外とデザイナー側からそれについて触れた記事が見当たらなかったので、ANDPAD社内で勉強会ネタにするとともにブログ記事にしました🤞

何が問題か

iOSのフォントは英文=San Francisco、和文=ヒラギノ角ゴです。

全く同じフォントサイズで英文フォントと和文フォントをレイアウトすると、和文フォントの方が大きく見えてしまうので、和文フォントを少し小さくするのはデザイン界では常識（と言い切ってしまうぞ!!）なのですが、iOSは「そういう組み方をした混植フォントをデザイナーに提供する」わけではなく「OS側でヒラギノ角ゴを縮小して」しまうことがデザイナー側からすると問題です。

↓

具体的には、和文のみでレイアウトされたデザインでは「ただただ文字が1ptくらい小さくなって」しまいます。

（実際には大きいフォントサイズを指定すると和文フォントサイズと英文フォントサイズの差が大きくなっていく。14pt-18pt程度のよくレイアウトする文字サイズだとだいたい1ptくらい和文フォントが小さくなると覚えておくとよいです。ほんまかいな！と思った方は参考記事をご参考に。。）

iOSはヒラギノ角ゴを縮小する

上図の「Siriと検索」の「Siri」部分はSan Franciscoフォントで17ptですが、「と検索」部分はヒラギノ角ゴで16ptで文字組みされていることがわかります。

これが弊社プロダクトANDPADのように和文のみでレイアウトされているプロダクトで行うと、「全部想定していたより1pt小さくなってしまう！！！」「なんかこの文字小さくて読みにくいんですけど！！！」となって（しかも気づくのがだいたい実装終盤）、とっても困ってしまいます。

Figmaでの暫定措置

最近ANDPADにジョインしたスーパーiOSエンジニアから、こういうふうに対応しておくと良いよーとアドバイスいただきました

1. デザインシステム上で定義されたフォントサイズがiOS上で実際は何ptで表示されるか調べる
2. Figma上では、1つの定義に対して「そのまま（英語用）」と「iOS上の日本語フォントサイズ（日本語用）」の2つを用意して使い分ける（例：Headline1(en)=24pt, Headline1(ja)=23pt みたいな感じになる）
3. エンジニアはどちらも同じものとして実装する（例：(en)でも(ja)でも24ptとして実装）

天才かよ！と思いました。和文フォントのみでレイアウトする際は上記の運用で実装とデザインが一致しますね。

英文も混ざるデザインの場合は上記の運用だと英字がヒラギノになる且つ実装されるものより小さくなってしまいます。Figmaで今のところ混植が簡単にはできないので。。

参考記事

• 【iOS】System Fontの和文（日本語）について - Qiita : https://qiita.com/moccow/items/4d0870e81db909a7aabd
• San Francisco フォントを探る - Qiita : https://qiita.com/usagimaru/items/da88c0a8793f23633c28