Webデザインにおいて、フォントの太さを適切に設定することは、可読性や視覚的な強調に大きな影響を与えます。本記事では、CSSのfont-weightプロパティの基本から、実践的な使い方までを解説します。
1. font-weightの基本
font-weightプロパティは、フォントの太さを指定するためのCSSプロパティです。以下のような値を指定できます。
キーワード値
font-weightには以下のキーワード値を使用できます。
p {
font-weight: normal; /* 通常の太さ（400と同じ） */
}
strong {
font-weight: bold; /* 太字（700と同じ） */
}normal: 通常の太さ（デフォルト）bold: 太字lighter: 親要素よりも細くbolder: 親要素よりも太く
数値指定
より細かくフォントの太さを指定する場合、100から900の数値で設定できます。
p {
font-weight: 300; /* やや細め */
}
h1 {
font-weight: 900; /* 非常に太い */
}通常、数値が小さいほど細く、大きいほど太くなります。ただし、フォントによってはすべての太さが利用できるわけではありません。
大きさが変わらない時があります。そんなときはこちらをお読みください。
2. font-weightを適切に設定するコツ
可読性を考慮する
テキストが細すぎると読みづらくなり、太すぎると視認性が低下することがあります。本文には400や500を、見出しには700以上を使うのが一般的です。
body {
font-weight: 400;
}
h1, h2 {
font-weight: 700;
}フォントの対応を確認する
フォントによっては、指定したfont-weightが適用されないことがあります。例えば、一部のフォントは400と700しか対応していないことがあります。
p {
font-family: "Arial", sans-serif;
font-weight: 600; /* Arialでは適用されない可能性あり */
}フォントの公式ドキュメントや、Google Fontsのプレビュー機能を利用すると、対応する太さを確認できます。
③ 強調のバランスを取る
重要な要素を強調する際に、boldを多用すると全体が重くなりすぎます。font-weightだけでなく、colorやletter-spacingも活用して、読みやすいデザインを作りましょう。
strong {
font-weight: 600;
color: #ff6600;
}3. まとめ
font-weightを適切に設定することで、可読性やデザインのバランスを最適化できます。数値指定を活用し、フォントの対応状況を確認しながら、読みやすいテキストデザインを目指しましょう！
コメント