フォントのカラーと太字などでテキストの強調をしよう
テキストの強調にはフォントのカラーと強弱が役立つ
■グーグルのアディ・オスマニ氏
『特定のテキストを強調したい場合は、必ずしもフォントサイズ(font-size)を変えるのが良い方法とは限らない。代わりに、文字の色(color)と太さ(font-weight)を試してみるといい。』
Tip: Font size isn’t always the best way to emphasize text. Try font color and font weight instead. h/t @steveschoger pic.twitter.com/LZG6JCJCik
— Addy Osmani (@addyosmani) June 27, 2020
左側のデザインでは、強調したい部分の文字サイズをぐぐっと大きくして、弱く見せたい部分の文字サイズを小さくしている。
右側のデザインでは、文字サイズは少しずつ変えているがさほど劇的には変えていない。その代わりに、強調したい部分を太字にして(font-weight: bold;)、弱く見せたい部分の文字色を薄くしている(color: hsl(214, 7%, 47%);)。
SEOコンサルタントのまとめ
テキストの強調はフォントの色を変えたり太さを変えてメリハリをつけると良いそうです。
このテンプレートで言えば
▼太字にする
▼太い赤文字にする
▼黄色マーカーにする
▼赤色マーカーにする
▼太字に黄色マーカー
▼太字に赤色マーカー
そして一番目立たせるのが
▼太い赤文字に黄色マーカー
ですね。
当然、普通にHTMLのフォントタグで色を変える事ができますが、わざわざやってはいません。