【CSS基礎】文字サイズと行間を整えよう！font-size/font-weight/line-heightの使い方

「HTMLで書いた文章が、なんだか読みづらい……」
「プロが作ったサイトは、文字の並びが綺麗に見えるのはなぜ？」

Webサイトの印象の8割は「文字で決まる」と言われています。どれだけ素晴らしい内容を書いても、文字が小さすぎたり、行が詰まりすぎていたりすると、読者はすぐにページを閉じてしまいます。

しかし、CSSでfont-size・font-weight・font-heightを使うことで、文字サイズ・太さ・行間を自由に調整できます。

この記事では、CSSで文字のデザインを整えるための最重要プロパティの3つ（font-size/font-weight/line-height）を、初心者の方に向けてわかりやすく解説します。

CSS　font-size：文字の大きさを決めよう
CSS　font-weight：文字の太さで強弱をつけよう
CSS　line-height：読みやすさの鍵「行間」を整える
【実践】コード例と実行結果を確認しよう！
初心者が失敗しやすい「文字装飾」の落とし穴
まとめ：文字を整えて「伝わる」サイトへ

CSS　font-size：文字の大きさを決めよう

まずは基本中の基本、文字の大きさを指定するfont-sizeです。

font-sizeの使い方
CSSで文字サイズを指定する際、最もよく使われる単位はpx（ピクセル）です。

p {
  font-size: 16px; /* 一般的な本文のサイズ */
}

h1 {
  font-size: 32px; /* 大きな見出し */
}

【初心者向け】単位は何を使うべき？
最初はpxで指定することに慣れましょう。ですが、remという単位も覚えておきましょう。

px：サイズを固定で指定する（わかりやすい）
rem：ブラウザの基本サイズに対して「⚪︎倍」と指定する（スマホ対応などで便利）。

最初は「本文は16px前後、見出しは24~32px」を目安に調整してみるのがオススメです。

CSS　font-weight：文字の太さで強弱をつけよう

見出しを目立たせたいときや、文章の一部を強調したいときに使うのがfont-weightです。

font-weightの使い方
指定の仕方は主に2通りあります。

/* キーワードで指定 */
.text-bold {
  font-weight: bold; /* 太字 */
}

/* 数値で指定（100〜900） */
.text-normal {
  font-weight: 400; /* 標準（normalと同じ） */
}

.text-heavy {
  font-weight: 700; /* 太字（boldと同じ） */
}

HTMLの<b>や<strong>との違い
HTMLのタグでも太字にできますが、CSSのfont-weightは「デザインとして太さを変えたい」ときに使います。意味を強調したいときはHTML、見た目を整えたいときはCSS、と使い分けるのが理想的です。

CSS　line-height：読みやすさの鍵「行間」を整える

多くの初心者サイトが「読みづらい」と感じる原因は、実は文字サイズではなく行間（line-height）にあります。

line-height（行間）とは？
文字そのものの高さに加えて、上下にどれだけの余白を持たせるかを決めるプロパティです。

/* 悪い例：行間が詰まっていて読みづらい */
.bad-text {
  line-height: 1.0; 
}

/* 良い例：適度な隙間があってスラスラ読める */
.good-text {
  line-height: 1.7; 
}

おすすめの設定値
line-heightを指定するときは、単位をつけずに「数値だけ」で書くのが基本の書き方です。

1.5〜1.8：本文に最適な、読みやすい行間。
1.2〜1.4：見出しなど、短い文章に適した行間。

行間を少し広げるだけで、驚くほどページ全体の「清潔感」と「読みやすさ」がアップします。

【実践】コード例と実行結果を確認しよう！

それでは、実際にHTMLとCSSを組み合わせて、文字を整えて見ましょう。

HTML

<div class="typography-sample">
  <h2 class="title">Webデザインの基本は文字から</h2>
  <p class="description">
    文字のサイズや太さを調整するだけで、サイトの印象は大きく変わります。
    特に「行間」を意識することで、読者にストレスを与えない、
    心地よいWebサイトを作ることができるようになります。
  </p>
</div>

CSS

.typography-sample {
  padding: 20px;
  background-color: #ffffff;
  border: 1px solid #ddd;
}

.title {
  font-size: 24px;   /* 大きく */
  font-weight: bold; /* 太く */
  line-height: 1.3;  /* 見出しなので少し詰め気味 */
  margin-bottom: 15px;
  color: #333;
}

.description {
  font-size: 16px;   /* 標準的な大きさ */
  font-weight: normal; 
  line-height: 1.8;  /* 本文なのでゆったりと */
  color: #666;
}

実行結果