タイポグラフィとは、簡単に言うと「テキストのデザイン」のことです。

下記のような様々な要素の組み合わせで成り立っており、それによってテキストの与えるイメージが大きく左右されます。

その中でも、今回は近年のトレンドでもある太字でくっきりとしたタイポグラフィのWebデザインについてご紹介したいと思います。

タイポグラフィとは

タイポグラフィとは、大きく分けて2つの目的を持っています。

例えば、ヒーローヘッダーに大きなテキストを表示する場合は後者に当たり、説明文などの比較的長い文章については前者が重要になります。もちろん、2つの目的は同時に考えなければならないケースもあります。

太字でくっきりとしたタイポグラフィ

タイポグラフィはデザインによって様々で、正解は1つではありません。Webサイトによって様々なテキストのデザインが施されています。

その中でも、近年太字でくっきりとしたタイポグラフィを取り入れているWebサイトが増えてきています。

例えば、Appleの公式サイトを見てください。

太字でくっきりとしたタイポグラフィが随所で使われており、堂々としながら、とても魅力的で印象的なWebデザインになっています。さらに、比較的長文のテキストでも同様のタイポグラフィでデザインされており、サイト全体に統一感が生まれていますね。

情報が伝わりやすくなる

太字でくっきりとしたタイポグラフィは、一般的なテキストよりも存在感が増し、ユーザーの注意を引きつけやすくなります。

そのため、スクロール中でもユーザーの視線がそこで止まり、きちんと読んでもらうことができるので、より情報が伝わりやすくなります。

見出しのデザインや、読んでほしいテキストに太字でくっきりとしたタイポグラフィを用いると、伝えたい情報を目立たせることができます。

デザインにアクセントが生まれる

太字でくっきりとしたテキストのデザインは、それだけでデザインのアクセントになります。

チームコミュニケーションサービス「marchily」の公式サイトでは、テキストがくっきりとしたゴシック体で表示されており、メリハリの効いたWebデザインがとても特徴的です。

イラストやボタンなど、色々な要素のボーダーも太めにデザインされているため、サイト全体に統一感が生まれ、とても魅力的なWebサイトになっています。

信頼感や安心感を生み出す

くっきりとしたタイポグラフィは、誠実な姿勢や正直なイメージを想起させることによって、見る人に信頼感や安心感をもたらします。

マクドナルドの公式サイトでは、多くのテキストが太字のくっきりとしたタイポグラフィが使われています。

ブランドカラーとなっている黄色と太字のフォントの組み合わせによって、信頼感や安心感に加え、とてもポジティブな印象を与えるWebデザインに仕上げられています。

おすすめのフォント

太字でくっきりとしたタイポグラフィには、ほとんどの場合でゴシック体が使用されます。ゴシック体にも色々ありますが、人気のフォントをご紹介します。

Noto Sans

Noto SansはGoogleフォントとして提供されているフォントで、日本語のフォントもWebフォントとして利用することができます。

Webフォントを使用することによって、表示する環境による違いが生まれづらくなるため、様々なデバイスで同じようにデザインを表示することができます。

Noto SansをWebフォントとして使用する方法については、下記でご紹介しています。

ヒラギノ角ゴ

ヒラギノ角ゴは、とても人気のフォントで、iOSやMacでは標準のフォントとして最初からインストールされています。

残念ながらWindowsやAndroidでは利用できない場合があるため、別のフォントを用意しなければなりません。

游ゴシック

游ゴシックは、Windows10で標準フォントにも採用されており、MacとWindowsどちらの環境でも表示することが可能なフォントです。

Noto Sansやヒラギノ角ゴと比べると少し細めのフォントで、控えめながらも美しく、読みやすいのが特徴のフォントです。

まとめ

太字でくっきりとしたタイポグラフィは、コンテンツが読みやすくなるだけでなく、デザイン自体にメリハリが生まれます。

このようなデザインは、2019年により増えてくると見られており、今後のWebデザインのトレンドになるかもしれません。

ぜひ、太字でくっきりとしたタイポグラフィをデザインに取り入れてみてください！

おすすめの記事