WebタイポグラフィはWebサイトとユーザー間のコミュニケーションに置いて極めて重要な役割を果たします。確かに、デザインやインタラクションによるUI/UXの向上は非常に重要です。しかしながら、Webの持つ約95％の情報が書き言葉であることが示すように、情報伝達の基礎は文字です。そしてその文字における、可読性、アクセシビリティ、ユーザビリティを司るものがタイポグラフィであることから、その重要性はお分かりいただけると思います。
この投稿では、フォントの種類といった基本的な内容から、実践で使える使い方まで解説し、読み手にとってタイポグラフィ入門書となるような内容になっています。
タイポグラフィには3つの重要なコンセプトがあります。
それは「トーン」「可読性」「識別性」です。以下がそれぞれの内容となります。
トーンとは、タイポグラフィが視覚的に伝える雰囲気や感覚のことで、コンテンツ自体のトーンとは区別されます。トーンには、カジュアルなものからフォーマルなものまでさまざまな種類がありますが、メッセージとブランドにふさわしいトーンをタイポグラフィで設定することが大切です。
識別性とは、個々の字形（文字の形）を見分けやすくすることであり、ユーザーインターフェースの書体を設定する上で重要な考慮事項です。例えば、フォントによっては、大文字の「I」と小文字の「l」の区別がつきにくいものがあります。これは通常、フォントのデザインによるものですが、文字間隔が広すぎたり狭すぎたり、テキストがすべて大文字になるなど、特定のデザインを選択すると、読みやすさに影響を与えることがあります。
可読性とは、段落の内容を読むのがいかに簡単かを定義するものです。読みやすさは、フォントのデザインと、サイズ、間隔、色など、サイトの作り手が選択したデザインによって決まります。
これらの点については詳しく説明しますが、まずは最も重要な決定事項の一つであるフォントそのものについて説明します。
タイポグラファー（活字のプロ）はさまざまな観点でフォントを分類しますが、Webタイポグラフィの世界では、次のような分類が一般的です。
セリフ（明朝体） - 印刷物の王道とも言えるセリフ体は、個々の文字の端（ターミナル）に「セリフ」と呼ばれる小さな線があるのが特徴です。
例）Times New Roman、Georgia、Droid Serifなど
サンセリフ（ゴシック体） - その名が示すように、サンセリフ体にはセリフがありません。初期のコンピュータ画面では、セリフが鮮明に表示されにくかったため、Web用の標準的なフォントとなっています。
例 ）Arial、Verdana、Droid Sansなど
等幅フォント - 等幅フォントは、すべての文字が同じ幅で書かれています。たとえば、TelとFaxを縦並びでサイトに載せるとします。すると、等幅フォント出ない場合は文字数が同じであるにも関わらず、文字列の長さにばらつきが出ます（小文字の「l」や数字の「1」などはフォント幅が他の文字より狭くなるためです）。しかし、等幅フォントであれば、1文字あたりの横幅が同じであるため、ばらつかずきれいにそろえることができます。
例）Inconsolata、Noto Sansなど
筆記体 - 筆記体は手書きの文字を模倣しています。読みやすさよりも視覚的な面白さを重視する傾向があり、本文よりもタイトルや見出しに適しています。
例）Indie Flower、 Great Vibesなど
ディスプレイ - ディスプレイフォントは、大きく太いか細いかのどちらかで、非常に複雑な字形を持つことが多いです。注目を集めるインパクトがあるため、見出しに使うのが最適です。
例）Changa Oneなど
書籍や文書、Webページで目にするフォントの大半はセリフかサンセリフです。この記事はタイポグラフィの入門編なので、この2つに焦点を当てます。
もし、セリフとサンセリフが標準的なフォントの種類だとしたら、この2つをどう使い分ければいいのでしょうか。デザインの世界ではよくあることですが、その答えは「人それぞれ」です。
印刷物ではセリフは読みやすさを高めると言われていますが、デジタル世界では古いデジタルスクリーンだと解像度が低いために読みやすさが損なわれるとも言われています。Retinaや4Kディスプレイが標準になりつつある現在この懸念は少なくなっていますが、閲覧者が様々なデバイスを使ってサイトを閲覧する場合は、本文にサンセリフを使用した方が安全かもしれません。
セリフ体のフォントは、見出しなど短くて大きな文字で構成されたテキストに適しています。その華やかな見た目から、よりフォーマルでプロフェッショナルな印象を与えることができ、特定のブランドには理想的なフォントです。
たとえば、ニュースサイトや専門的なブログでは、本文にセリフ体のフォントがよく使われています。特に新聞社では、セリフ体のフォントを使うことで、いわゆる新聞という外観と雰囲気を保つことができます。また、長文読解にはセリフ体の方が適していると主張する人も多いですが、これは科学的事実というよりも、親しみやすさに起因するものかもしれません。
本文はサンセリフ体で読みやすさを重視し、見出しや短いコンテンツにはセリフ体を使用することを検討しましょう。ただし、ブランドや業界によってはセリフ体の方が適している場合もあります。
プロフェッショナル、遊び心、クラシック、アグレッシブなど、フォントにはそれぞれ個性があります。つまり、間違った場所に間違ったフォントを使用すると、おかしな見た目になる可能性があるということです。
合衆国憲法が、Comic Sansのようなカジュアルなトーンのフォントで書かれていればバカバカしく見えてしまいます。重大な文書に、このようなフォントはふさわしくありません。
もちろん、フォントの特性によってトーンが決まるわけではなく、見たり読んだりしたときの印象でトーンは決まります。そのため、タイポグラフィを使いこなすためには、あれもこれもと手を出すのではなくいくつか絞った中で選択し、それぞれの文脈で試していくのが最善です。友人や同僚、あなたのターゲットとする読者にも見てもらい、試すのも良いでしょう。
自分の目を信じて、トーンとコンテンツを一致させる。他の人にもフォントを文脈から見てもらい、どのようなトーンになるかを教えてもらいましょう。
1つのページで複数のフォントを使用する場合、それらのフォントがどのように組み合わさっているかを考慮する必要があります。フォントによっては、良くない組み合わせになってしまうこともあれば、一緒に使うために作られたような相性の良いフォントもあります。
デザインの中でいくつかの組み合わせを試し、それらがどのように見えるかを見てみましょう。Typegeniusは、このような場合にとても便利です。
サンセリフとセリフのフォントは、組み合わせに自信がない限り、ちぐはぐになりやすいので注意が必要です。また、同じ種類のフォント同士（サンセリフ同士、セリフ同士など）を組み合わせても、似ていて区別がつかないことが多いので、避けた方がいいでしょう。
フォントの組み合わせは、最大でも3種類までにしてください。それ以上だと、うるさい印象になり、ユーザーの混乱を招く可能性があります。
便利なフォントリソース
・Typekit - このサービスは、ウェブサイト用のプレミアムフォントの膨大なコレクションをホストし、提供しています。Webflowへの統合も簡単です。
・Google Web Fonts - この膨大なフリーフォントのコレクションには、不作も少なくありませんが、Open SansやAlegreyaなど、美しく柔軟な逸品も揃っています。
・BehanceとDribbble - 多くのデザイナーが独自の素晴らしいフォントを作成し、無料でダウンロードできるよう共有しています。
タイポグラフィーのインスピレーションを得る場所
・Typewolf
・Awwwards Picked Typography Sites
・Hello Happy – Beautiful Web Type
・Hand-picked tales from Aesop's Fables with hand-picked type from Google Fonts
・FontPair - フォントの組み合わせのテストに最適なツール
当然のことながら、文字と背景のコントラストは読みやすさのために重要です。
しかし、読みやすさに最も適した色の組み合わせは、明るいグレーの背景に濃いグレーの文字であり、真っ白（#fff）に真っ黒（#000）ではないことは、意外に知られていないのではないでしょうか。なぜなら、真っ白な背景に黒い文字は、色の反射や吸収の特性により、微妙な色のにじみが発生するからです。また、真っ白だと目が疲れてしまいます。
またこれもついやってしまいたくなりますが、暗い背景に明るい文字で長い文章を書くのは避けましょう。明るい文字は光を反射して少しぼやけますが、黒い文字は光を吸収して鮮明になります。
暗い背景に明るい文字を配置する場合や、画像の上に文字を配置する場合は、背景をできるだけ暗くし白い文字にわずかなテキストシャドウを付けて、ポップな印象にすることもおすすめです。また、目の疲れを防ぐために、文章は短くしたほうが良いとされています。
長い文章の場合は、明るい背景に濃い色の文字を使用します。色や画像の上にテキストを表示する場合は、背景をできるだけ暗くし、テキストにわずかなシャドウを付けることを心がけてください。
デスクトップモニターのサイズが30インチ以上になると、1行の長さが気になるようになります。
どのくらいだと長すぎるのでしょうか？ ノートパソコンやデスクトップモニターの幅いっぱいに本を広げられたら、快適に読めるでしょうか？ 私はそうは思いません。
また、しおりの幅ほどの本を読むのも幅が狭すぎて快適ではないでしょう。
ブログの様にコンテンツ幅いっぱいに文字を並べる場合、1行の長さを40～50文字にするのが最適です。
これより短いと、読者は行を行ったり来たりして疲れてしまいます。それ以上だと、読者はある行の終わりから次の行の始まりへと移動した時に、自分がどこを読んでいるか分からなくなってしまうかもしれません。
デバイスのサイズに関わらず読みやすさを維持するには、フォントサイズと行の長さのバランスを取る必要があります。フォントを大きくすればするほど、1行あたりの文字数は少なくなります。小さなデバイスでは、1行の文字数が非常に少なくなる可能性があります。
1行の長さは40～50文字を目安にしてください。
フォントのウェイトは、個々の文字の太さ（または太字）を定義します。デフォルトのフォントの太さは400ですが、太字は700です。多くのフォントは、100から900まで100刻みでウェイトが設定されており、100は極細、900は極太となります。
特定の文章を強調したり、演出を加えたりする場合は太いウェイトを使用するのが良いとされています。また、大きなディスプレイ設定以外では細いウェイトを使用しないようにしましょう。Exo2というフォントの9つのウェイトすべてを読み込むと、ページの表示速度が極端に低下する可能性があります。
印刷物では、文字の大きさを「ポイント」で表現することが多いですが、Webでは「ピクセル（px）」を使うことが多いです。
しかし、レスポンシブデザインでは、すべてのサイズとスペーシングのプロパティを、ピクセルのような絶対単位ではなく、emやパーセントなどの相対単位で設定するのが、実は一番いい方法なのです。
emは、対象となるHTML要素の現在のフォントサイズ（パラグラフのデフォルトは16px）と等しい相対的な単位です。つまり、2emはこの2倍のサイズ（デフォルトパラグラフサイズの場合は32px）になります。
なぜでしょうか？
理由は2つあります。まず、フォントサイズが変わると、行間も変わるからです。フォントを16pxに設定した場合、24pxの行の高さは美しいかもしれませんが、32pxの高さでは、あまりにも広すぎます。
第二に、相対的な単位を使うことで、レスポンシブデザインが少し簡単になります。基本となるフォントサイズに対してすべてを相対的にデザインしておけば、将来的にそのフォントサイズを変更しても、他の部分は自動的に調整されるので、手作業で調整する手間が省けます。
また、ピクセルサイズはデバイスによって大きく異なるため、微調整が必要になることもあります。例えば、iPhoneで16pxのフォントを表示する場合、Macbookの16pxのフォントの約60％の大きさになり、非常に読みづらくなります。
適切なスペーシングを行うことで、コンテンツは非常に読みやすくなります。不適切なスペーシングは、行や文字、単語の境が曖昧になり、窮屈な印象を与えることがあります。読みやすさを最大限に高めるには、文字間（トラッキング）、行間（リーディング）、単語間（ワードスペーシング）の3種類のスペーシングに気を配ることが必要です。
文字間隔は、単語内の各文字の間隔を定義し、テキストの読みやすさを向上させたり、低下させたりすることができます。カーニングと異なり、トラッキングではすべての文字の間隔を単一に設定しますが、カーニングでは文字毎に文字間の間隔をカスタマイズすることができます。
ワードスペーシングとは、文中の単語と単語の間隔を表すものです。単語と単語の間に視線を集中させることなく、異なる単語を明確に区別することができれば、最高のワードスペーシングと言えます。
大きなサイズで設定された単語が近すぎるように見える場合を除き、通常、単語の間隔を調整する必要はありません。
行の高さ（リーディング）は、テキストの各行間の垂直方向のスペースを定義し、アセンダーとディセンダーを無視してベースラインからベースライン（下の画像では赤線）までの距離を測ります。
行の高さが不十分だと閉塞感を感じるだけでなく、同じ文を何度も読み返すことになりかねません。一方、行の高さをとりすぎると、コンテンツがばらばらに見えてしまいます。
目安として、ラインハイトを1.5em（または本文の1.5倍）程度に設定しましょう。縦方向のリズムを保つため、段落の間隔（margin-bottom）は、line-heightと同じにするのが適切です。
文字の大きさは、相対的な重要性を伝え、話の流れを作り、読みやすさを決定する上で大きな役割を果たします。
大きなものは小さなものよりも注意を引きます。特に、それが予想以上に大きなものである場合はなおさらです。
私たちは、大きなものほど重要なものだと考えています。見出しはほとんどの場合、本文の段落よりも大きく、脚注よりも大きくなります。大きさの違いは、私たちが何に注目し、何を読み飛ばすべきかを決めるのに役立ちます。
サイズもインパクトや流れを生み出すのに有効です。小文字で斜体にしたものよりも、大文字で背の高い太い文字をページ全体に配置したもののほうが、より力強い印象を与えることができます。
要するに、ある要素に目を向けさせたいなら、目立つように大きくすればいいのです。Eメールの件名欄、「今すぐ購入」ボタン、見出しなどの行動喚起（CTA）が、ページの他の要素よりもはるかに大きくなる傾向があるのは、このためです。
6ptのフォントで書かれた本を読もうとしたことはありますか？
段落のフォントサイズのデフォルトは16pxですが、インターネットでは12px、13px、14pxがよく使われます。本文のフォントサイズは14px以下にしないことをお勧めします。
注：目安として、大見出し（H1）は本文のフォントの2倍の大きさに設定します。残りの見出し（H2以下）は、1レベルにつき約25％ずつサイズを下げればOKです。つまり、本文を16pxに設定した場合、H1は32px、H2は24pxといった具合です。
特にフォントの世界では、まだまだ深く学ぶことができることがたくさんあります。
タイポグラフィを学ぶのに便利なリソースをいくつか紹介しましょう。
Hack Design - タイポグラフィを含むウェブデザインに関するあらゆることを詳細に解説します。
Tuts+ - タイポグラフィに焦点を当てた素晴らしいウェブデザインコースです。
Design for Hackers - 分析的な視点とタイポグラフィーの素晴らしいセクションを特徴とする、デザインの入門書です。
いかがでしょうか。
当社では、Webデザイナーの方が意のままにサイト構築できる、次世代型ノーコードツール「Webflow」の無料説明会を実施しています。
以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。
Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。
今後とも宜しくお願い致します。
Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。
Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。
Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。
会社名
Funwork株式会社
所在地
東京都千代田区東神田3-4-12
代表者
堀尾 尭史
電話番号
メール
03-5809-2979
backoffice@funwork2020.com
URL
設立日
2020年5月18日
資本金
9,000,000円
取引銀行
きらぼし銀行
Webサイト、ITサービス受託開発
マーケティングコンサル事業
シェアオフィス及びコワーキングスペースの運営