この記事でわかること
フリーランスの案件で文字を扱う場面は多く、タイポグラフィの基本を知っているかどうかで成果物の質が変わります。タイポグラフィとは書体・字間・行間・配置を調整して文字を読みやすく整える技法の総称です。この記事では定義から実務応用まで7つの要素で解説します。
| 学べること | 内容 |
| タイポグラフィの定義と7要素 | フォント・字間・行間・コントラストなど構成要素の全体像 |
| 実務で使える7つの改善ハック | 修正ゼロ納品・ライセンス管理・視線誘導の言語化など |
| 納品前5項目チェックリスト | 品質を安定させる確認フローと判断基準 |
30秒診断全2問・あなたに合う働き方のタイプが分かります
Q1. 今の仕事について、一番近いものは？
この記事の結論
タイポグラフィとは、フォント選びだけでなく文字サイズ・字間・行間・配置・余白を含む文字の視覚設計全体を指します。フリーランスがこの概念を理解することで、「なんとなく選んでいた」文字の扱いを目的と根拠のある判断に変えられます。案件の品質向上はもちろん、クライアントへの提案で「読みやすさ」「視線誘導」「ブランド表現」の観点から説明できるようになるため、競合との差別化にもつながります。
今日やるべき1つ
手元の直近の納品物（バナー・資料・LP）を開き、見出しと本文のフォントサイズ差が1.5倍以上あるかを確認します（所要時間5分）。差がない場合はサイズを1.5倍以上に広げることが最初の改善点です。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| タイポグラフィの意味をまず知りたい | タイポグラフィとは文字の視覚設計7要素 | 3分 |
| フォントとの違いを整理したい | タイポグラフィはフォントを含む上位概念 | 3分 |
| 自分の文字組みが適切か診断したい | タイポグラフィの完成度を3分で診断 | 3分 |
| 実務ですぐ使えるノウハウを知りたい | タイポグラフィは7つの仕組みで実務改善 | 10分 |
| 案件別の使い分けを知りたい | タイポグラフィは2パターンで媒体別設計 | 5分 |
タイポグラフィとは文字の視覚設計7要素
タイポグラフィは活版印刷から始まった技法
タイポグラフィはもともと、金属製の活字を並べて紙に印刷する「活版印刷」の組版技術を指す言葉でした（タイポグラフィ – Wikipedia）。印刷業者が活字の大きさ・行間・行長を物理的に設計することが仕事の核心であり、文字の見た目を整える行為そのものが技法として体系化されました。現在はデジタル化により紙媒体だけでなくWebサイト・バナー・動画テロップ・スライド資料まで適用範囲が広がり、電子媒体も含む文字の視覚的処理全般を指す言葉として使われています（タイポグラフィとは｜designpartner.jp）。印刷の知識がなくても、文字を扱うすべての制作者にとって関係する概念です。
タイポグラフィの7つの構成要素
タイポグラフィは7要素で構成されます。書体・フォントは文字のデザインデータそのもので、デザインの「素材」にあたります。文字サイズは情報の優先順位を視覚的に伝える最も基本的な手段で、見出しと本文で1.5倍以上の差をつけることが一般的な目安です。字間は文字と文字の水平方向の空きで、日本語では詰めすぎると判別しにくくなり、英語では広げすぎるとリズムが崩れます。行間は行と行の垂直方向の空きで、本文テキストでは文字サイズの1.5倍から2倍程度が読みやすいとされています。行長は1行に収める文字数で、日本語縦書き・横書き・Webの3媒体でそれぞれ適切な範囲が異なります。文字色と背景色のコントラストは可読性を左右し、WCAG（Webコンテンツアクセシビリティガイドライン）では通常テキストで4.5:1以上のコントラスト比を推奨しています（WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum)｜W3C）。整列と余白は文字要素の配置ルールで、視線の流れを作り情報の読み取り順序を設計します。これら7つは独立したパラメータではなく、互いに影響しながら「読みやすさ」と「見た目の印象」を決定します。
タイポグラフィが実務で重要な理由
フリーランスの案件では、クライアントから「もう少しプロっぽくしてほしい」「文字が読みにくい」という修正依頼が来ることがあります。この「プロっぽさ」の大半はタイポグラフィで決まっています。書体を変えなくても、行間を広げ、見出しのサイズを上げ、余白を確保するだけで印象が変わります。タイポグラフィの基本を理解することは、修正回数を減らし、納品品質を安定させる直接的な手段です。デザインポートフォリオに掲載する制作物でも、文字設計の意図を言語化できると信頼につながります。文字の設計を後工程で行うのではなく、制作開始前に構成要素の方針を決めておくことが最も効率的な進め方です。
CHECK
▶ 今すぐやること: 自分の直近の納品物で「7要素のうち意識していた要素の数」を数える（3分）
Q: タイポグラフィとレタリングの違いは何ですか?
A： レタリングは手書きや手工芸的手法で文字を描き起こす行為を指します。タイポグラフィは既存の書体・フォントをベースに文字を整える行為が中心です。ロゴの手書き文字を起こすのがレタリング、そのロゴをレイアウトに配置して読みやすく整えるのがタイポグラフィの領域になります。
Q： 文字組みとタイポグラフィは同じ意味ですか?
A： ほぼ同義として使われますが、文字組みは主に日本語の組版用語として使われ、字間・行間・禁則処理などの処理ルールを指すことが多いです。タイポグラフィはより広義で、書体選択・配色・レイアウト全体を含む概念として使われます。
押さえておきたい点
見出しと本文の間のサイズ差を1.5倍以上に設定した。字間・行間・コントラスト比を意識して設定した。7要素のうち自分が意識できていなかった要素を特定した。
タイポグラフィはフォントを含む上位概念
フォントは素材、タイポグラフィは設計
フォントとはデジタル環境において文字のデザインデータを収録したファイルのことで、ゴシック体・明朝体・サンセリフ体などの書体ファミリーを指します（タイポグラフィとデザインの基本｜reiro.co.jp）。タイポグラフィはこのフォントを「どのサイズで」「どの間隔で」「どの位置に」「何色で」配置するかを含む設計全体です。同一フォントを使っても、行間を1.2から1.8に変えるだけで読み心地が変わり、見出しと本文の色差を設けるだけで情報の優先順位が明確になります。フォント選びはタイポグラフィの出発点であって、ゴールではないということです。無料フォントを商用利用する際のライセンス確認も、フォント選定の重要な一歩です。
カーニングとトラッキングの実務での使い分け
カーニングは特定の文字ペア間の空きを個別に調整することで、主にロゴや見出し文字など大きなサイズで目立つ文字間のズレを補正するために使います（Webデザイン入門編1:タイポグラフィ｜paiza.jp）。「AV」「To」といった組み合わせは、フォントの設計上どうしても空きが大きく見えるため、カーニングで詰める処理が必要になります。一方、トラッキング（字間調整）は選択した文字列全体に対して均一に空きを調整するもので、本文の読みやすさや見出しの軽快さをコントロールする際に使います。フリーランスの実務では、見出し文字の仕上げにカーニング、本文全体の雰囲気調整にトラッキングと使い分けると整理しやすいです。
可読性と視認性は目的が異なる指標
可読性とは、文章を継続して読み進めやすいかどうかを示す指標です。行間・行長・字間が適切に設計されているほど可読性は上がります。視認性とは、文字を瞬時に発見し、判別しやすいかどうかを示す指標です。標識・ボタン・見出しなど、一瞬で意味を伝える必要がある要素では視認性が優先されます。フリーランスが扱う制作物で言えば、LPの本文は可読性優先、バナーのCTAボタンのテキストは視認性優先という形で判断基準が変わります。同じフォントでも用途が変われば最適な設定は異なるため、制作前に「この文字は継続して読まれるものか、瞬時に認識されるものか」を確認してください。
CHECK
▶ 今すぐやること: 手元の案件で「見出し・本文・注釈」の役割分類ができているかを確認する（5分）
Q: フォントを増やすとデザインが崩れやすいのはなぜですか?
A： フォントが増えるほど、サイズ・色・字間との組み合わせパターンが複雑になり、視覚的なまとまりが失われるためです。実務では1案件につき2書体以内を原則とし、ウェイト（太さ）の違いで情報の優先順位を表現する方法が安定した品質につながります。
Q： Webフォントと端末フォントはどちらを選ぶべきですか?
A： Webフォントはデザイン意図通りの書体を全端末で表示できますが、読み込み速度への影響を確認する必要があります。端末フォントは表示が速く安定していますが、OS・ブラウザで見え方が変わります。LPやポートフォリオサイトはWebフォントを活用し、速度が重要なサービスサイトは端末フォントを基本とする判断が一般的です。
重要ポイント
「見出し・本文・注釈」の役割分類ができている。1案件で使用する書体が2種類以内に収まっている。可読性と視認性のどちらを優先するか判断した。
タイポグラフィの完成度を3分で診断
Q1: 見出しと本文のフォントサイズ差は1.5倍以上ありますか?
Yesの場合はQ2へ進んでください。Noの場合はまずサイズ差の確保を優先してください（Result D）。
Q2: 本文の行間は文字サイズの1.5倍以上に設定されていますか?
Yesの場合はQ3へ進んでください。Noの場合は行間調整が次の改善点です（Result C）。
Q3: 文字色と背景色のコントラストを意識して設定しましたか?
Yesの場合はQ4へ進んでください。Noの場合はコントラスト確認ツールで現状を計測してください（Result B）。
Q4: フォントの商用利用ライセンスを確認しましたか?
Yesの場合はResult A（基本設計が整っています）です。Noの場合はライセンス確認が必要です（Result B）。
Result A: 基本設計が整っています。
次のステップとして、余白・整列・カーニングの精度向上に取り組んでください。制作物のスマートフォン表示確認も忘れずに行ってください。
Result B: コントラストまたはライセンス確認が必要です。
Adobe ColorのコントラストチェッカーまたはWebAIMのコントラストチェッカーにカラーコードを入力し、WCAGの4.5:1基準を満たすかを計測してください。フォントライセンスは各フォント配布サイトの利用規約ページで確認できます。著作権侵害のリスクを避けるためにも、使用前の確認を徹底することが重要です。
Result C: 行間が狭い可能性があります。
本文の行間を文字サイズの1.5倍から2倍の範囲で再設定し、実際にテキストを数行表示して読みやすさを確認してください。
Result D: 情報の階層が不明確です。
見出しを本文の1.5倍以上のサイズに設定することが出発点です。ウェイト（太さ）と色で差をつけることで、情報の優先順位が視覚的に伝わります。
CHECK
▶ 今すぐやること: Q1からQ4を手元の制作物に当てはめて確認する（3分）
Q: バナーと資料で設定値を変えるべきですか?
A： 変えることを推奨します。バナーは短時間で視認されることが前提のため視認性を優先し、フォントは太めのウェイトを使います。資料は複数ページを読み進めることが前提のため可読性を優先し、本文は細めのウェイトで行間を広めに設定します。
Q： スマートフォンでの表示確認は必須ですか?
A： フリーランスが受注するWebページ・バナー・SNS素材では必須です。PC上で適切に見えていても、スマートフォンでは文字が小さすぎて判別できないケースが起きます。制作ツール上のプレビューではなく、実機で確認してください。
確認事項
Q1からQ4をすべて確認した。Result Bに該当した場合、コントラストチェッカーにアクセスした。結果に応じた改善事項を次回制作時のメモに記録した。
タイポグラフィは7つの仕組みで実務改善
ハック1: 制作前の5項目整理で修正回数を削減
【対象】: バナー・LP・資料など文字主体の案件を受注するフリーランス全般
【手順】: クライアントから受け取ったブリーフまたはヒアリングシートに「媒体」「目的」「ターゲット読者」「ブランドイメージ」「競合デザインの参考例」の5項目を書き出します（所要時間10分）。5項目をもとに「見出しフォントの方向性（装飾的/機能的）」「本文フォントの優先基準（可読性重視）」「情報の階層数（見出し・本文・注釈の何段階か）」を決定します（10分）。決定した方針を制作ツールのスタイルガイドまたはノートに記録し、制作中の判断基準として参照します（5分）。
【コツと理由】: 「制作前に文字の役割と方向性を言語化しておく」方が修正コストが下がります。修正の多くは「思ったイメージと違う」という曖昧な理由から発生します。その原因は制作者とクライアントの間で「どんな印象を与えるべきか」の共通認識がないことです。この共通認識を制作前に作ることで、修正の原因そのものを減らせます。
【注意点】: 5項目の整理に完璧を求める必要はありません。クライアントが参考例を持っていない段階での「ブランドイメージ」の深掘りは時間を消費するだけになりやすいため、「温かみか洗練か」などの二択で確認する程度にとどめることを推奨します。
ハック2: 2書体ルールで視覚的まとまりを確保
【対象】: フォント選びで迷い、複数の書体を使ってしまうフリーランス
【手順】: 制作物の文字要素を「見出し用」「本文用」の2カテゴリに分類します（3分）。見出し用に装飾性の高い書体（太めのゴシック体や個性的なサンセリフ体）、本文用に可読性の高い書体（標準ウェイトの明朝体またはサンセリフ体）を1種類ずつ選びます（10分）。情報の優先順位はサイズ・ウェイト・色の3要素で表現し、書体の追加で解決しない方針を維持します（制作全体を通して）。
【コツと理由】: 2書体以内の制約の中でウェイトと色を使い分けた方が、統一感と情報の優先順位が両立します。書体の混在は「視覚的なノイズ」として処理負荷を上げます。読み手は内容の理解に認知資源を使うべきであり、書体の判別に資源を使わせると情報の伝達効率が下がります。日本語フォントの選び方と商用利用の判定基準を事前に整理しておくと、案件ごとの判断が速くなります。
【注意点】: ブランドガイドラインで指定書体が複数ある場合はクライアント指定を優先してください。フォントをゼロから追加する場合の対処であり、既存ガイドラインの上書きとして使う必要はありません。
ハック3: 行間1.5倍ルールで本文の読み疲れを防止
【対象】: LP・資料・ブログ記事など長文テキストを扱う案件のフリーランス
【手順】: 制作ツール（Figma・Illustrator・InDesign等）で本文テキストブロックを選択し、現在の行間設定値を確認します（2分）。行間を文字サイズの1.5倍から2倍の範囲内に設定します（16pxのフォントサイズなら24pxから32pxの行間）（3分）。実際に5行以上のテキストを入力して表示し、窮屈さや間延び感がないかを目視で確認します。確認は画面表示だけでなくPDF出力やブラウザプレビューでも行います（5分）。
【コツと理由】: 「文字サイズの1.5倍を起点に、行長に応じて調整する」方が再現性が上がります。1行が長いほど次の行頭を探す視線移動の距離が長くなり、行間が狭いと行を飛ばしやすくなります。長文でも読み疲れない設計が直帰率の低下やコンバージョン率の向上につながり、クライアントの成果に直接影響します。
【注意点】: 行間を広げすぎると、文章の塊としての一体感が失われ「まとまりがない」という印象を与えます。2倍を超える設定は特殊な演出意図がある場合を除き避けてください。
ハック4: コントラスト比4.5:1チェックで修正対応コストを削減
【対象】: Webサイトやバナーなどデジタルメディアのデザインをするフリーランス
【手順】: 制作物の主な文字色と背景色のカラーコード（16進数）を確認します（2分）。Adobe ColorのコントラストチェッカーまたはWebAIMのコントラストチェッカーにカラーコードを入力し、コントラスト比を計測します（3分）。通常テキストで4.5:1以上、大きい文字（18pt以上または14pt以上の太字）で3:1以上を確認し、基準を下回る場合は文字色または背景色を調整します（5分）。
【コツと理由】: WCAGの数値基準を確認することで、クライアントからのアクセシビリティ指摘に客観的な数値で対応できます。視覚的な「見やすさ」は制作者の主観に左右されやすく、数値基準があることで関係者間の合意形成が速くなります。公共性の高い案件や企業サイトでは納品後にアクセシビリティ対応を求められるケースが増えており、納品前の確認が後工程の修正コストを削減します。
【注意点】: コントラスト比の確認は通常テキストと大きい文字で基準値が異なります。WCAGへの準拠は案件の要件に応じて判断してください。
ハック5: フォントライセンス記録で法的リスクを事前排除
【対象】: 有料・無料フォントを案件で使用し、クライアントに納品するフリーランス全般
【手順】: 案件で使用するフォントのライセンスページ（配布サイトの利用規約またはフォントファイルに同梱されたLICENSEファイル）を確認し、「商用利用可否」「改変可否」「ファイルへの埋め込み可否」「再配布可否」の4項目を確認します（10分）。確認した情報を案件管理ファイル（NotionやGoogleスプレッドシート等）にフォント名・ライセンス種別・確認URL・確認日付の形式で記録します（5分）。納品時に「使用フォント一覧と商用利用の確認状況」をクライアントへの引き継ぎ資料に含めます（5分）。
【コツと理由】: 「無料フォントは何にでも使える」という判断基準では、「個人利用無料・商用有料」「ロゴへの使用不可」「Webフォントとしての使用は別ライセンス」といった条件を見落とすリスクがあります。フォントの利用条件は配布サイトの更新でまれに変更されることがあり、記録があれば確認した時点の条件を証明できます。フォントの商用利用チェックリストを活用することで、判定作業を5分以内に完結させられます。企業クライアントへの納品物でライセンス違反が発生した場合、制作者としての責任問題になりえます。
【注意点】: ライセンス確認は制作前に行うことが原則です。納品後に使用フォントが商用不可だと判明した場合、フォントの差し替えと再納品が必要になり、工数が大幅に増えます。「よく使っているフォントだから問題ないはず」という思い込みで確認を省くことは、最もリスクの高い行動です。
ハック6: スマートフォン実機確認で修正依頼を事前防止
【対象】: WebページやLP・SNS素材など、モバイルで閲覧される制作物を扱うフリーランス
【手順】: 制作ツールのモバイルプレビューで文字サイズと行間の見え方を確認します（3分）。実際のスマートフォンでURLを開くかファイルを転送し、実機で文字の判別しやすさ・ボタンのタップしやすさを確認します（5分）。確認結果をもとに本文の最小フォントサイズが14px以上（推奨16px以上）になっているかを修正します（5分）。
【コツと理由】: ツールのプレビューは端末の実際の画面密度・フォントレンダリング・バッテリー節約モードによる表示差を再現しきれません。モバイル閲覧比率が高い案件では、PC上での確認だけで納品した場合に「スマホで見たら文字が読めない」という修正依頼が発生するリスクがあります。
【注意点】: 実機確認は1機種だけでは不十分です。iOSとAndroidで同じフォントの見え方が異なる場合があるため、可能であれば両OS系統での確認を推奨します。すべての端末に対応することを追求しすぎて制作が止まる必要はなく、主要ターゲットの閲覧環境を基準に判断してください。
ハック7: 視線誘導設計の言語化でクライアント提案を差別化
【対象】: クライアントへの提案で文字組みの意図を説明する必要があるフリーランス
【手順】: 制作物で「最初に見てほしい情報」「次に読んでほしい情報」「最終的に行動させたい内容」の3段階を定義します（5分）。見出しサイズ・ウェイト・色の設定が3段階の優先順位と一致しているかを確認し、ズレがあれば修正します（10分）。提案資料またはフィードバック時に「この見出しは〇秒以内に視認されることを目的に、コントラストとサイズを設定しています」という形で意図を一文で言語化します（5分）。フリーランスの提案書作成の精度を高めるうえでも、文字設計の意図を事前に整理する習慣が役立ちます。
【コツと理由】: 「視線の流れを設計することを目指す」方が、クライアントへの説明が具体的になり、修正の議論が「好み」から「目的への適合性」に変わります。クライアントが「何となく気になる」という修正要望を出しやすいのは、制作意図が共有されていないからです。修正の判断基準が「制作者の説明」に移ることで、根拠のない修正依頼が減り、実質的な作業工数が削減されます。
【注意点】: 提案の言語化は詳細すぎると逆に伝わりにくくなります。「視線誘導」「コントラスト」「優先順位」の3ワード程度に絞り、技術用語を減らした一文で説明することが実務では有効です。
CHECK
▶ 今すぐやること: 手元の直近案件で「制作前に5項目を整理したか」を確認し、次の案件では実施する（10分）
Q: フォントのライセンス確認はどこでできますか?
A： 使用フォントの配布サイトの利用規約ページが最初の確認先です。Google Fontsは各フォントのページに適用ライセンス（主にSIL Open Font License）が記載されています。Adobe Fontsはアクティブなプランでの商用利用条件が利用規約に記載されています。フォントファイルに同梱されたLICENSEまたはREADMEファイルも確認してください。
Q： 無料フォントは商用案件に使えますか?
A： 無料フォントであっても商用利用条件はフォントごとに異なります。「個人利用無料・商用有料」「ロゴ使用不可」「Webフォントとしての使用は別ライセンスが必要」といった条件が存在するため、ライセンスページを必ず確認してください。
要点整理
制作前に5項目（媒体・目的・ターゲット・ブランドイメージ・参考例）を整理した。使用フォントのライセンス（商用利用可否・埋め込み可否）を確認した。コントラスト比が通常テキストで4.5:1以上であることを計測した。スマートフォン実機で本文が14px以上で判別できることを確認した。視線誘導の意図を一文で言語化し、提案資料に記載した。
事務作業に時間を取られている方へ
フリーランスの働き方をLINEで受け取る
LINEで無料で届くもの
- 20本Webデザインの無料レッスン
- 全工程Photoshopの解説動画
- 4本限定のPDF・動画
登録1分・情報収集だけでもOK・セミナー参加は自由
タップするとLINEの友だち追加画面が開きます
LINE登録のよくある質問
- お金はかかりますか？
- LINEの登録と、届くレッスン・動画・PDFは無料です。
- どんな連絡が来ますか？
- レッスンや動画のほか、無料セミナーの案内が届きます。参加するかは自由です。
- やめたいときは？
- LINEでブロックすれば、それ以上は届きません。
PR提供: 日本デザインスクール（デザスク）
タイポグラフィは2パターンで媒体別設計
Webデザインのタイポグラフィはpxとvw単位で設計
Webデザインにおける文字設計はピクセル（px）またはビューポート幅（vw）を基本単位とします（バナーデザインをワンランクUPさせる！タイポグラフィの基本｜anagrams.jp）。本文の基準フォントサイズは16pxが多くのブラウザのデフォルト値であり、この値を基準に相対単位（remやem）でサイズを管理することで、ユーザーがブラウザの文字サイズを変更した際にも対応できる設計になります。スマートフォンでの閲覧比率が高い案件では、ビューポート幅に応じてフォントサイズが変化するvwやclamp()関数を使ったレスポンシブな文字設計が有効です。CSSで設定した行間（line-height）は単位なしの数値（例：1.7）で設定すると、フォントサイズが変わっても行間の比率を維持できる設計になります。
印刷物のタイポグラフィはpt単位と禁則処理で設計
印刷物では文字サイズをポイント（pt）で設定します。1ptは約0.353mmで、A4資料の本文は9ptから11pt、見出しは14pt以上が一般的な目安です。印刷物では実際の紙に印刷した状態で確認することが不可欠で、モニター上の表示と印刷後の見た目が異なるため、カラープロファイル（RGBとCMYK）の違いも含めて確認が必要です。日本語の印刷物特有の概念として禁則処理があります。禁則処理は句読点・括弧・拗音などが行頭や行末に来ないようにするルールで、InDesignやIllustratorでは自動設定が可能ですが、設定の確認を怠ると納品物で見た目が崩れることがあります。
動画・スライド資料のタイポグラフィは閲覧距離で設計
動画テロップやプレゼンスライドは、視聴距離が画面から1メートル以上になる場合があるため、本文でも24px（または20pt）以上を基準にするケースが多いです。動画では文字が画面上を動く場合があり、モーションと文字の判別しやすさの兼ね合いを考慮する必要があります。フリーランスが受注する機会の多いYouTubeサムネイルやSNS用縦型動画では、テキストの面積が小さいため視認性を最優先に、コントラスト比の高い配色と太いウェイトの書体を選ぶことが実務上の判断基準になります。プレゼン資料のフォント選びでも、媒体ごとの視認性設計は共通の考え方です。
「タイポグラフィは文字の体裁を整えること、という意味と、文字をデザイン要素として扱うこと、という意味がある」という整理がされています（タイポグラフィの学習記録｜note）。
この整理はフリーランスにとって実践的な示唆を含んでいます。「体裁を整える」は可読性向上の機能的側面で、ほぼすべての案件で必要です。「デザイン要素として扱う」はブランド表現や芸術的制作物での表現的側面で、案件の性質に応じて求められます。2つの側面を意識することで、どの案件でどちらの判断軸を優先するかが明確になります。
CHECK
▶ 今すぐやること: 次に受注予定の案件が紙・Web・動画のどの媒体かを確認し、本記事の該当設計パターンを参照する（5分）
Q: Webと印刷で同じデータを使い回せますか?
A： 基本的には使い回しを推奨しません。Webはピクセル・RGBカラー・モニター解像度（72〜96dpi）が基準で、印刷はポイント・CMYKカラー・高解像度（350dpi以上）が基準です。デザインデータを流用する場合は、フォントサイズの単位変換とカラーモードの変換を確認した上で行ってください。
Q： 日本語と英語が混在する場合の文字設計はどうすればよいですか?
A： 日本語フォントと英字フォントでは文字の高さ（字面）が異なるため、混在する場合は両フォントが視覚的に揃って見えるよう個別にサイズやベースラインを調整してください。本文中では日本語フォントに英字が含まれているものを使うか、英字部分だけ別フォントをOpenTypeの合成フォント機能で設定する方法が実務では一般的です。
ポイント
受注案件の媒体（Web・紙・動画）を制作前に確認した。Webの行間はline-heightを単位なし数値で設定した。印刷物は禁則処理の設定を確認した上で入稿した。
タイポグラフィ案件の実例を2パターンで比較
実際の案件でタイポグラフィの判断がどのように影響するかを、成功パターンと失敗パターンで確認します。
ケース1（成功パターン）: 制作前の方針整理で修正ゼロ納品
フリーランスのWebデザイナーが、飲食店向けLPの案件を受注しました。制作開始前に「ターゲットは30代女性、温かみのある印象、スマートフォン閲覧が主」という方針をクライアントと確認し、明朝体の見出しフォント・ゴシック体の本文フォントの2書体を選定、行間を1.8倍に設定した設計書を制作前に共有しました。クライアントから「イメージ通り」の回答を得て制作を開始し、修正は誤字脱字のみで初稿承認を得ることができました。
「目的に合わせて書体を選び、読み手が理解しやすいよう効果的に組む技術がタイポグラフィ」という視点で実務に取り組んでいる例が報告されています（タイポグラフィをデザイン初心者向けに解説｜note）。
制作前の方針整理を省いて感覚でフォントを選んでいれば、「なんか違う」という修正依頼が発生し、フォント変更・カラー変更・レイアウト修正の連鎖が起きた可能性があります。
ケース2（失敗パターン）: ライセンス未確認フォント使用による再納品
フリーランスのグラフィックデザイナーが、企業パンフレット案件でフリーフォントサイトからダウンロードした書体を使用しました。納品後にクライアントから「フォントのライセンス確認書類を提出してほしい」という連絡が来た際、ライセンスページを確認すると「商用印刷物への使用は別途ライセンス購入が必要」という条件を見落としていたことが判明しました。フォントの差し替えと再入稿の工数が追加で発生し、納品から3日後に修正対応が完了しました。著作権に関するトラブルは、使用前の確認で大半を防ぐことができます。
「フォントには商用利用の条件があり、利用規約を確認してから使うことが大切」といった経験談が報告されています（タイポグラフィの学習記録｜note）。
制作前にライセンスを確認し、商用利用可能なフォント（Google FontsのSIL Open Font License等）を選んでいれば、再納品の工数は発生しませんでした。
CHECK
▶ 今すぐやること: 現在使用中のフォントのライセンスページを1つ開いて商用利用条件を確認する（5分）
Q: ケース1のように設計書を共有する習慣はどう作りますか?
A： まず提案時のヒアリングシートに「フォント方針」「カラー方針」「行間設定値」の3項目を追加することから始めてください。初回案件では1ページのシンプルなドキュメントで十分で、継続することで自分の設計パターンのテンプレートになります。
Q： フォントライセンスの確認はどの時点で行うべきですか?
A： 制作開始前が原則です。使用候補のフォントをリストアップした段階でライセンスを確認し、商用利用に問題があれば代替フォントを探す工程を制作前に完了させてください。
覚えておくこと
ケース1では制作前の方針整理が修正ゼロ納品につながった。ケース2ではライセンス未確認が再納品工数の発生につながった。次回の案件では制作前にライセンスと方針整理の両方を完了させる。
タイポグラフィは5項目チェックで納品品質を確保
チェック1: 情報階層の確認
見出し・本文・注釈の3段階でサイズとウェイトに明確な差がついているかを確認します。見出しが本文の1.5倍以上のサイズになっているか、ウェイト（太さ）で優先順位が伝わるかを目視で確認してください。
チェック2: 行間と行長のバランス確認
本文テキストの行間が文字サイズの1.5倍以上になっているかを確認します。1行あたりの文字数が日本語で40文字以上になっている場合はテキスト幅を狭めることを検討してください。
チェック3: コントラスト比の確認
主要テキストの文字色と背景色のコントラスト比が4.5:1以上であることをコントラストチェッカーで確認します。装飾的テキストでも3:1を下回らないことが目安です。
チェック4: フォントライセンスの確認
案件で使用したすべてのフォントについて「商用利用可否」「埋め込み可否」「再配布可否」を確認し、記録が案件ファイルに残っているかを確認します。
チェック5: 実機表示の確認
Webや動画素材の場合、スマートフォン実機で本文テキストが14px以上で判別できるかを確認します。PDFや印刷物の場合はプリントアウトで確認し、禁則処理（句読点の行頭回避等）が適用されているかを確認してください。
CHECK
▶ 今すぐやること: 上記5項目をノートやチェックシートにコピーし、次回納品前に使う準備をする（5分）
Q: 5項目すべてをすべての案件でチェックする必要がありますか?
A： 媒体と案件の性質に応じて省略可能な項目があります。SNSのアイコン画像のみの案件ではライセンス記録の優先度は低く、紙媒体のみの案件では実機表示確認は不要です。5項目を基準にして案件ごとに適用範囲を判断してください。
Q： 禁則処理の設定はどのツールでできますか?
A： InDesignとIllustratorでは「文字組みアキ量設定」と「禁則セット」から設定できます。Figmaは禁則処理の自動設定機能が限定的なため、長文を扱う際はInDesignまたはIllustratorの使用を推奨します。
チェック完了基準
チェック1〜5を手元の制作物に当てはめて確認した。コントラスト比をチェッカーで計測した。ライセンス記録が案件ファイルに存在することを確認した。
タイポグラフィは7要素の設計技法：今日から始める実践ステップ
タイポグラフィは一度に習得するものではなく、案件ごとに7要素を意識し続けることで精度が上がります。今日できる最初の一歩として、直近の納品物でこの記事の5項目チェックリストを確認してください。
| 状況 | 次の一歩 | 所要時間 |
| 案件を今受注中 | 制作前の5項目整理（ハック1）を実施する | 25分 |
| 納品直前 | 5項目チェックリストを確認する | 20分 |
| 次の提案に備えたい | 視線誘導の言語化テンプレートを作る | 30分 |
| フォント管理を整えたい | ライセンス記録シートをNotionで作成する | 20分 |
タイポグラフィとはに関するよくある質問
Q: タイポグラフィの勉強はどこから始めればよいですか?
A： まず手元の制作物で「見出し・本文・注釈の3階層が視覚的に区別できているか」を確認することから始めるのが最も実践的です。書籍としてはタイポグラフィ・デザイン系の入門書を1冊読み、その後実際の案件で意識しながら設定値を記録することで定着します。Webデザインの場合はGoogleのMaterial Designガイドラインのタイポグラフィ項目も参考になります。
Q： タイポグラフィとカリグラフィの違いは何ですか?
A： カリグラフィは美しい手書き文字を書く技法で、筆記具と手の動きで文字を表現します。タイポグラフィは既存の書体・フォントを用いて文字の配置・サイズ・間隔を設計する技法です。カリグラフィで作成した文字をロゴやデザイン素材として取り込み、タイポグラフィの知識でレイアウトに配置するという組み合わせが実務では行われます。
Q： フリーランスがタイポグラフィの知識をポートフォリオに活かす方法は?
A： ポートフォリオに掲載する制作物に「フォント選定の理由」「行間・字間の設定値と根拠」を短文で添えることが有効です。「なんとなく整っている」ではなく「コントラスト比4.5:1以上を確認済み」「本文行間1.7倍で設計」といった具体的な記述が、クライアントからの信頼と差別化につながります。ポートフォリオの作り方では、制作意図の言語化が案件獲得率を高める重要な要素として紹介されています。
【出典・参照元】
タイポグラフィ – Wikipedia – タイポグラフィの定義・歴史・構成要素
タイポグラフィとは｜designpartner.jp – 現代的なタイポグラフィの意味と考え方
タイポグラフィとデザインの基本｜reiro.co.jp – フォントとタイポグラフィの違い・構成要素
バナーデザインをワンランクUPさせる！タイポグラフィの基本｜anagrams.jp – Webデザイン・バナーでの応用
Webデザイン入門編1:タイポグラフィ｜paiza.jp – カーニング・Webデザインでの実務用語
タイポグラフィをデザイン初心者向けに解説｜note – 実務・学習上の体験記
タイポグラフィの学習記録｜note – タイポグラフィの2つの意味の整理
WCAG 2.1 Success Criterion 1.4.3 Contrast (Minimum)｜W3C – コントラスト比基準の出典