ブラウザにおけるフォントのレンダリング具合を調整する、

-webkit-font-smoothing: antialiased; /*Safari, Chrome*/
-moz-osx-font-smoothing: grayscale; /*Firefox*/

という CSSについてはその表示結果を絶賛するブログも多くあり、海外のオシャレ系 CSSではもはやデフォルト気味に適用されていたりするのだけれど、これ、手放しに絶賛しているひとはディスプレイが Retinaなのじゃないかと思うのだった。
　それぞれ、上記の指定をしなかった場合のデフォルト値は

-webkit-font-smoothing: subpixel-antialiased;
-moz-osx-font-smoothing: auto;

というもので、ごく雑な解説をすれば、前者の指定があると、後者のデフォルト状態よりも文字が細くレンダリングされる。その効果が覿面なのは解像度の高い Retinaディスプレイにおいてで、こと Retinaにかぎって言えば──どのみち〈好みの問題〉ではあろうものの──これは断然、前者の指定をしたほうが美しいと言い切ってしまいたいくらいだ。

　なのだけれど、これが 72dpiとか 96dpiの非 Retinaディスプレイとなると、その細目のレンダリングはかなり視認性が悪くなり、文字色にもよるだろうが、たんに「なんだか読みづらい」という印象を与えるだけのように個人的には思える。

　というわけで、このフォントレンダリングについての CSSを Retinaにかぎって適用させるための作法を以下に。

@media (-webkit-min-device-pixel-ratio: 2),(min--moz-device-pixel-ratio: 2),(min-resolution: 2dppx),(min-resolution: 192dpi){
	html, body {
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
}

関連記事