Webサイトにおけるタイポグラフィーを考える

ここ最近、本屋でタイポグラフィーに関する本をよく見かけます。「タイポグラフィー大辞林」や「タイポグラフィーの歴史」のような分厚い本が平積みされていたり、デザイン系の雑誌で特集が組まれていたものもあったと思います。ちょっとした流行なんでしょうか。

タイポグラフィーというのは、雑誌や新聞などの印刷物媒体において古くから用いられている、文字の可読性や視認性を高めるためのデザイン技法のことです。 雑誌や新聞の文章は、文字の書体や大きさ、行間、文字と文字の間隔などの様々な設定によって、読みやすく、そして美しく整えられています。

現在に至ってはタイポグラフィーは様々なデザインの中に取り込まれています。それでは、Webの世界ではタイポグラフィーはどのように考えられているのでしょうか。Webサイトもまた雑誌や新聞と同じように文字ベースの媒体といえます。文字の読みやすさはとても重要になってきます。下にWebサイトにおけるタイ ポグラフィーを簡単にまとめてみました。Webサイトやブログを作る際に参考にしてみてください。サイトの滞留時間や離脱率に影響があると思いますよ。

文字の書体

文字の書体によって、読む者の印象は大きく変わるものです。雑誌などのタイポグラファーやデザイナーさんたちは、街の看板広告に使われている文字の書体を言い当てられるくらい、相当マニアックな知識やこだわりをもって、その場合に応じた最適な書体を選択します。

Webサイトを作るうえでも、フォントの書体はCSSで選択指定することができます。

p {
　　　font-family: "ＭＳ Ｐゴシック",sans-serif;
}

しかしWebにおいては、指定した書体が必ずユーザー側で再現されるとは限らないということを心得ていなければなりません。雑誌などの紙媒体とは違い、 ユーザー側PCにインストールされている書体しかWebサイトには反映されません。OSにインストールされている日本語フォントは本当に限られており、ほとんど選ぶことができないというのが実状です。英語フォントに関しては、日本語フォントよりは種類が多いので、ある程度イメージに合うものを選択することができます。

文字の大きさ

文字の大きさは、文章の読みやすさを左右するとても重要な要素です。また文章に重要度を付与する役目もあります。CSSでは次のように指定します。

p {
　　　font-size: 90%;
}

可読性の高いフォントサイズというのは、ユーザーによって最適値が異なります。一般的に、高齢者には大きな文字が読みやすく、若年層にはやや小さめの文字が読みやすいと判断されるようです。当然、年齢とは別に、個人の視力や読書習慣などにより感じ方は異なります。

そのため最近では、ページのヘッダー部分などにフォントサイズを可変できるボタンを設置しているサイトを多く見かけます。このボタンによって、ユーザーはフォントサイズを自分の読みやすいサイズに変換してサイトを閲覧することができます。もっとも現在では、どのブラウザーもフォントサイズを変更できる機能を搭載しているため、こちらの機能が一般に浸透することが理想だとは思いますが。

文字の太さ

文字の太さは、文章中の言葉に対して強弱を与える効果があります。CSSでは次のように指定します。

p{
　　　font-weight: bold;
}

主にタイトルや見出しに、文字の大きさと併せて使用されます。ページ内の特定箇所にのみ指定されることが多く、本文全てに指定されることは少ないです。あまり頻発して使用すると、可読性を損なうおそれがあるので、特別に強調したい箇所にのみ使用するようにした方が良いでしょう。

文字の色

文字の色は、サイトの背景色と一緒に考える必要があります。例えば白い背景に黒い文字、逆に黒い背景に白い文字などのように、文字と背景のコントラストをしっかり確保しないと十分な可読性が得られません。文字色と背景色の組み合わせを決める際は、Colour Contrast Check - snook.caなどを利用すると良いでしょう。文字の色はCSSで次のように指定します。

p {
　　　color: #ff0000;
}

行間

文字の行間を適度にとることによって、可読性を高めることができます。CSSでは次のように指定します。一般的には150%～180%の間で設定すると読みやすいようです。

p {
　　　line-height: 150%;
}

文字と文字の間隔

見出しなどで幅の広いスペースに短い単語を入れるときなどに、文字と文字の間隔を広くとることでバランスを整えられるがあります。稀に半角スペースを使ってこの調整を行っているのを見かけますが、これは望ましくありません。次のようにCSSを使用して設定します。

p {
　　　word-spacing: 3px;
}

適度に段落をつくる

長い文章を一息に最後まで読ませるのは、よほどの文章力がなければ難しいものです。ボリュームのある文章の場合は、適切なタイミングで段落をつくり、ユーザーが一呼吸おけるように配慮することで、最後まで読みきってもらうことができます。文章にリズムをつくる要素には以下のようなものがあります。

• <h1～6>　見出し
• <p>　段落
• <br>　改行
• <blockquote>　引用文

均等割付

均等割付とは、雑誌や新聞のように、各行の右端を揃えて体裁を整えることです。Webサイトでは、現状IEのみ対応している状況ですが、シェアの大半はIEですし将来的には他のブラウザーでも対応する見通しですから、利用する価値はあります。CSSの指定は次の通りです。

p {
　　　text-align: justify;
　　　text-justify: distribute-all-lines;
}

以上のような点に気をつければ、あなたのWebサイトをもっと読みやすくできると思います。こういった細かい部分に対する配慮が、いわゆる「素人っぽいサイト」から脱する一番の近道かなとも思います。あなたのサイトのタイポグラフィー、一度見直してみては？