ishii-akihiro’s blog

いろいろ試したことやバグ対応の作業履歴を残していきます。

serif(明朝体)の太字箇所をわかりやすくする

概要

serif は web の文章でよく使われるフォントですが、太字の装飾(font-weight: bold;)がわかりずらいです。
しかし、font-smoothing: antialiased; を設定したらわかりやすくなりました!のでメモ。

font-smoothing を使わない場合

以下の文章のどこが太字かわかりますか?書いた本人でもわかりません。。

f:id:ishii-akihiro:20190607113502p:plain

font-smoothing を使った場合

今度はどこが太字になっているかわかると思います。

f:id:ishii-akihiro:20190607114031p:plain
最後の一文ですね。
太字でない文章がほっそりして、区別がつきやすくなりました。

実装コード

pタグ要素に font-smoothing を設定する場合は次のようにします。

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

font-smoothing は対応していないブラウザもあるようなので、-webkit- をつけました(下記リンク参照)。

developer.mozilla.org

ちなみに、太字にしたい箇所は span タグで指定ですね。

span{
  font-weight: bold;
}

本当はクラス名を付けて指定した方が良いですが。

おわりに

serif(明朝体)で太字も使いたい場合は font-smoothing おすすめです!
ただ、IEとかのブラウザは非対応っぽいので要注意ですね。