Documentation CSS

この記事で学べること

  • font-weightプロパティの概念と目的
  • normal、bold、lighter、bolderなどのキーワード値
  • 100から900までの数値指定方法
  • 可変フォントでの細かい太さ調整
  • レスポンシブデザインでの活用

概要

CSSのfont-weightプロパティは、テキストのフォントの太さ（ウェイト）を設定するために使用されます。適切な太さの設定は、見出しと本文の区別、強調表現、視覚的な階層構造の作成に重要な役割を果たします。本記事では、font-weightプロパティの使い方、指定方法、効果的な活用法について詳しく解説します。

font-weightプロパティの基本

font-weightプロパティは、フォントの太さを指定するためのCSSプロパティです。キーワードまたは数値で太さを指定でき、デザインの意図に合わせたテキスト表現が可能です。

基本構文

selector {
  font-weight: 値;
}

例えば、次のように指定すると、h1要素のテキストが太字になります。

h1 {
  font-weight: bold;
}

キーワード値

  • normal: 標準の太さ（400と同等）
  • bold: 太字（700と同等）
  • lighter: 親要素より細く
  • bolder: 親要素より太く
p {
  font-weight: normal;
}
strong {
  font-weight: bold;
}

数値指定

font-weightは100から900までの数値で指定できます。100刻みで9段階の太さを表現します。

.thin {
  font-weight: 100; /* Thin */
}
.light {
  font-weight: 300; /* Light */
}
.regular {
  font-weight: 400; /* Regular = normal */
}
.medium {
  font-weight: 500; /* Medium */
}
.semibold {
  font-weight: 600; /* Semi Bold */
}
.bold {
  font-weight: 700; /* Bold = bold */
}
.extrabold {
  font-weight: 800; /* Extra Bold */
}
.black {
  font-weight: 900; /* Black */
}

実用的な使い方

見出しの階層表現

異なる太さを使って、見出しの重要度を視覚的に表現できます。

h1 {
  font-weight: 800;
}
h2 {
  font-weight: 700;
}
h3 {
  font-weight: 600;
}
h4 {
  font-weight: 500;
}

強調テキスト

本文中の重要な部分を太字で強調します。

.highlight {
  font-weight: 600;
}

可変フォントでの細かい調整

可変フォントを使用すると、100から900の間で任意の数値を指定できます。

.custom-weight {
  font-weight: 550; /* 可変フォントでのみ有効 */
}

フォントの対応状況

ウェイトのサポート

すべてのフォントが9段階のウェイトをサポートしているわけではありません。指定したウェイトがフォントに存在しない場合、ブラウザは最も近いウェイトで代替します。

Webフォントの読み込み

Google FontsなどのWebフォントを使用する場合、必要なウェイトを明示的に読み込む必要があります。

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

注意点

  1. フォントのウェイト対応 使用するフォントがどのウェイトをサポートしているか確認することが重要です。対応していないウェイトを指定しても期待通りに表示されません。

  2. パフォーマンス Webフォントで多くのウェイトを読み込むと、ページの読み込み速度に影響します。必要なウェイトのみを読み込むようにしましょう。

  3. アクセシビリティ 太すぎる、または細すぎるテキストは可読性が低下します。本文テキストには適度な太さを使用してください。

まとめ

CSSのfont-weightプロパティは、テキストの太さを制御するための重要なプロパティです。キーワード指定と数値指定を使い分けることで、デザインに合わせた柔軟な表現が可能です。フォントの対応状況を確認しながら、視覚的な階層構造と可読性のバランスを取った設計を心がけましょう。

ポイントの振り返り

値説明数値相当
normal標準の太さ400
bold太字700
lighter親より細く相対値
bolder親より太く相対値
100-900数値指定9段階

関連プロパティ

プロパティ説明
font-styleフォントのスタイル
font-variation-settings可変フォントの調整
font-synthesis-weight太字合成の制御

参考文献

円