SEOコンサルタントの運営するSEO最新情報・SEOのサイトです。SEO最新情報、SEO業者の紹介など。運営者はSEOコンサルタント・白石竜次(「世界一わかりやすいSEO対策 最初に読む本(技術評論社)」他)です。お気軽にお問合せください。

SEOコンサルタント.com

フォントのカラーと太字などでテキストの強調をしよう

投稿日:

フォントのカラーと太字などでテキストの強調をしよう

テキストの強調にはフォントのカラーと強弱が役立つ

■グーグルのアディ・オスマニ氏

『特定のテキストを強調したい場合は、必ずしもフォントサイズ(font-size)を変えるのが良い方法とは限らない。代わりに、文字の色(color)と太さ(font-weight)を試してみるといい。』

左側のデザインでは、強調したい部分の文字サイズをぐぐっと大きくして、弱く見せたい部分の文字サイズを小さくしている。

右側のデザインでは、文字サイズは少しずつ変えているがさほど劇的には変えていない。その代わりに、強調したい部分を太字にして(font-weight: bold;)、弱く見せたい部分の文字色を薄くしている(color: hsl(214, 7%, 47%);)。

SEOコンサルタントのまとめ

テキストの強調はフォントの色を変えたり太さを変えてメリハリをつけると良いそうです。
このテンプレートで言えば
▼太字にする
▼太い赤文字にする
▼黄色マーカーにする
▼赤色マーカーにする
▼太字に黄色マーカー
▼太字に赤色マーカー
そして一番目立たせるのが
▼太い赤文字に黄色マーカー
ですね。
当然、普通にHTMLのフォントタグで色を変える事ができますが、わざわざやってはいません。

  • B!