フォント（Font）とは？
フォントは、文字のデザイン（サイズ・太さ・間隔など）を示す具体的な形式を指す用語で、『Courier 24ポイント 太字』のように特定のスタイルを表します。一方、タイポグラフィの「書体（Typeface）」は、フォントより広い概念で、HelveticaやTimesなどのデザイン群を指します。
フォントと書体の違い
- 書体（Typeface）：全体のデザインファミリー（例：Helvetica）
- フォント（Font）：書体内の具体的なスタイル（例：Helvetica Bold 24pt）
コンピュータフォントの形式と特徴
- ビットマップフォント：ピクセル単位で表現される、サイズ固定のフォント形式。
- アウトラインフォント（ベクター形式）：PostScript / TrueType / OpenTypeなど、サイズを自由に変更しても鮮明に表示可能な形式。
フォントの分類：見た目と用途で選ぼう
| 種類 | 用途 |
|---|---|
| セリフ体（Serif） | 文字の端に飾り（セリフ）があり、紙媒体での可読性に優れる書体。 （例：Times New Roman） |
| サンセリフ体（Sans‑Serif） | 飾りのないすっきりしたデザインで、Webやスマートフォン画面との相性が良い。 （例：Helvetica） |
| スクリプト／手書き風フォント | 装飾性が高く、雰囲気を演出しやすいが長文には不向き 。 |
| ディスプレイフォント | 見出しやロゴに使う装飾的・個性的なフォント。本文には避けたほうが無難。 |
フォントの構成要素（アナトミー）
文字デザインには「セリフ、x‑高さ、ベースライン、ストローク幅、カーニング（文字間調整）」など複数の要素があり、これらの違いによって印象や読みやすさが変わります。
Web におけるフォント活用のポイント
システムフォント vs Webフォント
- システムフォント（デバイスフォント）：端末に標準搭載されるフォントで、読み込みが速い。
- Webフォント：サーバーから読み込むフォントで、どのデバイスでも同じ表示が可能。デザインの統一感やブランド表現に優れるが、読み込み速度やファイルサイズの影響を考慮が必要。
Webフォント活用Tips
- サブセット化：使用する文字のみを含めて軽量化し、アクセス速度を改善。
- 使用数を最小限に：フォントのスタイルやウェイトをたくさん使うとページの読み込みが遅くなり、SEOにも影響。
- 表示速度最適化：
font-display: swapの利用や、<link rel="preload">による優先読み込みなど、パフォーマンス向上策も重要。
まとめ（ポイント振り返り）
| 用語 | 説明 |
|---|---|
| 書体（Typeface） | HelveticaやTimesなどの デザインファミリー |
| フォント（Font） | 書体内の特定のサイズ・スタイル |
| ビットマップ vs アウトライン | 固定ピクセル vs スケーラブル・鮮明表示 |
| セリフ体 / サンセリフ体 | 印象が異なる用途別おすすめフォント |
| Webフォント | デザイン統一に優れるが読み込み速度に注意 |
| サブセット化 / 使用制限 | 軽量化とパフォーマンスの両立に効果的 |
