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

MW WP Form

MW WP Form はショートコードベースのフォームプラグインです。多くの機能を持っており、例えば、多くのバリデーションルール、問い合わせデータの保存、そしてグラフ機能集計などを使用することができます。

さらに詳しく
Habakiri

Habakiri

Bootstrap ベースのシンプルな WordPress テーマ。レスポンシブ、多くのカスタマイズ機能。圧縮された CSS・JS を使用する高速化対策。Microformats 対応。Sass、クラスベースの functions.php。

さらに詳しく
basis-stylus

Basis

軽量なレスポンシブ Stylus/CSS フレームワーク。Flexbox ベースのグリッドシステム、疎結合なコンポーネント、バーティカルリズム。

さらに詳しく