7. フォントとタイポグラフィ

7.1 CSS でのフォント指定

7.1.1 フォントファミリの指定

CSS では、font-familyプロパティを使用してフォントを指定します。安全なフォントファミリを指定する方法は以下の通りです。

body {
  font-family: "Arial", "Helvetica", sans-serif;
}

これにより、まず「Arial」が指定され、その後に「Helvetica」が選ばれます。最終的には、sans-serifが指定されるので、どれかのフォントが使用されます。

7.1.2 ウェブフォントの使用

Google Fonts などの外部ウェブフォントを使用する方法もあります。以下の例では、Google Fonts から「Roboto」を使用します。

まず、Google Fonts から必要なフォントを選び、そのリンクをコピーします。
そのリンクを HTML の<head>タグ内に追加します。

<head>
  <link
    href="https://fonts.googleapis.com/css2?family=Roboto&display=swap"
    rel="stylesheet"
  />
</head>

CSS でフォントを指定します。

body {
  font-family: "Roboto", sans-serif;
}

7.2 フォントの詳細設定

7.2.1 フォントサイズの指定

font-sizeプロパティを使用してフォントサイズを指定できます。

p {
  font-size: 16px;
}

また、相対単位で指定することも可能です。

h1 {
  font-size: 2em; /* 2倍のサイズ */
}

7.2.2 フォントスタイルの指定

font-styleプロパティでイタリック体などのスタイルを適用できます。

em {
  font-style: italic;
}

7.2.3 フォントウェイトの指定

font-weightプロパティで太さを指定できます。

strong {
  font-weight: bold;
}

/* 数値でも指定可能 */
p {
  font-weight: 700;
}

7.3 タイポグラフィに関するプロパティ

7.3.1 行間の調整

line-heightプロパティを使用して行間を調整します。行間の調整は読みやすさに大きく影響します。

p {
  line-height: 1.6;
}

7.3.2 文字間の調整

letter-spacingプロパティを使用して文字間を調整します。

h1 {
  letter-spacing: 2px;
}

7.3.3 ワードスペーシングの調整

word-spacingプロパティを使用して単語間のスペーシングを調整します。

p {
  word-spacing: 0.5em;
}

7.4 実践的な実例

7.4.1 基本的なタイポグラフィの設定

以下に、基本的なタイポグラフィの設定例を示します。

body {
  font-family: "Roboto", sans-serif;
  line-height: 1.6;
  letter-spacing: 0.5px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-bottom: 0.5em;
  font-weight: 700;
}

p {
  margin-bottom: 1em;
}

この例では、全体的なフォントファミリ、行間、文字間を設定し、見出しや段落の余白も調整しています。これを基に、さらにスタイルをカスタマイズしてみてください。

7.5 まとめ

フォントとタイポグラフィの設定は、ウェブサイトのデザインとユーザビリティに大きな影響を与えます。ここで紹介した基本的なプロパティを理解し、適切に使用することで、読みやすく、美しいウェブページを作成することができます。実際にコーディングしながら、様々な設定を試してみることで、自分のスキルを高めてください。