Bill Gates氏は「コンテンツは王様だ」と言いました。オンラインのユーザー体験において、これは紛れもない真実です。しかし、素晴らしいユーザー体験を提供することは、単に素晴らしいコンテンツを発信することだけではありません。便利で使いやすいフォーマットでコンテンツを提供することも意味するのです。これによって、読みにくいことが原因でユーザーがサイトから離脱することを防ぎ、閲覧やインタラクションを促進することができます。
そのため、Webサイトにおけるタイポグラフィは、デザイナーの仕事の中でも非常に重要です。適切なフォントを選択したり、そのフォントを正確に表示したりする作業は、ほかのデザインの作業以上にユーザー体験を大きく左右します。
『タイポグラフィの完璧なマニュアル（The Complete Manual of Typography）』の著者、James Felici氏は以下のように述べました。「タイポグラフィとはフォントを利用して、意見を主張したり、伝えたり、広めたり、ユーザーを祝ったり、ページを装飾したりすることです。タイポグラフィによって、言葉とページはアートになります。」
タイポグラフィには長くて興味深い歴史があります。タイポグラフィは活字媒体が製作され始めたころから重要なもので、インターネットが誕生してから新しく生まれたものではありません。
インターネットでタイポグラフィを活用するためのガイドライン
オンラインでタイポグラフィを選択する方法を教えてくれるガイドラインは数多くあります。しかし、文字効果を作成しようとする場合や、ガイドラインよりもあなたのタイポグラフィをユーザーが気に入った場合には、これらすべてのガイドラインは意味がなくなってしまうことも明記するべきでしょう。タイポグラフィに「すべてに当てはまる唯一のサイズ」のようなモデルは存在しません。ユーザー体験におけるほかの領域と同様に、タイポグラフィにおいてもユーザーリサーチは重要です。
それではオンラインにおいてタイポグラフィをもっとも効果的に使う方法を見ていきましょう。
見出し
見出しはコンテンツの体験においてきわめて重要な部分です。見出しではユーザーの関心を掴む必要があります。そうでなければ、ユーザーはほかの何かにすぐ移動してしまうでしょう。しかし同時に、見出しは適切に表示されていなければなりません。つまりフォントのサイズや種類が、適切なものである必要があります。
オンラインでの大見出しは38ピクセルに設定するが現在の主流です。ここ10年程度の間で、見出しのサイズは非常に大きくなりました。これは、ユーザーの関心を引きつけられないと、ユーザーは別のところへ行ってしまうという認識が広がったことも意味しています。また、そのほかの見出しは20～32ピクセルの間に設定する傾向があります。
フォントの種類について、オンラインではセリフ体とサンセリフ体が半々で使用されています。もっとも人気のあるセリフ体のフォントはGeorgiaとChapparal Proです。一方、サンセリフ体ではArialとFreight Sans Proがもっとも人気です。フォントは怖がらずに試して使ってみましょう。しかしその読みやすさについて、ユーザーのフィードバックを得るのを忘れないようにしてください。
上の画像のようなワードクラウドを使って、見出しが目立っているかを確かめる必要はありません。効果的な見出しにして、ユーザーの関心を掴むようにしましょう。
本文
本文の文字も見出しと同じくらい重要です。見出しはユーザーを引き寄せるものですが、ユーザーが見続けることになるのは本文のテキストです。ここでもコンテンツの表示がきわめて重要になります。
本文の文字でもっとも人気のサイズは14～16ピクセルです。これも直近10数年の間でサイズが拡大しました。以前はより小さいフォントが主流でした。現在では文字は読みやすいものではなければならないと理解されています。
また、見出しと本文のフォントサイズの間には、オンラインで頻繁に使われる比率が存在することも覚えておいたほうが良いでしょう。見出しのサイズは本文のテキストに対して2.5倍である傾向があります。
Webフォントには、行間のスペースや行の長さに関する原則も存在します。この原則は、少なくとも標準的なWebサイトに適用されるもので、モバイルサイトに関してはあとで別に取り扱います。行送りはフォントの高さの1.46倍にすべきです。また最適な行の長さは、最適な行の高さの24.9倍にします。行の長さを文字数で表すと、最適な文字数はだいたい85文字です。またこれらの大まかな原則では、本文の見た目が魅力的になるようにマージンやパディングなどを加えなくてはいけません。
フォントの種類について、大多数のWebサイト（Webサイトの2/3近く）では本文のテキストにセリフ体が使われており、残りのサイトではサンセリフ体が使用されています。セリフ体でもっとも人気のフォントは見出しのときと同じですが、サンセリフ体では、最近はArialと Helveticaがよく使われます。
著者および著作権保有者：Fvasconcellos。著作権条項およびライセンス：パブリックドメイン。
Georgiaは「既成の概念にはまらないもの」として、オンラインでもっともよく使われるフォントの１つです。一方でカスタムフォントも、デザイナーが伝えたい体験を正確に生み出せるものとして、大変人気を集めています。
カスタムフォント
以上のようにアドバイスをしましたが、多くのWebサイトでは標準的なフォントをまったく使用していないことも覚えておいたほうが良いでしょう。サイトの大多数は、ブランドに合わせてカスタマイズしたフォントを採用しています。つまりユーザーリサーチを行いさえすれば、競合よりもテキストを目立たせるための方法は多数あるということです。
モバイルの場合
モバイルWebにおけるルールは、標準的なWebと同じではありません。異なるプラットフォームでも一貫した体験が確実に提供されるよう、デザイナーはレスポンシブなフォントを試す必要があります。
フォントの色
紛らわしいことに、もっとも読みやすいテキストの色については、矛盾するアドバイスがいくつか存在します。W3CのWebスタンダードでは、背景に対して少なくとも３：１のコントラストでフォントを使用することを推奨しています。しかし、このコントラストは不快感を与える恐れがあり、失読症の人がテキストを解析しようとする能力に影響を与えかねないと指摘するものもあります。つまり言えることは、フォントの色を確定する前に、実際のユーザーでその色をテストすることが不可欠だということです。
フォントの色にはコントラストを付けるべきですが、どのくらいコントラストを付けるかは議論次第です。色については矛盾するガイドラインがいくつか存在するので、何が確実かを知るために、ユーザーとテストを行うべきでしょう。
まとめ
コンテンツはまさにオンラインの王様です。どんなにデザインが素敵でも、どんなにナビゲーションが素晴らしくても、コンテンツに乏しければユーザーはページにとどまりません。もっとも優れたコンテンツのユーザー体験を提供するためには、ユーザーの関心を引きよせ、コンテンツを読むのが楽しくなるような方法で、コンテンツを表示しなければなりません。これまで解説した原則に従えば、見ていて楽しいコンテンツを提供するためのしっかりとした土台を作ることができます。しかしこれらの原則もほかのと同様に、ユーザーを用いたリサーチやテストにとって代わるものではありません。
