コンテンツの印象に大きく影響するタイポグラフィ

実際に会って話すことができないWEBでは、コミュニケーションの中心は文字です。文字のないコンテンツやブログはほとんど存在しないと思います。だからこそタイポグラフィの果たす役割は非常に大きいと言えます。デザイナーの世界では「ウェブデザインの95％はタイポグラフィ」と言われているほどです。
逆を言えば、タイポグラフィに気をつけることでユーザーが快適にコンテンツやブログを楽しんでもらえるということです。
今回は、タイポグラフィの基本要素と気をつけるポイントについてお伝えしたいと思います。

そもそも「タイポグラフィ」とは？

「タイポグラフィ」という言葉を聞きなれない方もいらっしゃると思います。
タイポグラフィとはフォント(書式)、文字の大きさ、太さ、行間、文字色など文字に関する要素を調整し、読みやすく訴求力の高い文字にするテクニックを指します。もともと印刷物に対して使われていましたが、今ではWeb業界でも重要性が認められています。

それではタイポグラフィの役割について紹介したいと思います。

タイポグラフィの役割

タイポグラフィの果たす役割は大きく分けて2つあります。文字を魅せることと文字を読まることです。

文字を魅せる

読み手のイメージを司るタイポグラフィです。例えば線の太い文字は男性的で力強い印象になりますし、反対に細い文字は女性的でやさしい印象を与えます。同じ文字でもタイポグラフィによって与える印象が変わってくるのです。
文字を魅せることが特に求められるのがキャッチコピーや見出しだと思います。タイポグラフィにより会社のイメージやコンテンツのタッチを直感的に伝えることができます。

文字を読ませる

イメージではなく、情報をしっかり伝える時に役立つのが文字を読ませるタイポグラフィです。簡単に言えば読みやすさということになります。コンテンツやブログの本文では文字を読ませることが求められます。読み手がストレスを感じることなく情報を受け取れるために行間や文字の大きさ、フォントなどを調整することが大切です。

この項目で求められるのが魅せる文字なのか、読ませる文字なのかを見極めることが重要です。判断を誤ると印象の薄いコンテンツになったり、読みづらいブログになったりしてしまいます。
と言っても難しいことではありません。「キャッチコピーや見出しは魅せる文字」「本文は読ませる文字」と覚えていれば問題ありません。

それではWebにおいてタイポグラフィで気をつけるべきポイントを見ていきたいと思います。

タイポグラフィのポイント

フォント

飾りが多いフォントは見出しやキャッチコピーに、シンプルなフォントは本文に使用するのが基本です。
また一般的に、Webではトメ、ハネがないフォントの方が読みやすいと言われています。
初心者がやりがちなのが色々なフォントを混ぜること。目立たせたいのは分かりますが、フォントが混ざると見づらくなります。1つのコンテンツではどんなに多くても3種類、出来れば2種類以内にしましょう。
ただし、和文フォントは英数字で、欧文フォントは日本語で不自然になってしまうことがたまにあります。プロのデザイナーは英数字には欧文フォントを使う「混植」で文字組みをしていますが、違和感のないフォントの組み合わせを見つけるには知識が必要です。ひとまずは不自然になったら別のフォントに変更することをおすすめします。

文字の大きさ

Webでは14pt以上が望ましいと言われています。12ptという意見もあるようですが、幅広い年齢層にストレスなく読んでもらうためには14pt以上をお薦めします。

行間

複数行ある文章については行間の調整が大切です。行間で気をつけたいのが余白とのバランスです。余白があるとついつい埋めたくなってしまいますが、適度な余白を残すことで読みやすくなります。また文章の場合、行間が狭いと読みづらいです。行間があまりにも広いとまとまりが失われてしまいますが、それは極端な例です。余裕をもった文字配置が基本です。

文字列

ワードなどでも左詰め、中央合わせ、右詰めといった機能があると思いますが、それがこの「文字列」です。
どれを選択するかはケースバイケースですが、同じ段落内でバラバラだと明らかに読みづらくなりますので、文字列を整理するようにしましょう。
長文は左詰めが望ましいと言われています。

文字の動き

「長体」「平体」「斜体」など文字に動きをつけることで印象を変えられます。
長体はすっきりして見やすい印象になりますし、平体は安定感を感じさせます。斜体はスタイリッシュな印象を与えたい時に役立ちます。

文字の強さ

同一フォントでも漢字、ひらがな、カタカナ、英数字でも文字の大きさが変わります。
おおむね漢字はひらがなやカタカナに比べて大きく、英数字はひらがな・カタカナより小さいです。
以上を踏まえた上で文字の大きさを調整しましょう。

文字詰め

漢字、ひらがな、カタカナ、英字などそれぞれ文字の幅が異なります。そのため、ただ打ち込んだだけではバラバラな印象になることがあります。その時は文字詰めを行い、文字間の余白を調整しましょう。
使っているソフトやプラグインにより自動的に調整することもできます。

タイポグラフィを駆使してユーザー満足度の高いコンテンツを発信する

タイポグラフィとしてフォント、文字の大きさ、行間(余白)、文字列、文字の動き、文字の強さ、文字詰めについてポイントをお伝えしました。
全て一度に取り入れるのは面倒かもしれませんが、要素一つだけでも変えるだけでコンテンツ、ブログの印象を上げることができます。
また、タイポグラフィには一つの正解があるわけではありませんので、ご自身のセンスやコンテンツの性質により工夫することが大切だと思います。
コンテンツ発信の参考にしていただけますと幸いです。