-webkit-font-smoothing: antialiased; は使わないでおく

今日は、CSS初心者の方が安易に「font-smoothing」を使用しないようにこの記事を書きました。

どこかで、偶然「font-smoothing」に出会い、サイトに適用してみたら、見た目がよくなったので使ってしまった。あとで、同僚のwindowsでサイトをみたら、逆にテキストが読みにくくなっていたとかならないように注意してください。

結論からいえば、「font-smoothing」の使用はおすすめしません。

CSSのfont-smoothingとは何か？

font-smoothに似た、Mac OS X/macOSで使えるプロパティです。

Webブラウザがフォントのアンチエイリアス（滑らかに見せる処理）をどのように描画するかを制御する CSS の非標準プロパティです。主に macOS の Safari や一部の Chrome において使われます。

以下の写真は、このブログのある記事のスクリーンショットです。３段落ありますが、真ん中の段落だけに-webkit-font-smoothing: antialiased; を適用しています。傾向として、若干軽めのテキストになります。

きちんとフォントのカラーが調整されたテキストに加えると、逆に読みづらくなります。

 

また、Mac OS X/macOSでも、Webkit(Safariとかで採用されているHTMLレンダリングエンジン)とFirefoxでは、使用できるバリューが違うので注意が必要です。

詳細は以下の通りです。

WebKit implements a similar property, but with different values: -webkit-font-smoothing. It only works on Mac OS X/macOS.

• auto – Let the browser decide (Uses subpixel anti-aliasing when available; this is the default)
• none – Turn font smoothing off; display text with jagged sharp edges.
• antialiased – Smooth the font on the level of the pixel, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter.
• subpixel-antialiased – On most non-retina displays, this will give the sharpest text.

出典：MDN web docs

 

Firefox implements a similar property, but with different values: -moz-osx-font-smoothing. It only works on Mac OS X/macOS.

• auto – Allow the browser to select an optimization for font smoothing, typically grayscale.
• grayscale – Render text with grayscale antialiasing, as opposed to the subpixel. Switching from subpixel rendering to antialiasing for light text on dark backgrounds makes it look lighter

出典：MDN web docs

というように、プロパティーから使用できるバリューまで、まだまだ統一されていないので、使い難くなっています。

MacとOSXのユーザーのみに効果あり

これが一番問題ですが、font-smoothingはMacとOSXのユーザーにしか効果がありません。ですので、同じサイトでもWindowsのユーザーとMacのユーザーで、フォントの見た目に差が出てしまいます。これは、大きな問題です。

結論：font-smoothingの使用はおすすめしない

僕は、font-smoothingの仕様はおすすめしません。それは、前述の通り、WindowsのユーザーとMacのユーザーで、フォントの見た目に差が出てしまうからです。

そもそもフォントの見た目を”よくしたい”ために、font-smoothingを入れているのに、Macのユーザーを優先しフォントを最適化すれば、そうでないWindowsユーザーにとってのサイトの見た目は損なわれる可能性があります。これは、当然、フォントの見た目を向上しているとはいえないでしょう。

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 

もし上記のようなコードを追加し、Mac上では理想のフォントの見た目になったのなら、font-smoothingを追加するかわりに、font-weightやcolor または、背景色との兼ね合いを調整してフォントの見た目を最適化するべきでしょう。そうすればWindowsユーザーのフォントの見た目も同時に向上できます。

また、MDNのfont-smoothのページにもはっきりと「スタンダードの機能ではないので、プロダクションサイトでは使用するな」と記載があります。