見出しなどに映えるWebフォント10選

BiNDクラウドのWebフォント機能では、さまざまなデザインの日本語Webフォントが使用できます。見出しやキャッチコピーなど目を引きたいポイントで使いやすい書体をピックアップしてご紹介します。

BiNDクラウドのWebフォント機能では、さまざまなデザインの日本語Webフォントが使用できます。
下記の記事では、本文に使いやすいスタンダードな日本語Webフォントを紹介しましたが、今回は見出しなどに使いやすい書体をピックアップしてご紹介します。

本文に使いやすいオススメの日本語Webフォント7選【スタンダード編】

eyecatch

本文や見出しで使う書体は、ベーシックなデザインであれば同じ書体を使用して、ウェイト(文字の太さ)だけを調整します。シンプルな方法ですが、サイト全体の書体を揃えることでバランスのよいデザインにまとまります。

春のセールを開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

 
ただ、見出しやキャッチコピーなど目を引きたいポイントに、よりメリハリをつけたい時などは、全体のバランスを考慮しながら見出し用の書体を選んでみてください。

上品で落ち着きのある見出し

明朝体は上品な印象を与えます。ベーシックな明朝体を使用してもいいですし、かなや漢字のデザインが特長的な書体を使用すると、一味違った雰囲気をプラスすることができます。
見出しっぽい装飾を加えることもありますが、書体の優美なデザインを生かしてそのままシンプルに使用するのもおすすめです。

丸明オールド

春のセールを開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

筑紫オールド明朝

春のセールを開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

インパクトのある見出し

インパクトを重視したい時は、ある程度の太さがあって安定感のある書体がおすすめです。白抜きなどのアレンジを加えるとより力強い印象の見出しになります。

ランパートTL

春のセールを開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

モード明朝A

春のセールを開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

手書き風で演出する見出し

親しみやすさやナチュラルな雰囲気を出したい時、和風のデザインに合わせたい時には、手書き風の書体が活躍します。文字色を変えたり装飾を加えたり、アレンジしながら使用すると目を引く見出しになります。

ベビポップ

セール開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

山本庵

春のセールを開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

花墨

春のセールを開催します Spring SALE
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち

欧文の見出し

サイトの演出として、欧文の見出しを使うケースもあると思います。
BiNDでも使用できるGoogleフォントにはさまざな欧文フォントが揃っています。日本語フォントにはないタイプのデザインもありますので、欧文のアレンジに活用してみてください。

Racing Sans One

Spring SALE 123

Limelight

Spring SALE 123

Gravitas One

Spring SALE 123

見出しのデザイン

デザイン性を優先し、見出しを画像にしてしまうケースは今でも多いですが、Webフォントを活用すればテキストデータのまま印象的な見出しを作ることもできます。見出しがテキストデータであれば、そのままで検索ロボットに情報を認識してもらいやすい、小さいデバイスでも可読性を維持できるなどの利点もあります。

見出しを画像にしてはいけない理由

今回ピックアップしたWebフォントはたくさんある中のほんの一部です。Webフォント初心者の方は今回紹介したフォントを手始めとして使ってみるといいでしょう。

BiNDクラウドではこのように、人気のカタオカデザインワークスの書体やFONTWORKSの書体など本来はライセンス契約が必要なものが合計434書体の中から利用できますが、BiND9でもGoogle社のフリーのWebフォントならば利用できます。
慣れてきたら、もっといろいろな書体を試してみてください。

  • 本文や見出しに同じ書体を使い、太さを調整すればバランスのよいデザインに
  • よりメリハリをつけたい時は、全体のバランスを考慮して見出し用の書体を選ぶ
  • Webフォントを活用して画像ではなくテキストデータの見出しに

関連記事