1. タイポグラフィとは

タイポグラフィとは「読みやすいフォントで、適切な位置に文字をレイアウトしていくこと」です。

タイポグラフィは以下のような様々な要素から構成されています。

• サイズ — 文字の大きさ。見出しと本文のサイズ比（ジャンプ率）が印象を大きく変えます
• 行間 — 行と行の距離。読みやすさに直結します
• カラー — 文字色と背景のコントラスト。可読性に影響します
• フォント — 書体の種類。サイトの雰囲気を決定します
• ウェイト — 文字の太さ。強調と本文の区別に使います
• ジャンプ率 — 大きい要素と小さい要素のサイズ比。訴求力をコントロールします

それぞれの要素をどうするかによって、ユーザーに与えられる印象が大きく変わります。

2. 読みやすい文字を意識する

左は行間が詰まりすぎており読みづらいですが、右側は行間が適切で読みやすいですね。行間だけでもこれだけ印象が変わります。

3. フォントを選ぶ手順

以下の4ステップに沿ってフォントを選ぶのが一般的な手順です。

4. フォントの系統とは

a. フォントの基本分類

フォントには和文フォントと欧文フォントが存在します。

• 和文フォント：明朝体・ゴシック体の2種類に大きく分類できます
• 欧文フォント：セリフ体・サンセリフ体の2種類に大きく分類できます

※他にも使用頻度は低いですが、欧文・和文ともに筆記体・手書き文字・デザイン書体なども存在します。手書き文字を使用するとより柔らかく遊び心のあるデザインが可能です。

明朝体とゴシック体の違い

• 明朝体：横線に比べ縦線が太く、止め・はね・はらい・曲がり角に「ウロコ」を持ちます
• ゴシック体：すべての線の太さが同じでウロコが存在しません

セリフ体とサンセリフ体の違い

セリフ体は和文フォントの明朝体に相当し、ウロコを持ちます。サンセリフ体はウロコを持たない、ゴシック体に相当するものです。

b. 系統別の与える印象の違い

サイトでユーザーに与えたい印象に沿って、どの系統を選択するかまずは考えるとよいでしょう。

5. おすすめフォント紹介

大きくデバイスフォントとWEBフォントの2種類について説明していきます。WEBフォントに関してはGoogle Fontsに収録されており、今後学習するFigmaでも簡単に無料で使用できるものを紹介していきます。

Google Fontsのページはこちら

a. デバイスフォントとWEBフォントの違いとは

• デバイスフォント：ユーザー側のPC内にあるフォントを活用して表示させる方法。表示速度が速い反面、OSに標準搭載のフォントに限られ、デバイスによって表示が変化します
• WEBフォント：WEBサーバーを通してフォントをブラウザに読み込んで表示させる方法。大量の種類から選べ、ユーザーの閲覧環境に依存せずフォントを指定できます。近年は容量削減でデメリットの表示速度も気にならなくなっています

b. おすすめデバイスフォントの紹介

游ゴシック（Windows・Mac対応）

ヒラギノ角ゴシック（macOS・iOS対応）

游明朝（Windows・macOS対応）

メイリオ（Windows専用）

6. フォントウェイトの調整

フォントウェイトとは文字の太さです。1つのフォントファミリーの中に様々な太さのフォントが格納されています。例えば Noto Sans JP には以下のような種類があります。

• Thin 100
• Light 300
• Regular 400
• Medium 500
• Bold 700
• Black 900

フォントウェイトの種類はそのフォントファミリーによって変わります。

7. 行間の調整

a. 行間の定義

行間の定義としては、②が文字自体の高さ、①＋②＋③を行間と呼ぶことが多いです。行間を文字の大きさの2倍にする（200%）というときは、①＋②＋③ ＝ ②×2 という意味で設定されるのが一般的です。

この行間における余白の考え方には主に2種類あります。

• 活版印刷モデル：文字の下に余白を追加していく伝統的な方式。紙媒体のデザインでよく見られます
• ウェブモデル：文字の上下に余白を均等に分配する方式。Webサイトやアプリのデザインにおける標準的な考え方です

今後学習するFigmaのようなデザインツールもウェブモデルに基づいて設計されています。設定した行間の高さから文字自体の高さを引いた余分なスペースは、文字の上下に均等に配置されると覚えておきましょう。

b. 行間は1.5〜2に設定しよう

行の高さをline-heightと呼びます。行間が広すぎると間伸びして読みづらく、詰まりすぎていると窮屈で読みづらいです。

8. 字間（トラッキング・カーニング・文字詰め）の調整

a. 字間の定義と理想的な値

①が文字自体の横幅、②を字間と呼ぶことが一般的です。字間を10%で設定すると言ったら、②の幅を①の10%に設定するという意味になります。

b. 理想的な字間

c. 理想的な行長

行長とは1行の長さのことです。フォントサイズ・字間・改行を駆使することで行長を調整することができます。WEBサイトでは1行当たり25〜40字が読みやすいとされています。Figmaではテキストボックスをドラッグして長さを調整することで行長を簡単にコントロールできます。

d. カーニングで文字間隔をさらに微調整する

カーニングとは文字と文字の間隔を調整することです。1文字ごとに文字幅が微妙に異なったりします。特に1行の中でフォントサイズやフォントファミリーが異なる文字が混在したりする場合に、文字間隔がバラバラで乱れた印象になることがあります。そういった場合に1文字ずつ文字間隔を微調整することで美しいデザインを作ることができます。

