【解決法】ChromeとSafariでフォントが太く表示されてしまう件

ブログのテーマをいじっていて気づいたのですが、なぜか太く表示されてしまう事象が発生しました。同じfont-weightなのに、他のサイトと違って一回り太くなってしまって、スッキリしない印象になってしまいました。font-weightと違う動きで、太くなるので非常に嫌な感じだった。

いろいろと調べてみると、-webkit-font-smoothingが原因と判明。ブラウザのレンダリング時に太くなっているみたいです。

via -webkit-font-smoothing と Usability - メモログ

-webkit-font-smoothing

このプロパティを定義してあげるだけで解消できました。3種類の設定値があります。

-webkit-font-smoothing: none;
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: subpixel-antialiased;

デフォルトの状態はsubpixel-antialiasedです。antialiasedはsubpixel-antialiasedを無効にした状態で、noneはアンチエイリアスをしない状態になります。

わたしのブログで試したところ、antialiasedで設定すると、問題も解決しました。

body {
        -webkit-font-smoothing: antialiased;
}

リスク

ただし、注意すべき点もあるようです。

でも、Please Stop "Fixing" Font Smoothing · UsabilityPostという記事では、やたらにこの指定しない方が良いと述べられています。理由としては、解像感が落ちるので、読みにくくなるということで。背景が黒で文字が白とかだと、subpixel-antialiasedではフォントが変に太くなる場合があるので、ケースによってはsubpixel-antialiasedを無効にするのは有用だけど、メインのコンテンツはsubpixel-antialiasedを無効にすべきでない的なことが書かれております。

-webkit-font-smoothing と Usability - メモログ

自分の環境（Mac）では綺麗に見えていますが、他の人の環境では見づらい感じになっているかもしれません。フォントの設定は非常に難しいので、いろいろと検証したうえで設定すべきなのかもしれません。