CSS フォント属性

JPKODA 編集部 May 6, 2026

フォントは、テキストを視覚的に表現する形式です。適切なフォントを選択することは、ウェブサイトの可読性、トーン、そして全体的な美感に大きな影響を与えます。場面に合わせて適切な服装を選ぶのと同じように、適切なフォントを選ぶことは、意図したメッセージを伝え、ユーザー体験（UX）を向上させるのに役立ちます。

この章では、フォントの外観を制御する4つの基本的なCSSプロパティ、font-family（フォントファミリー）、font-size（フォントサイズ）、font-weight（フォントの太さ）、font-style（フォントスタイル）について解説します。これらのプロパティをマスターすることで、ウェブページ上で視覚的に魅力的で、引き込まれるようなタイポグラフィを作成する能力が身につきます。

1. フォントファミリーを指定する (font-family)

font-family プロパティは、要素内のテキストに使用するフォント（文字、数字、記号のデザイン）を指定します。これは、ウェブサイトのスタイルやトーンに合わせて多様なフォントから選択できるようにする基本的なプロパティです。

1.1 フォントスタック (Font Stacks)

font-family の値は単一のフォント名だけでなく、「フォントスタック」と呼ばれるカンマで区切られたフォントのリストを指定します。ブラウザはリストの最初のフォントから順に使用を試みます。もしユーザーのシステムにそのフォントがなければ、2番目のフォントに移り、それ以降も同様に続けます。適切なフォントスタックを提供することは、たとえ第一希望のフォントが利用できなくても、テキストを許容範囲内の見た目で表示させるために不可欠です。

なぜフォントスタックを使用するのか？ ユーザーは異なるOS（オペレーティングシステム）を使用しており、PCにインストールされているフォントも異なります。フォントスタックは、特定のユーザーがあなたの選んだフォントを持っていなくても、サイトのデザインが崩れないようにするための保険です。

1.2 総称フォントファミリー (Generic Font Families)

フォントスタックの最後には、必ず「総称フォントファミリー」を含めるべきです。これはフォントスタイルの広範なカテゴリーであり、すべてのシステムで利用可能であることが保証されています。指定したフォントが見つからない場合の最終的なフォールバック（代替）として機能します。

主な総称フォントファミリー：

serif (セリフ)： 文字の端に小さな装飾線（ひげ）があるフォント。例：Times New Roman, MS 明朝。
sans-serif (サンセリフ)： 装飾線がなく、すっきりと現代的なフォント。例：Arial, Helvetica, メイリオ。
monospace (等幅)： すべての文字が同じ幅を持つフォント。例：Courier New, Consolas。主にコードスニペットに使用されます。
cursive (筆記体)： 手書きを模したフォント。例：Brush Script MT。
fantasy (ファンタジー)： 非常に装飾的なデザインフォント。例：Impact。

1.3 font-family の例

body {
  font-family: "Arial", "Helvetica", sans-serif; /* 最も一般的なサンセリフ体 */
}

h1 {
  font-family: "Georgia", "Times New Roman", serif; /* クラシックなセリフ体 */
}

code {
  font-family: "Courier New", monospace; /* コードスニペット用 */
}

.fancy-heading {
  font-family: "Brush Script MT", cursive; /* 使用には注意が必要！ */
}

解析：

最初の例では、ブラウザはまず Arial を試します。なければ Helvetica、それもなければデフォルトの sans-serif を使用します。
2番目の例は、Georgia を優先し、なければ Times New Roman、最終的に serif にフォールバックします。
3番目の例は、コード表示に適した等幅フォントを指定しています。

1.4 Web フォントの使用

総称フォントやシステムフォントだけでは、デザインに限界があるかもしれません。Google Fonts などの Web フォントを使用すると、ユーザーのシステムにインストールされていないカスタムフォントを利用できます。これらのフォントはサイト訪問時にサーバーからダウンロードされるため、異なるデバイスやOS間でも一貫したタイポグラフィ体験を提供できます。

1.5 font-family のベストプラクティス

可読性を優先する： 特に本文には、読みやすいフォントを選んでください。
ブランドを考慮する： ブランドの個性やスタイルを反映するフォントを選択します。
フォントの数を制限する： 多すぎるフォントはサイトを雑然とさせ、不正確な印象を与えます。最大でも2〜3種類に留めましょう。
フォールバックを提供する： 必ず総称フォントファミリーをスタックの最後に含めてください。

2. フォントサイズを制御する (font-size)

font-size プロパティはテキストの大きさを決定します。これは可読性と視覚的階層（ビジュアルヒエラルキー）において極めて重要な役割を果たします。通常、大きなフォントは見出しに、小さなフォントは本文やキャプションに使用されます。

