キタジマタカシ 
なぜ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サイトではあまり活用できないかもしれませんが、スマートフォンではフォントの強弱を付けたい場面などで有効活用できそうです。
