フォントのアンチエイリアスを指定するプロパティ-webkit-font-smoothingと-moz-osx-font-smoothing

Macで同じページをSafariとChromeとFirefoxで表示させても、フォントの太さが変わってきてしまうのが気になったことはありませんか?。ブラウザによる差異を吸収する方法として-webkit-font-smoothing-moz-osx-font-smoothingというプロパティがあるようです。このプロパティを使った場合のwebkit系(SafariやChrome)とmoz(Firefox)のアンチエイリアスのかかり方を比べてみました。

sponsored link

アンチエイリアスのかかり具合を指定するプロパティ

プロパティは-webkit-font-smoothingと-moz-osx-font-smoothingを使用します。
値にantialiasedgrayscaleを指定した場合にはアンチエイリアスがかかります(noneにするとかかりません)。

subpixel-antialiasedautoを指定すると周辺のピクセルも含めて強めにアンチエイリアスの処理をするようで、フォントが太くなります。

webkit用とmoz用のデモを用意したのでMacのブラウザで実際に見比べてみてください。

webkitのデモ

-webkit-font-smoothing: antialiased;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014

-webkit-font-smoothing: subpixel-antialiased;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014

-webkit-font-smoothing: antialiased;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014

-webkit-font-smoothing: subpixel-antialiased;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014

mozのデモ

-moz-osx-font-smoothing: grayscale;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014

-moz-osx-font-smoothing: auto;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014

-moz-osx-font-smoothing: grayscale;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014

-moz-osx-font-smoothing: auto;

吾輩は猫である。名前はまだ無い。 どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。
The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.October 2014 September 2014 June 2014


FoundationGumbyといったフレームワークを調べていて、-webkit-font-smoothing: antialiased;というプロパティの存在を知りました。antialiasedとgrayscaleを指定するとコントラストが弱くなり優しい印象になるので、同じくコントラストの弱いことが多いフラットデザインと相性がいいように感じました。
その反面、視認性(目で見た時の確認のしやすさ)はあまりよくないので、文章を読ませるタイプのサイトには向かないかなと思います。

また、subpixel-antialiasedは背景が黒系でフォントが白系の時にフォントが変に太くなることや、-webkit-font-smoothingプロパティ自体がtransformプロパティと相性がよくないということもあるようです。

参考にしたエントリー