San Franciscoフォントについて
iOS9からシステムフォントがSan Franciscoフォントになりました。(略してSF)
今まで、「小さい文字の場合文字が潰れてしまってみにくい」とか、「アルファベットと日本語が混在すると、日本語の方が大きく見えて不格好になる」などの問題がありましたが、これが使用状況によってよさ気に自動的に変わってくれるという、もはやフォントの領域を超えてるんじゃないか？と思うような優れものフォントです。
San Franciscoフォントはここからダウンロードできます。
https://developer.apple.com/fonts/
自動的に変わる要素としては、以下のようなものです。
- 文字間のスペース : 小さいフォントサイズではより大きなスペースになります
- フォントの種類 : 19以下だとSFUIText、20以上だとSFUIDisplayになります
- フォントサイズ : 和文の場合は指定フォントより小さくなります
iOS8の時はカスタムフォントをよく好んでつかっていた私ですが、iOS9のSFフォントが登場してからは、システムフォントを使うことが断然多くなりました。
そんなSFフォントですが、詳しい動きをよく理解していなかったので調べてみました。
欧文
Introducing the New System Fontsのスライドより
19pt以下はSFUIText, 20pt以上はSFUIDisplayのフォントになります。
また、文字間のスペース(Kerning)も動的に変わります。
| Font Point | Font Name | Kern |
|---|---|---|
| 8 | .SFUIText-Regular | 0.21 |
| 9 | .SFUIText-Regular | 0.23 |
| 10 | .SFUIText-Regular | 0.16 |
| 11 | .SFUIText-Regular | 0.08 |
| 12 | .SFUIText-Regular | 0.01 |
| 13 | .SFUIText-Regular | -0.06 |
| 14 | .SFUIText-Regular | -0.14 |
| 15 | .SFUIText-Regular | -0.21 |
| 16 | .SFUIText-Regular | -0.28 |
| 17 | .SFUIText-Regular | -0.36 |
| 18 | .SFUIText-Regular | -0.43 |
| 19 | .SFUIText-Regular | -0.41 |
| 20 | .SFUIDisplay-Regular | 0.43 |
| 21 | .SFUIDisplay-Regular | 0.4 |
| 22 | .SFUIDisplay-Regular | 0.37 |
| 23 | .SFUIDisplay-Regular | 0.43 |
| 24 | .SFUIDisplay-Regular | 0.4 |
| 25 | .SFUIDisplay-Regular | 0.37 |
| 26 | .SFUIDisplay-Regular | 0.43 |
| 27 | .SFUIDisplay-Regular | 0.4 |
| 28 | .SFUIDisplay-Regular | 0.37 |
| 29 | .SFUIDisplay-Regular | 0.43 |
| 30 | .SFUIDisplay-Regular | 0.4 |
※ 上記の数字は、iPhone6の実機で今回測定したものになりますので参考程度でお願いします。
文字が小さいほど文字間のスペースは大きくなる = 小さくても潰れにくい
ようになっています。
和文
iOS9のSystemフォントでは、和文が指定よりも少し小さいサイズで表示されます。
これは、欧文と和文混在だけでなく、和文のみの場合でも小さいサイズになります。
ちょっとわかりにくいですが、上図では、右上のiOS9 Systemの"あいうえお"の文字サイズが小さくなっているのがわかるでしょうか。
17サイズの指定ですが、実際には16サイズぐらいの表示になっています。
そのため、iOS8でレイアウトを整えたアプリをiOS9でみると次のような事が発生したりします。
- 文字が小さくなった
- ラベルの上下の余白が大きくなった
- 行間が広がった
まぁ微妙な差ですけども！
この、和文が少し小さくなる理由は、「アルファベットと日本語が混在すると、日本語の方が大きく見えて不格好になる」ものを解決してくれているからだと思います。
欧文和文混在した例です。
iOS9のSystemフォントのものが、日本語が小さくなって、いい感じなっているのが分かるでしょうか。
HiraginoSansを明示指定のものは、扱いが難しい。
iOS8の時は、和文だけだと上に寄りすぎている感がありましたが、iOS9だと、jの下の部分(Descent部分)が切られてしまう様子。
まぁ、システムフォントを使えばいいのと思います。
欧文だと、サイズによって文字間のスペースがかわりましたが、和文の場合には見る限りほぼ無いようにみえるので、補正無し(Kern=0)になっていると考えてよさそうです。
和文だとどのくらいサイズが小さくなるのかを計測した値はこちら
| 設定 Font Size | Font Name | 和文 Font Size |
|---|---|---|
| 8 | .SFUIText-Regular | 7.5 |
| 9 | .SFUIText-Regular | 8.5 |
| 10 | .SFUIText-Regular | 9.4 |
| 11 | .SFUIText-Regular | 10.29 |
| 12 | .SFUIText-Regular | 11.29 |
| 13 | .SFUIText-Regular | 12.2 |
| 14 | .SFUIText-Regular | 13.09 |
| 15 | .SFUIText-Regular | 14.09 |
| 16 | .SFUIText-Regular | 15 |
| 17 | .SFUIText-Regular | 16 |
| 18 | .SFUIText-Regular | 16.9 |
| 19 | .SFUIText-Regular | 17.8 |
| 20 | .SFUIDisplay-Regular | 18.8 |
| 21 | .SFUIDisplay-Regular | 19.69 |
| 22 | .SFUIDisplay-Regular | 20.59 |
| 23 | .SFUIDisplay-Regular | 21.59 |
| 24 | .SFUIDisplay-Regular | 22.5 |
| 25 | .SFUIDisplay-Regular | 23.4 |
| 26 | .SFUIDisplay-Regular | 24.4 |
| 27 | .SFUIDisplay-Regular | 25.3 |
| 28 | .SFUIDisplay-Regular | 26.19 |
| 29 | .SFUIDisplay-Regular | 27.19 |
| 30 | .SFUIDisplay-Regular | 28.09 |
※ 上記の数字は、iPhone6の実機で今回測定したものになりますので参考程度でお願いします。
この実測値からみると、和文は約0.94倍のサイズ になっている ようです。
Font Weight
Weightは9種類用意されいて、iOSのバージョン、フォントサイズにより表示がかわります。
対応するフォントWeightがない場合には、それに近いものを選択してくれます。
| Font Weight | iOS9 size〜19 | iOS9 size20〜 | iOS8 |
|---|---|---|---|
| Ultra Light | Light | Ultralight | UltraLightP2 |
| Thin | Light | Thin | Thin |
| Light | Light | Light | Light |
| Regular | Regular | Regular | Regular |
| Medium | Medium | Medium | Medium |
| Semibold | Semibold | Semibold | MediumP4 |
| Bold | Bold | Bold | MediumP4 |
| Heavy | Heavy | Heavy | Heavy |
| Black | Heavy | Black | Heavy |
文字の高さ
システムフォントの文字全体の高さは、指定サイズによって決まります。
欧文、和文、いずれも同じ高さになります。
UIFontにLine Heightという要素があり、それが実際の文字高さ(=ラベルの高さ)になっているようです。
| Font Point | Line Height | @2xの端末 | @3xの端末 |
|---|---|---|---|
| 8 | 9.55 | 10 | 9.67 |
| 9 | 10.74 | 11 | 11 |
| 10 | 11.93 | 12 | 12 |
| 11 | 13.13 | 13.5 | 13.33 |
| 12 | 14.32 | 14.5 | 14.33 |
| 13 | 15.51 | 16 | 15.67 |
| 14 | 16.71 | 17 | 17 |
| 15 | 17.9 | 18 | 18 |
| 16 | 19.09 | 19.5 | 19.33 |
| 17 | 20.29 | 20.5 | 20.33 |
pixcel描画の時点では小数点はありえませんが、
Retina@2xの端末は、2倍サイズのものを1/2に縮小して表示している
Retina@3xの端末は、3倍サイズのものを1/3に縮小して表示している
と考えれば、これらの数値になるのが納得できるかと思います。
実装時の注意点
システムフォントを使用すること
San Franciscoフォントは、明示的にフォントファミリーを指定してUIFontを作成してはいけません。
コードでフォントを作成する際には、必ずUIFont.systemFontOfSizeで作成しましょう。
ちなみに、".SFUIText-Light"などの文字指定でフォントを作成することはできますが、そうすると自動的にKernなどが変わってくれる仕組みが動きません。
シミュレーターは信用しない
シミュレーターでは和文フォントがうまく表示されません。
環境の問題かもしれませんが、私の環境 OS X El Capitan / XCode v7.3.1では少し中華フォントっぽい感じのものになります。
この場合、和文でもフォントサイズが小さくならないようです。(欧文と同じサイズになる)
なので、フォントサイズを確認するには必ず実機で行いましょう。
追記:
シミュレータの言語設定を日本語に選択すると、うまくいくことをコメントで教えていただきました！
使用したプロジェクトにも日本語のScheme設定を追加してコミットしました。
デザイン時の注意点
自動補正を考慮する
画像ツールでSFフォントを使用しても、いままで説明してきたKernやサイズの自動補正はおこなわれません。
実際の端末上の表示と一致させた状態でデザインするためには、自動補正の部分を考慮して文字を決める必要があります。
Sketch3で見てみた限りでは、上述したKernなどの値を設定すれば、ほぼ実機と同じ感じにできました。
が、全てを完全に一致させるのは大変すぎで現実的ではないとは思います。
画像ツール上での日本語文字
画像系ツールで、日本語から文字を入力すると、SFでなくHiraginoSansになってしまうことありませんか？
そうなると、文字の高さが変わってしまい、上下マージンの決定がややこしくなってしまいます。
上記の黒色の部分が文字全体の領域と考えてください。
出来る限りSFフォントでの表示でデザインするようにすると混乱が少なくなるかと。
言い換えると、英語の文字でデザインするのがBESTと思います。
そして、画像ツール上でのデザイン作成は完全一致は目指さず、ざっくりとしたデザインを決めるのに使い、サイズ、マージンなどの微調整は最後にStoryboardなどから直接調整するのがよさそうです。
最後に
これらの情報を得るためにさっくり作ったアプリを
https://github.com/aqubi/iOS9SystemFont
にアップしておきました。
iOS9以上で動きます。