2.1 絶対単位 vs. 相対単位

フォントサイズは、絶対単位または相対単位で指定できます。

絶対単位 (Absolute Units):

px (ピクセル)： ピクセル単位で指定。サイズを正確に制御できます。
pt (ポイント)： 伝統的に印刷メディアで使用。1pt は約 1/72 インチです。

相対単位 (Relative Units):

em： 親要素のフォントサイズに対する相対値。親が 16px なら、1em = 16px です。
rem： ルート要素（<html> 要素）のフォントサイズに対する相対値。サイト全体で一貫性を保ちやすくなります。
%：親要素のフォントサイズに対する割合。100% = 1em です。

なぜ相対単位が好まれるのか？rem や em のような相対単位は、柔軟で拡張可能な設計を可能にするため、絶対単位（px）よりも推奨されます。これは、レイアウトを異なる画面サイズに適応させる必要があるレスポンシブウェブデザインにおいて特に重要です。また、ユーザーがブラウザ設定でデフォルトのフォントサイズを変更した場合、サイトのテキストもそれに応じてスケーリングされるため、アクセシビリティも向上します。

2.2 font-size の例

body {
  font-size: 16px; /* ベースのフォントサイズ */
}

h1 {
  font-size: 2.5em; /* ベースサイズの2.5倍 (40px) */
}

p {
  font-size: 1rem; /* ルートサイズと同じ (16px) */
}

small {
  font-size: 0.8em; /* 親要素のサイズの80% */
}

2.3 キーワードの使用

CSSにはフォントサイズを指定するキーワードも用意されています：
xx-small, x-small, small, medium (デフォルト), large, x-large, xx-large, smaller, larger
これらは便利ですが、em や rem に比べると精密な制御には向きません。

2.4 font-size のベストプラクティス

基準となるサイズを確立する： body 要素にベースサイズを設定し、他の要素には rem や em を使用します。
モジュラースケールを使用する： 数学的に関連付けられた一連のサイズセットを使用することで、調和の取れた一貫性のある階層構造を作成できます。
可読性をテストする： さまざまなデバイスでサイトを確認し、サイズが適切であることを確認してください。

3. フォントの太さを調整する (font-weight)

font-weight プロパティは、テキストの太さ（黒さ）を制御します。特定の単語を強調したり、異なる要素間で視覚的なコントラストを作ったりすることができます。

3.1 font-weight の値

normal： デフォルトの太さ。通常は 400 に相当。
bold： 太字。通常は 700 に相当。
lighter： 親要素よりも細くする。
bolder： 親要素よりも太くする。
数値： 100, 200, ..., 900。数値が大きいほど太くなります。

注意： すべてのフォントがすべての太さ（100〜900）をサポートしているわけではありません。利用可能な太さは、使用している特定のフォントファミリーに依存します。

3.2 font-weight の例

h1 {
  font-weight: bold; /* 太字の見出し */
}

p {
  font-weight: normal; /* 通常の段落テキスト */
}

.emphasized {
  font-weight: 600; /* 通常より少し太め */
}

3.3 font-weight のベストプラクティス

適度に使用する： 太字を多用しすぎると、読者に圧迫感を与えたり、視覚的な疲労を招いたりします。
視覚的階層を構築する： 太さを変えることで、読者の視線を重要な情報へと誘導します。

4. フォントスタイルを適用する (font-style)

font-style プロパティはフォントのスタイルの変化を制御し、主にテキストを斜体（イタリック）にするために使用されます。

4.1 font-style の値

normal：デフォルトの状態。直立したスタイルです。
italic：イタリック体（斜体）で表示します。
oblique：斜体。ブラウザがアルゴリズムによってテキストを傾けます（専用のイタリックデザインがない場合に有効）。

Italic と Oblique の違い：italic はそのフォント専用にデザインされた斜体バージョンを指し、oblique は通常のフォントを単に傾けたバージョンです。専用のデザインがない場合、ブラウザは通常 oblique を後備（フォールバック）として使用します。

4.2 font-style の例

em {
  font-style: italic; /* 強調テキストをイタリックにする */
}

.quote {
  font-style: oblique; /* 引用に傾斜スタイルを使用 */
}

p {
  font-style: normal; /* 継承されたスタイルをリセット */
}

4.3 font-style のベストプラクティス

強調に使用する： 特定の単語やフレーズを強調するために斜体を使います。
可読性を考慮する： 長文に斜体を使用するのは避けてください。読みにくくなる原因になります。
セマンティックな要素を使用する： 意味的な強調には <em> タグを使い、スタイルのみが必要な場合は <i> タグを検討しましょう。その上で、font-style プロパティを適用します。