こんにちは、Mochiです。
文章ののフォント、大きさ、配置などのタイポグラフィはWebサイトの見栄えや読みやすさに大きな影響を与えます。そのため、タイポグラフィを学ぶことはWebデザインのスキルアップにおいて重要です。
でもタイポグラフィってどんなものなの？どんなフォントをどんな大きさで使えば、文章が綺麗に見えるの？🤔
そんな方に向けて
- タイポグラフィとは何か
- フォントの種類や美しく見せるためのルール
- 役立つツールとギャラリー
を解説します。
この記事を読むことで、文章を美しく読みやすくするためのフォントやルールを理解し、ツールを活用して効率的にデザインできるようになります。
では、まずはタイポグラフィとは何なのかを学んでいきましょう！
🤔 タイポグラフィとは
タイポグラフィとは、文章を美しく、読みやすくするためのテクニックです。
Wikipediaには以下のように書かれています。
タイポグラフィ（英: typography）は、活字（あるいは一定の文字の形状を複製し反復使用して印刷するための媒体）を用い、それを適切に配列することで、印刷物における文字の体裁を整える技芸である。
私たちが普段読んでいるWebサイトや本、雑誌などでもタイポグラフィを駆使することにより、自然と美しく、読みやすい文章になっています。逆にタイポグラフィがイマイチだと、何か物足りない、少し不恰好な印象を与える可能性があります。
そのため、タイポグラフィを学んでおくことで、美しく読みやすい、狙った印象を持つWebサイトなどをデザインすることができるようになります。
では、まずはタイポグラフィの中でも重要な役割を持つフォントについて、その種類を学んでいきましょう。
🇯🇵 日本語のフォント
日本語のフォントには、主に3つの種類のフォントがあります。それぞれの特徴と有名なフォントを押さえていきましょう。
明朝体
明朝体とは、ウロコと呼ばれる三角形の突起がある書体です。
特徴は次のようになります。
- 丁寧でかしこまった印象を受ける
- 筆で書かれているような特徴から、和の印象がある
- 長い文章に向いている
有名なフォントには次のものがあります。
- ヒラギノ明朝
- 游明朝体
- はんなり明朝（画像では漢字がうまく反映されていません😵）
ゴシック体
ゴシック体とは、ウロコによる突起がないシンプルな書体です。
特徴は次のようになります。
- 力強い印象を受ける見た目
- 太字にしても読みやすい
- シンプルなため、多くのデザインに合いやすい
有名なフォントには次のものがあります。
- ヒラギノ角ゴシック
- 游ゴシック体
- Noto Sans Gothic
装飾系フォント
装飾系フォントとは、装飾を目的とした独特なフォントです。
特徴は次のようになります。
- 読みにくいため、読むための文章には向いていない
- 見出しや短文のアクセントとして使える
フォントには次のものがあります。
- 解星オプティ
- M PLUS 1
- 凸版文久見出しゴシック
🌏 英語のフォント
次は英語のフォントです。こちらは主に4種類のフォントがあります。それぞれの特徴と代表的なフォントを見ていきましょう。
Serif
Serifとは、文字の端にSerifと呼ばれる突起がある書体です。
特徴は次のようになります。
- 伝統的でクラッシックな印象を受ける見た目
- 信頼感を感じる
- 長い文章に向いている（記事や雑誌）
有名なフォントには次のものがあります。
- Aleo
- Cormorant
- Cardo
- Merriweather
- Lora
- Cardo
- Playfair Display
- Goudy Bookletter 1911
- Times New Roman
- Didot
Sans-Serif
Sans-serifとは、突起のないシンプルなデザインの書体です。Sansはフランス語で「なし」を意味します。そのため”Serif”がない書体です。
特徴は次のようになります。
- モダンな印象を受ける見た目
- 綺麗でシンプル
- デザイン初心者には使いやすい
有名なフォントには次のものがあります。
- Robot
- Lato
- Inter
- Work Sans
- Open Sans
- Montserrat
- Helvetica
- Gills Sans
- Tahoma
- Futura
Display
Displayとは、装飾的な書体です。
特徴は次のようになります。
- 読みにくいため、本文には向いていない
- 見出しや大きな文字、短い文に向いている
- 注目を集めることができる
フォントには次のものがあります。
- Radley
- Montagu Slab
- Carter One
- Lobster
- Oleo Script
- Abril Fatface
- Sacramento
- Pacifico
- Permanent Marker
- monoton
Mono
Monoとは、均等に文字が配置された書体です。
特徴は次のようになります。
- 文字の幅が同じ
- 読みやすさから、プログラミングのコードによく使われる
フォントには次のものがあります。
- Roboto Mono
- Courier
- Anonymous Pro
- Inconsolata
- Fira Code
CSSを使ってフォントを変更する方法を確認したい方は、記事「CSSで文字やテキストを装飾する方法をまとめてわかりやすく解説」を読むのがおすすめです。
🖌️ 美しく、読みやすくするルール
フォントの種類を学んだ次は、文章を美しく、読みやすくするためのルールを解説します。まずはフォントのルールからです。
フォントのルール
安全に、人気で標準的なフォントを使う
人気で標準的なフォントは読者にとっても親しみがあり、読みやすいです。また、よくデザインされているため、多くの人が美しく感じやすいです。
逆に、独特で攻めたフォントはあまりおすすめしません。一部で注意を引くために使うのはアリですが、大部分に攻めたフォントを使うのはどこか居心地が悪く、信頼感を損なう可能性があります。
1ページに1種類のフォントを使う
フォントの種類は極力少ない方が良いです。フォントの種類が少ないと読みやすく、統一感を感じられるためです。よって、1つのページには1種類のフォントを使うよう心がけましょう。
もし、多くのフォントを使いたい場合には、多くても2種類のフォントまでに抑えるのがおすすめです。散らかった印象を抑えることができます。
目指す印象に合わせてフォントを選ぶ
皆さんが作成するWebサイトの目指す印象に合わせて、正しいフォントを選ぶようにしましょう。
例えば、TALANTONのように上品で信頼感のあるWebサイトを作りたいのか、榎本調剤薬局のように優しくて安心感のあるWebサイトを作りたいのかによって、適切なフォントは変わってきます。「どのような印象を目指すのか」を1つの判断基準として、フォントを選びましょう。
適切なフォントを選ぶステップ
紹介したフォントのルールを使いつつ、適切なフォントを選ぶステップは次のとおりです。
- Webサイトの目指す印象を決める
- 明朝体（Serif）とゴシック体（Sans-serif）のどちらにするか決める
- 人気のフォントを一通り試して、自分のWebサイトに最も合うものを見つける
- ページを作り上げていく過程で、異なるフォントを試し続けて、より良いものを見つける
ポイントは、”Step 3”の最も合うものを見つける段階で、時間をかけすぎないことです。作っていく過程で、より合うと感じるフォントは変化する可能性があります。そのため、とりあえずで1番良さそうなものを選び、作っていく過程で吟味していきましょう。
文字サイズと太さのルール
文字のサイズや太さをどのように設定すれば良いのか、そのルールをお伝えします。
利用するサイズを絞る
文字サイズはさまざまなサイズがあり、どれを使うべきか迷うことも多いかと思います。毎回迷っていると多くの時間がかかってしまいます。また、フォントのサイズがバラバラだと、統一感がなくなってしまいます。そのため利用する文字サイズは絞るようにしましょう。
文字サイズの絞り方としては、主に2つあります。
- Typescaleツールを使う
- 事前に範囲を決めて使う
Typescaleについては、ツールの章で紹介します🛠️
事前に範囲を決めて使う方法では、「16, 18, 20, 24, 32, 36, 40, 48, 64px」のように、自身で事前に使う値を決めて、その中から選んでいきます。
これらによって文字サイズの細かい数値で迷うことがなくなり、簡単に決めることができるようになります。
ジャンプ率
ジャンプ率とは、見出しと本文の文字サイズの比率です。文字サイズの差が大きい場合ジャンプ率が高く、躍動的で楽しい雰囲気になります。逆に、差が小さい場合、ジャンプ率が低く、上品で落ち着いた雰囲気になります。
作成するWebサイトの目指す印象に合わせて、ジャンプ率を設定しましょう。
次は文章ごとのより詳細なルールを説明します。
通常の文章: 文字サイズ
通常の文章では、文字サイズを16~32pxの間の大きさにしましょう。そしてこの範囲の中で、ターゲットユーザに応じてサイズを使い分けるようにしましょう。
例えば、ユーザが若い場合には文字サイズは小さいものでも問題ないです。しかし、ユーザが高齢者の方々の場合、文字サイズが小さいと読みにくい可能性が高いため、大きめの文字サイズにしましょう。
長い文章: 文字サイズと太さ
長い文章では、文字サイズを20px以上の大きさにし、太字は使わないようにしましょう。
20px以上の少し大きいサイズにすることにより、ユーザは長い文章を読みやすくなります。また、太字にしてしまうと文章が読みにくくなります。
見出し: 文字サイズと太さ
見出しでは、文字サイズを50px以上の大きさにし、600以上の太さ（太字）にしましょう。
文字を大きく、太くすることによりユーザは文章の構造を認識しやすくなります。これは文章全体の美しさと読みやすさにも大きく関わるため、重要です。
文章全般: 太さ
文章全般では、文字の太さを400（regular)以下にはしないでおきましょう。これ以上細いと文章が読みにくくなります。
適切な文字のサイズと太さを選ぶステップ
紹介したルールを使いつつ、適切な文字のサイズと太さを選ぶステップは次のとおりです。
- Webサイトの目指す印象を決める
- 利用する文字サイズを絞る
- 目指す印象に合わせて、ジャンプ率を決める
- ターゲットユーザに合わせて、通常の文章の文字サイズを16~32pxの間にする
- 長い文章の文字サイズを20px以上の大きさにし、太字は使わない
- 見出しの文字サイズを50px以上の大きさにし、600以上の太さ（太字）にする
- 文章全般では、文字の太さを400（regular)以下にしない
文字サイズを決める場合には、絞った中のサイズを使うようにしましょう。これにより、文字サイズを選ぶ時間が大幅に減ります。
読みやすくするルール
文章をより読みやすくするために有効なルールを見ていきましょう。
1行の文字数
1行の文字数は75文字以下にしましょう。これ以上長いと行を追うのが難しく、文章を読むのが大変になってしまいます。
また、モバイルデバイスの場合には1行の文字数を40文字以下としましょう。
行間
行と行の間の余白が行間です。通常の大きさの文字には1.5~2の行間をとりましょう。大きい文字は1.5以下の行間をとりましょう。
文字が大きくなるほど、行間は小さくて良いです。文字が大きくなるほど読むのが簡単になるため、行間が狭くても違和感がありません。ただし、狭すぎると文字が詰まっているように見えてしまうので、バランスをとりましょう。
文字間隔
タイトルや見出しが不自然に感じる場合は文字間隔を小さくしましょう。例えば、-1pxや-0.5pxにするのが良いでしょう。
並び
長い文章は中央揃えや両端揃えを使わないようにし、左揃えを使いましょう。これにより読みやすい、自然な文章にすることができます。
逆に、短い文章は中央揃えを用いても良いです。アクセントのある文章になります。
点滅する装飾を使わない
点滅するような刺激のあるテキストは、敏感な人が発作を起こす可能性があります。また、シンプルに読みにくい場合が多いです。そのため、極力避けるようにしましょう。
CSSでこれらのルールを使って、文字のサイズや行間を変える方法を確認したい方は、記事「CSSで文字やテキストを装飾する方法をまとめてわかりやすく解説」を読むのがおすすめです。
🛠️ 効率を上げるツール
タイポグラフィを考えて使う上で、効率を上げてくれるツールを紹介します。
Google Fonts
Google Fontsは数百を超えるWebフォントを探したり、比較したりするために非常に便利な無料のツールです。
1つのフォントに対して、複数の大きさや太さ、文字のスタイルを確認することができます。
Google Fontではフォントを比較するだけでなく、自身の作成するWebサイトでコードをコピーして貼るだけでフォントを利用することができます。これらのWebフォントは品質が高く、多くのWebブラウザで利用することができます。
Wordmark.it
Wordmark.itは自身のパソコンにあるフォントを比較表示してくれるWebサービスです。
複数のフォントを表示するだけでなく、文字のサイズを変更したり、文字間隔を変更することができます。
Type Scale
Type Scaleは文字サイズの範囲や組み合わせ（スケール）を自動的に作ることができるWebサービスです。
見出しから通常の文章より小さい文字サイズまでの差を設定・比較することができます。さらに、基となる文字サイズや太さ、フォントなどを選択することができます。
また、実際のWebサイトのように表示して見ることも出来ます。
🖼️ 参考になるデザインギャラリー
タイポグラフィを考える上で、参考になるデザインギャラリーを紹介します。
MUUUUU.ORG
MUUUUU.ORGはWEBデザインポータルサイトで、WEBデザイナーが参考にしやすい、縦に長いサイトのデザインを並べています。
この中でも、タイポグラフィに関するカテゴリが参考になります。タイポグラフィを特徴としたWebサイト実際に訪れて、見ることができます。きっとアイデアを出すために役立ちます🙌
WebDesignClip
WebDesignClipはWebデザインの制作において、参考になるアイデアが含まれたWebサイトをクリップしているサイトです。
この中で、タイポグラフィに関する項目が参考になります。独特なタイポグラフィを使ったWebサイトがまとまっており、実際に観覧することができます。こちらもデザインのインスピレーションを得るために、有効活用してみましょう。
🎉 まとめ
タイポグラフィとは何か、そしてフォントの種類、文章を綺麗に読みやすくするルール、効率を上げてくれるツール、アートギャラリーを解説・紹介しました。
みなさんはこの記事を読んだことで、文章を美しく読みやすくするためのフォントやルールを理解し、ツールを活用して効率的にデザインできるようになりました！素晴らしいスキルアップです👏
Webデザインにおいて、タイポグラフィは見た目だけでなく、ユーザ体験にも大きな影響を与えます。この記事で学んだルールやツールを活用して、美しく、読みやすいWebサイトをデザインしていきましょう。