CSSでフォントのアンチエイリアスを調整するプロパティ

なぜBuffer blogのフォントは細いのか?

とある案件で、Buffer blogのようなフォントにしたいという依頼がありました。早速ChromeのWeb InspectorでBuffer blogのfont-familyを見てみました。

font-family: 'Helvetica Neue', HelveticaNeue, Helvetica, Arial, 'Lucida Grande', sans-serif;
font-size: 14px;

同じCSSをテストサイトに適用。すると、なぜかBuffer blogのようにフォントが細くなりません。下記に、Buffer blogと同じfont-familyを指定したサンプルを(ChromeかSafariで閲覧してください)。

It’s hard to believe another month has skipped by and it’s already time for our second Happiness Report,…

なんか太い

It’s hard to believe another month has skipped by and it’s already time for our second Happiness Report,…

本当はこうしたい。

CSSでフォントのアンチエイリアスを調整する

Buffer blogのCSSを見たり、Web Inspectorでチェックしてみたところ、「-webkit-font-smoothing」というCSSプロパティが設定されていることがわかりました。これはフォントのアンチエイリアスの具合を調整するプロパティで、次の3つの設定値があるようです。

none abc def ghi jkl mno pqr stu vwx yz
subpixel-antialiased(デフォルト) abc def ghi jkl mno pqr stu vwx yz
antialiased abc def ghi jkl mno pqr stu vwx yz

Webkit系ブラウザでしか適用されないので、PCサイトではあまり活用できないかもしれませんが、スマートフォンではフォントの強弱を付けたい場面などで有効活用できそうです。