BiNDクラウドのWebフォント機能では、さまざまなデザインの日本語Webフォントが使用できます。
下記の記事では、本文に使いやすいスタンダードな日本語Webフォントを紹介しましたが、今回は見出しなどに使いやすい書体をピックアップしてご紹介します。
本文や見出しで使う書体は、ベーシックなデザインであれば同じ書体を使用して、ウェイト(文字の太さ)だけを調整します。シンプルな方法ですが、サイト全体の書体を揃えることでバランスのよいデザインにまとまります。
ただ、見出しやキャッチコピーなど目を引きたいポイントに、よりメリハリをつけたい時などは、全体のバランスを考慮しながら見出し用の書体を選んでみてください。
上品で落ち着きのある見出し
明朝体は上品な印象を与えます。ベーシックな明朝体を使用してもいいですし、かなや漢字のデザインが特長的な書体を使用すると、一味違った雰囲気をプラスすることができます。
見出しっぽい装飾を加えることもありますが、書体の優美なデザインを生かしてそのままシンプルに使用するのもおすすめです。
丸明オールド
筑紫オールド明朝
インパクトのある見出し
インパクトを重視したい時は、ある程度の太さがあって安定感のある書体がおすすめです。白抜きなどのアレンジを加えるとより力強い印象の見出しになります。
ランパートTL
モード明朝A
手書き風で演出する見出し
親しみやすさやナチュラルな雰囲気を出したい時、和風のデザインに合わせたい時には、手書き風の書体が活躍します。文字色を変えたり装飾を加えたり、アレンジしながら使用すると目を引く見出しになります。
ベビポップ
山本庵
花墨
欧文の見出し
サイトの演出として、欧文の見出しを使うケースもあると思います。
BiNDでも使用できるGoogleフォントにはさまざな欧文フォントが揃っています。日本語フォントにはないタイプのデザインもありますので、欧文のアレンジに活用してみてください。
Racing Sans One
Limelight
Gravitas One
見出しのデザイン
デザイン性を優先し、見出しを画像にしてしまうケースは今でも多いですが、Webフォントを活用すればテキストデータのまま印象的な見出しを作ることもできます。見出しがテキストデータであれば、そのままで検索ロボットに情報を認識してもらいやすい、小さいデバイスでも可読性を維持できるなどの利点もあります。
今回ピックアップしたWebフォントはたくさんある中のほんの一部です。Webフォント初心者の方は今回紹介したフォントを手始めとして使ってみるといいでしょう。
BiNDクラウドではこのように、人気のカタオカデザインワークスの書体やFONTWORKSの書体など本来はライセンス契約が必要なものが合計434書体の中から利用できますが、BiND9でもGoogle社のフリーのWebフォントならば利用できます。
慣れてきたら、もっといろいろな書体を試してみてください。
POINT
- 本文や見出しに同じ書体を使い、太さを調整すればバランスのよいデザインに
- よりメリハリをつけたい時は、全体のバランスを考慮して見出し用の書体を選ぶ
- Webフォントを活用して画像ではなくテキストデータの見出しに