スクリーンショット 2013-08-01 19.42.45

最近まで知らなかったんですが、ブラウザのテキストレンダリングの質を調節できるCSSがありました。フォントワークが大事になってくるので抑えておきたいですね。

CSSプロパティ

・-webkit-font-smoothing

  •  antialiased

→アンチエイリアスをかける設定。ゴシック系フォントの英語表示箇所に適している。日本語だとアンチエイリアスが効きすぎてボヤケる。

  •  subpixelantialiased

→サブピクセル(おそらく端数)に対してアンチエイリアスをかける。デフォルトと大差ないように思えるけど、フォントが若干くっきり見えるようになる。(日本語向き。)

  • none

→アンチエイリアスがなくなり、ガタガタなフォントに。

参考:webkit-font-smoothing

参考:webkit-font-smoothingでsafariの文字の太さを他のブラウザと合わせる。|乱雑モックアップ

・text-rendering

  • auto (初期値)
    →ブラウザによるレンダリング設定。
  • optimizeSpeed
    →レンダリングスピードを重視。
  • optimizeLegibility
    →読みやすさを重視。 カーニングなども入る。
    稀に問題があるみたいですが、今のところ問題はないっす。
  • geometricPrecision
    →フォントの正確さを重視。

参考:text-rendering: optimizeLegibility – Weblog – hail2u.net

参考:text-rendering – externalResourcesRequired

僕はミックスインにからめて使っています。

LESSのフォントサイズMixin 

.fontSize(@font-size) {

@pxFontValue: (@font-size / 10);
@pxLineValue: (@font-size / 10 * 1.5);
font-size: @font-size * 1px;
line-height: @font-size * 1.4 * 1px;
font-size: ~"@{pxFontValue}rem";
line-height: ~"@{pxLineValue}rem";
font-style:normal;
vertical-align: baseline;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
}