Webブラウザにおける文字のアンチエイリアスの現状の最適解

Webブラウザにおける文字のアンチエイリアスの現状の最適解

2017.05.17
top
ノウハウ

こんにちは、@Ln_northです。

現在は生放送のチームを担当しつつ、「このフォントなんですか」というDMに答えるBotになったりしています。

今回は、ちょっと業務でフォントレンダリングに関する問題が有り、せっかくだから、この辺に関する諸問題をきちんと解決しておこうと調べて諸々提案した所、「公開したほうが良い」と色んな人から言われたので、このブログに書き起こすことにしました。

このタイトルにするのは少し怖かったんですが、頑張って書いたので何か有りましたらぜひツッコんで頂けると幸いです。

事の発端

最近チームのデザイナーからこんなことを聞かれました。

Safariで文字が細く見えてしまうんだけど、どうすればいい?

比較

確かに細く見えますね。この現象と対応について、詳しく解説していきます。

(結局どうすればいいの?という結論だけ見たい方はこちらへ)

原因と問題

これは「フォントレンダリングの際のアンチエイリアス方式の問題」で、今のところMacのSafariのみで起こる現象です。

アンチエイリアスとは?

以下のようにベクター画像などをラスタライズした際に、輪郭線のジャギーを目立たないように補完する処理のことを言います。

アンチエイリアス画像

フォントも、その中に入っているグリフはベクター画像ですので、それをディスプレイに描画する(ラスタライズ)する際に、ジャギーが目立たないようアンチエイリアスをかけています。

フォントのアンチエイリアスの方式

基本的に、グレースケール方式とサブピクセル方式の2つがあります

グレースケール方式

グレースケール方式の説明

以上のイメージのように、ジャギーの出ている箇所を、その中間色で補完する方法です。

サブピクセル方式

サブピクセル方式の説明

以上のイメージのように、ディスプレイの1ドットがRGBの3ドットから構成されていることを利用し、より細かくジャギーを補完する方式です。上のイメージはかなり単純で雑で、実際のRGBの値は、もっと深い計算や条件を元に、色ズレが見えないように決定されます。

現在は、ほとんどのケースでPCの文字描画にはこの方式が使われています。

各OS/ブラウザの状況

ここで、各OS/ブラウザのデフォルトの方式を見てみましょう。

OS Windows Mac/Safari Mac/その他のブラウザ スマートフォン
アンチエイリアス方式 DirectX グレースケール サブピクセル グレースケール
CSSによる制御 不可 不可(WindowsPhoneなど一部可)

Winでは基本的にフォントレンダリングをCSSで制御することは出来ません。また、スマートフォンのブラウザもほとんど制御できず、基本的にグレースケールで表示されることが多いようでした。

MacではSafariのみがグレースケールですね、これが原因で「Safariで文字が細く見えてしまう」現象が起こっています。

デバイスのdpiによる見え方

このまま各ブラウザでアンチエイリアスを揃える設定しても良いのですが、1x, 2xの解像度による見え方を見ていきましょう。(今回はThunderbolt Display = 109ppi, MBP Retina Display = 220ppiで検証・比較。実際に表示した画面をスマホのカメラで加工が無いようにして撮りました。)

109ppi(Thunderbolt Display)

109ppi

220ppi(MBP Retina Display)

220ppi

以下のことがわかります

109ppi環境

  • Normal/グレースケールでは、英数字は大丈夫ですが、日本語はややかすれて見えてしまうところが有ります。(font-size: 14pxでの検証)

220ppi環境

  • Normal/グレースケールでも文字が見える、よりスッキリ見える
  • Normal/サブピクセルとBold/グレースケールにあまり太さの変化が見られない部分があります。
    例えば、SPサイトを作っていて、表示確認をRetina, Chrome(サブピクセル)などで行っていると、実機はグレースケール表示がほとんどなので、意図した表示にならないなどの問題が起こることが考えられます。(ボタンの中の文字が思ったより細く見えるなど)

以上より、理想とする状態は低解像度環境下ではサブピクセル、高解像度環境下ではグレースケールにすると、良い表示になるのではないか思います。

解決する方法

理想と思われる低解像度環境下ではサブピクセル、高解像度環境下ではグレースケールになるようにするには、解像度(CSSのpixel-ratio または resolution)によってアンチエイリアス方式を振り分けると最も良さそうです。クロスブラウザ対応も含めると、以下のCSSになります。

 .hoge {
   /* フォントレンダリング設定: 1x解像度ではsubpixel、2x以上の解像度ではgrayscale */
   -webkit-font-smoothing: subpixel-antialiased;
   -moz-osx-font-smoothing: unset;
 }
 @media only screen and 
 (-webkit-min-device-pixel-ratio: 2),
 (min-resolution: 2dppx) {
   .hoge {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
 }

これでフォントレンダリングのアンチエイリアスに関する諸問題はうまく解決するかと思います。

ぜひ皆さんも、最初のreset.cssなどに組み込んでお使い下さい。

参考

CSSの指定について参考にしたページを残しておきます。

フォントスムージングの対応状況について

  • http://caniuse.com/#search=font-smoothing
  • サポートしているのはChrome, Safari, Opera, Firefoxのみ
  • -webkit-と-moz-で全部カバーできる
  • font-smoothingは標準規格にはもう無いので記述しない

CSSの解像度の振り分けについて

この設定の懸念として、Firefoxでは「サブピクセル/グレースケール」という指定ではなく、「既定/グレースケール」という設定しか出来ない(つまりサブピクセルは明示的に指定できない)ようです…。

この点には不安が残るが、きっとmozillaはちゃんと高解像度モニタの普及状況をみて調整してくれるでしょう!そして、そのときには、もうこのようなCSSは書かなくて済む世界になっているはず!

(2017-05-18 追記)

多くの方に読んでいただいて本当に嬉しく思っております、有難うございます。 幾つかご指摘頂いていたサブピクセルレンダリングの記述に間違いが有りましたので訂正させて頂きました。

現在は、ディスプレイの解像度はよりppiの高いものへのシフトしている過渡期の状態であり、この知見も恒久的なものではありません。 タイトルに「現状の」と書いたのはこのためです。

ブラウザベンダーに品質を握られてしまう不安定な部分でもあるので、リスクヘッジを考え無視するのも有りだと思います。 しかし、あと数年はこのような状態が続くと予想しており、それであればこのぐらいの対処はしておいて良いのではないかと私は考えています。

Googleのように一律グレースケールにしてしまい、それを前提としてデザインをする戦略も良いのではないかと思います。 ただ、日本語の複雑なエレメントや小さい級数の文字で厳しいケースが多かったので、このような解決策も一つの方法ではないかと思っています。

またこの領域に変化が有りましたら、新しい記事を書いて情報をアップデートできればと思います。 どうぞよろしくお願いします。

  • このエントリーをはてなブックマークに追加

あわせて読みたい記事

この記事を書いたメンバー

Ln_north

Ln_north

Assistant Designer

2016年新卒入社、フォント技術や書体に関する話が大好きです。書体作成に疲れた息抜きに書体作成をしています。最近は新作の書体を2つ製作中です。体がでかいです。

ドワンゴデザイナー メンバー募集 ! !