細すぎるWeb Fontの可読性を上げてみる

概要

[Google Fonts] (https://www.google.com/fonts "Google Fonts") などのWebフォントは font-weight: 100; という細いウェイトに対応しているものがあります。これらの極細フォントを使用する際、WindowsのWebブラウザでは表示が細すぎるフォントがあるため、僅かでも可読性を上げるためにCSSでの調整を図ります。（他のブラウザに比べて Chrome が特に細い印象）

対象のフォント

• Lato (Google Fonts)
• Josefin Sans (Google Fonts)

などなど。

やってみたこと

文字色と同色で**オフセット値・ぼかし半径 "0"**の text-shadow を指定する。

CSS

.heading {
    font-family: 'Lato', sans-serif;
    font-weight: 100;
    font-size: 48px;
    color: black;
    text-shadow: 0 0 0 black;
}

この指定で文字色が濃すぎる場合は影色の不透明度を変更したり、逆にまだ薄い場合は text-shadow を二重・三重に指定することで微調整します。

結果

文字色が濃くなった分、少しだけ可読性が上がった気がします。よかったですね。

補足

• Windows環境以外では意図しない濃さになっている場合があるので要注意。
• 文字サイズや文字と背景色との組み合わせなどで可読性は大きく変わるため、細いウェイトに対して一律で指定するのではなく、必要に応じて個別に調整した方が良さそう。