フォントの基本: サイズ、ファミリー、スタイル、ウェイトを理解しよう

ウェブデザインにおいて、フォントは非常に重要な役割を果たします。フォントのサイズやスタイルを調整することで、ウェブページの見た目や印象を大きく変えることができます。今回は、フォントの基本について学んでいきましょう。

フォントサイズの指定方法

フォントサイズは、CSSのfont-sizeプロパティを使って指定します。単位はピクセル(px)、パーセント(%)、相対単位(em, rem)などが使えます。例えば、以下のように指定することができます。

<style>
  p {
    font-size: 16px;
  }
</style>

フォントファミリーの選択と指定方法

フォントファミリーは、CSSのfont-familyプロパティを使って指定します。一般的なフォントファミリーには、”Arial”, “Helvetica”, “Times New Roman”などがあります。例えば、以下のように指定できます。

<style>
  p {
    font-family: "Arial", sans-serif;
  }
</style>

フォントファミリーの指定では、複数のフォント名をカンマで区切って記述できます。これは、最初に指定したフォントが利用できない場合、次に指定したフォントが使われるためです。

フォントスタイルの指定方法

フォントスタイルは、CSSのfont-styleプロパティを使って指定します。一般的なフォントスタイルは、”normal”（デフォルトのスタイル）、”italic”（イタリック体）、”oblique”（オブリーク体）です。例えば、以下のように指定できます。

<style>
  p {
    font-style: italic;
  }
</style>

フォントウェイトの指定方法

フォントウェイトは、CSSのfont-weightプロパティを使って指定します。一般的なフォントウェイトは、”normal”（デフォルトの太さ）、”bold”（太字）、”lighter”（より細い）、または数値（100から900までの範囲）で表されます。例えば、以下のように指定できます。

<style>
  p {
    font-weight: bold;
  }
</style>

数値を使って指定することで、より細かい太さの調整が可能になります。例えば、font-weight: 300;やfont-weight: 700;といった具合です。

これで、フォントの基本について学ぶことができました。サイズ、ファミリー、スタイル、ウェイトを調整することで、ウェブページの見た目や印象を自由に変えることができます。次のページでは、テキスト装飾や文字間隔、行間隔について学んでいきましょう。