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

Buffer blog

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

  • ブックマーク
  • Feedly

この記事を書いた人

キタジマタカシ

長崎在住、フリーランスのWordPress テーマ / プラグインデベロッパー。 多数のプロダクトをオープンソースで開発・公開しています。現在は WordPress 有料テーマ Snow Monkey を開発・販売しています。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします