CSSのfont-weightとは？使い方を解説

この記事では、font-weightの基本的な使い方といくつかの便利なテクニックについて説明します。

font-weightとは？

font-weightプロパティは、テキストの太さを指定するために使用されます。

このプロパティは、キーワードまたは数値で指定することができます。
キーワードの例としては、"normal"（標準の太さ）、"bold"（太字）、"lighter"（より薄い）などがあります。数値は100から900の範囲内で指定し、100が最も薄く、900が最も太いことを意味します。

font-weightを指定するには、以下のいくつかの方法があります。

font-weightプロパティにキーワードを指定することで、テキストの太さを制御できます。

例えば、次のように記述します。

p {
  font-weight: bold;
}

数値を使用することもできます。

この場合、100から900の範囲内の数値を指定します。例えば、次のように記述します。

p {
  font-weight: 600;
}

font-weightの値によって、テキストの視覚的な太さが変化します。

値が増加するほど、テキストは太くなります。

しかし、全体的なフォントファミリーに依存するため、すべてのフォントで同じように見えるわけではありません。
また、一部のフォントでは特定のfont-weightの値がサポートされていない場合もあります。
したがって、実際の表示結果はブラウザや環境によって異なる場合があります。

適切なfont-weightの選択は、ウェブデザインの視覚的な表現に重要な影響を与えます。

一般的には、以下のガイドラインに従って選択することが推奨されます。

通常の本文テキストは、font-weight:normalを使用することが一般的です。これはデフォルトの値であり、標準の太さを持ったテキストを表示します。

強調や見出しといった目立たせたいテキストには、font-weight:boldを使用することが一般的です。これにより、テキストが太く表示されます。

テキストの中間的な太さを表現する場合、font-weight:500やfont-weight:600などの数値を使用することができます。これは、通常のテキストよりも太く、太字ほどではないテキストを表示します。

レスポンシブなデザインでは、フォントサイズとともにfont-weightを調整することで、異なるデバイスや画面サイズでのテキストの可読性を向上させることができます。例えば、モバイルデバイスではfont-weightを軽くし、デスクトップでは太くするなどの調整が可能です。

font-weightプロパティには、便利なテクニックや特殊な値も存在します。

lighterキーワードを使用すると、親要素よりも薄いテキストを表示できます。同様に、darkerキーワードを使用すると、親要素よりも濃いテキストを表示できます。

bolderキーワードを使用すると、テキストをさらに太くすることができます。逆に、lighterキーワードを使用すると、テキストをさらに薄くすることができます。

font-weightプロパティに数値を指定する際に、相対的な指定も可能です。例えば、font-weight: lighter; font-weight: bold; のように指定すると、現在のfont-weightの値から相対的に薄くしたり太くしたりすることができます。

複数のフォントスタイルを組み合わせて使用することもできます。例えば、font-weight: bold; font-style: italic; のように指定すると、太字かつイタリックのテキストが表示されます。

font-weightプロパティは、カスタムフォントの利用時にも役立ちます。独自のフォントを使用する場合でも、適切なfont-weightの指定によってテキストを適切にスタイリングできます。

CSSのfont-weightプロパティは、テキストの太さを制御するための重要なプロパティです。

キーワードや数値を使用して太さを指定することで、テキストの視覚的な表現をカスタマイズすることができます。

適切なfont-weightの選択は、ウェブデザインの見た目や読みやすさに大きな影響を与えます。

さまざまなテクニックや組み合わせを活用して、魅力的なテキストスタイルを作成してみましょう。