Figmaでは1文字を選択して右側の字間の調整のところから%やpx単位で指定ができます。

9. フォント選びに便利なツール

世の中には非常に多くのフォントが存在します。そんな大量のフォントの中から効率的に良いフォントを探すツールがあるので紹介します。

すぐ使えるようにChromeのブックマーク機能でフォルダを整理しておくとよいでしょう。ツールは読んだだけでは使い方も身に付かず記憶に残らないケースが多いので、ぜひアクセスしてみてください。

a. Google Fonts

まずはGoogle Fontsへアクセス

Google Fontsは商用利用OKで全て無料で使用できます。アカウント登録なども一切不要です。またFigmaではGoogle Fontsにあるフォントは全てインストール不要で使用できます。Google Fontsで見つかったフォントはFigmaでもすぐに使えるので、まずはGoogle Fontsで理想のフォントが見つからないか探すのがおすすめです！

Google Fontsの機能説明

• ①：フォントの名前を入れるとヒットします
• ②：好きな文字を入れるとそれが下の画面に表示されるので、好きな文章でフォントを比べてどれにするか決めることができます
• ③：フォントサイズをコントロールできます
• ④：言語を絞ったり、フォントのイメージを選択することができます
• ⑤：トレンドや人気順・最新順などに並び替えができます

Google Fontsのフォントを使いたいとき

気になるフォントを見つけたらタップしてみてください。その上で「①Download family」を押してローカルにフォントをインストールする方法と、「②＋ボタン」を押した上で右側のlinkからHTMLファイル・CSSファイルにそのまま貼り付け可能な形でフォントを取得できます。FigmaはデフォルトでGoogle Fonts上のフォントは原則利用できるのでこれらの設定を行う必要はありません。

b. Wordmark.it — PC内のフォントを比較可能

自分が現在利用しているPCにインストールされているフォントを自動で抽出し比較してくれるサービスです。すぐに利用可能なフォントを一覧で表示できるためとても便利です。まずはWordmarkで良いフォントが眠っていないか確認するとよいでしょう。

c. イメージから探したい時はこれ — モジザイ

なんとなくのイメージワードが決まって日本語フォントの候補を色々探したいときはモジザイがおすすめです！「①書体から検索」と「②イメージワードから検索」の2つを駆使して色んなフォントに出会うことができます。

• 書体から検索：「明朝体」「ゴシック体」「毛筆書体」「デザイン書体」から選べます
• イメージワードから検索：「男性的」「女性的」「子どもっぽい」「渋い」「レトロ」「クール」「ポップ」など20以上のキーワードからイメージに合ったフォントを教えてくれます

d. 有料フォントで差をつけたい方へ — designpocket

学習中に有料フォントを買う必要はありませんし、基本的に無料フォントもかなり充実しています。ただ有料フォントで差をつけたい・もっとこだわりたいという方は有料フォントを活用するとよいでしょう。

「designpocket」は30,000以上のフォントを取り扱っているフォント専門サイトです。ブランド・キーワード・フォント形式・タイプ・文字種類・太さ・価格帯などからフォントを検索して購入できます。

10. 気になるフォントの特定に便利なツール

WEBサイトや画像上で気になるフォントを見つける時があると思います。その際はぜひ以下のツールを使ってフォントの名前を特定し、自身のWEBデザインに活かすようにしていきましょう。WEBデザインにおいては必ずベンチマークとなるようなサイトデザインを集める工程が発生します。以下のツールを使ってサクサクフォントの種類やカラーなどを特定すると作業が捗ります。

a. HP上のフォントを特定 — Fonts Ninja

こちらはChrome拡張機能であり無料でインストール可能です。Fonts Ninjaを活用するとカーソルに当てるだけでフォントファミリー・フォントサイズ・行間・字間・文字カラーが瞬時に分かります。また右側のバーからすぐに無料フォントのインストールや有料フォントのトライアルを開始することができます。フォント特定においてはWhatFontに並び活用必須のツールです！

b. HP上のフォントを特定 — WhatFont

Chromeの拡張機能・WhatFontです。カーソルを文字に置けばすぐにフォントを特定できます。機能はFonts Ninjaの方が多いですが、WhatFontの方がシンプルに活用できます。ここは好みの問題なので好きな方を使うようにすればOKです。

c. 画像上のフォントを特定 — WhatTheFont

画像上のフォントにFonts NinjaやWhatFontでカーソルを当てても識別できません。なぜならそれらはHTML・CSSのソースコードから読み取って識別を行っているからです。画像のフォントを特定したいときはWhatTheFontがおすすめです。

PNG・GIF・JPEGなど様々なファイル形式に対応しており、50文字までの解析が可能です。気になる画像上のフォントを見つけたらスクリーンショットを撮ってアップロードしましょう。解析が終了すると推測されるフォントが複数種類表示されるので近いものを探すと良いでしょう。

d. 【上級者向け】形状から条件を指定して特定 — identifont

こちらはかなり上級者向けでしばらくは必要ないと思いますが紹介しておきます。細かなフォントの特徴から指定していきたい場合などにとても便利です。「Fonts By Appearance」ではフォントの外見的特徴からフォントを特定できます。セリフかどうか・アルファベットは下で揃っているか・$はどのような特徴かなど大量の選択式の質問に答えることでフォントの名前を特定してくれます。イメージでいうとアキネイターに似ています。