エンジニアが学んだことをシェアします

2018-04-30 Blog, Mac/iPhone/iPad

フォント San Francisco? -apple-system? Appleのシステムフォント適用検討について

今日1日ずっとフォントについて調べていた。

色々な人のブログを見ていると、この人のフォントのバランスいいなぁと思うことがある。

そんな中で、font-familyの指定を以下としている人がいた。

font-family: -apple-system, BlinkMacSystemFont,.....;

当ブログは今までずっと游ゴシックを使ってきた。WindowsでもMacでもそれなりに表示されるため、概ね統一したデザインとすることができる。ここに至るまで随分と調べ物をしたのだけど、”-apple-system”なんていうフォントは聞いたことが無い。

気になったので調べてみた。

San FranciscoというAppleのシステムフォント

San Franciscoは2015年に発表されたAppleの純正フォントである。OS X, iOS, watchOS…etc.上で表示させるためのフォント。調べてみると、小さい文字(Apple Watch用?)にも対応するため、改良したものらしい。

ところが、font-familySan Franciscoと指定しても対応していない。ここで出てくるのが冒頭で紹介したコード。

font-family: -apple-system, BlinkMacSystemFont,.....;

前半の-apple-systemはsafari系、後半のBlinkMacSystemFontはGoogle ChromeやOpera系に対応している。これらを指定することによって、San Franciscoフォントが適用される。

実際に当ブログに適用した場合にどうなるかを試してみよう。

Arial + 游ゴシック体との比較

(1-1)Arial + 游ゴシック体:当ブログの仕様

(1-2)San Francisco

 

(2-1)Arial + 游ゴシック体

 

(2-2)San Francisco

 

違いと結論

San FranciscoはさすがAppleさんがシステムフォントに適用するだけあって美しい。もちろん游ゴシックも悪くないんだけど。

一方、大きく違うのは日本語の文字の大きさだ。

英文字は大きさがほぼ同じ。でも日本語はSan Franciscoの方が小さく見える。同じフォントサイズ指定でも、だ。

調べたところによると、英文字と日本語文字とのバランスを整えるため、San Franciscoでは日本語フォントが若干小さく表示されるらしい。

僕のブログの関連記事で使うフォントサイズは12px((2-1)と(2-2)のキャプチャ参照)。これがさらに小さくなると結構見にくさを覚える。iPhone Xでも作動確認してみたけど、スマートフォンで見るほうが小ささが目立った。少し大きくしてあげないと読み手にとって厳しいと感じる。

したがって、僕の現在のブログデザインでSan Franciscoを適用するなら、フォントサイズを全て調整し直す必要がある。

ところが、これは思いのほか大変だ。

なぜなら、フォントSan Franciscoが適用されないブラウザ上では別のフォントが採用され、文字の大きさはもともとのArial + 游ゴシックケースと同じだから。

どのブラウザでも大幅にデザインやユーザビリティを変えないように配慮したい。ところがフォントSan Franciscoを適用するとそうはいかない。

さらに、いつかまたフォントを戻したいと思ったときに、またフォントサイズを再調整しなければならない。これもまた結構ややこしい。

ということで、游ゴシックをベースに詳細をカスタマイズしてきた僕のブログでは、San Franciscoの適用はGive upした。またいつか検討するかもしれない。

 

フォントの世界は奥が深い。今日は色々と勉強になりました。


同じカテゴリーの記事

CATEGORY

© Yo 2017