Webページの印象を大きく左右するのが 文字のデザイン（タイポグラフィ） です。
- 文字サイズ
- 太さ
- 行間
- フォントの種類
これらを正しく使うと、ページの読みやすさが劇的に変わります。
この記事では、CSSで文字をデザインするための
font系プロパティ を初心者向けに丁寧に解説します。
文字の大きさを変える（font-size）
p {
font-size: 16px;
}よく使う単位は以下の2つ。
| 単位 | 説明 |
|---|---|
| px | 画面上のピクセル（最も使われる） |
| rem | ルート（htmlタグ）のfont-size基準 |
例：大きめの見出し
h2 {
font-size: 24px;
}pxとremの使い分けは今は考えなくてもいいと思います。
慣れてきたらどっちのほうがいいのか考えて作っていきましょう！
文字の太さを変える（font-weight）
p {
font-weight: bold;
}または数値でも指定できます。
- 400 → 通常
- 700 → 太字（bold と同じ）
例：
h1 {
font-weight: 700;
}フォントの種類を変える（font-family）
body {
font-family: "Helvetica", "Arial", sans-serif;
}複数のフォントを書くのは、
「使えない場合に次のフォントを使うため」。
一番後ろの serif / sans-serif はフォールバック用です。
ちなみに例のコードは、前に記載しているものから順に使えるフォントを探します。
万が一どれも使えなかった際には最後の「serif / sans-serif 」を使います。
このように、指定したフォントが正常に機能しなかった場合に、代わりとして使用される手段のことを「フォールバック（fallback）」といいます。
フォールバックを設定しておくことで、ユーザーの環境にフォントが存在しない場合でも、デザインが大きく崩れるのを防ぐことができます。
Google Fonts を使う（おしゃれフォントの基本）
Webで最もよく使われる無料フォントサービスです。
① Google Fonts からフォントを選ぶ
② <link> を head に貼る
例：Noto Sans を使う場合
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">こういった設定系はhtmlのheadの中に記載します。
外部CSSもそうでしたね。
③ CSSで指定
body {
font-family: "Noto Sans", sans-serif;
}これだけで一気に“それっぽい”サイトになります。
行間（line-height）で読みやすさが変わる
p {
line-height: 1.6;
}
ポイント：
line-heightは数値で指定すると、親のフォントサイズに比例して決まる
→ レスポンシブでも崩れにくい。
おすすめ値：
1.5〜1.8 が読みやすい。
文字間（letter-spacing）
p {
letter-spacing: 0.05em;
}
- 英語：小さめ
- 日本語：やや広めにすると読みやすい
文字の位置（text-align）
p {
text-align: center;
}
使える値：
- left（左揃え：デフォルト）
- center（中央）
- right（右）
- justify（両端揃え）
font-style（斜体）
em {
font-style: italic;
}ちょっとかっこいい字に見えるかもですね。
文字装飾（text-decoration）
a {
text-decoration: none;
}以下を設定できる：
- underline（下線）
- overline（上線）
- line-through（取り消し線）
- none（装飾なし）
これは「aタグ（アンカータグ）」を使用した際に、ブラウザの表記に下線が出ると思います。
その下線を消す際に、「text-decoration: none;」を指定します。
影を付ける（text-shadow）
h1 {
text-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}キレイなタイトルを作るときに便利。
文字デザインまとめ：おすすめかもな組み合わせ
① 読みやすい本文スタイル
body {
font-family: "Noto Sans", sans-serif;
font-size: 16px;
line-height: 1.7;
color: #333;
}② ブログ記事の見出し
h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 12px;
}③ キャッチコピー風タイトル
.hero-title {
font-size: 40px;
font-weight: 700;
letter-spacing: 0.05em;
text-align: center;
}実際のページで使う例
HTML：
<h1 class="title">CSSで文字をデザインしよう</h1>
<p class="lead">フォント・サイズ・行間を整えると読みやすさが劇的に向上します。</p>CSS：
.title {
font-size: 32px;
font-weight: 700;
letter-spacing: 0.03em;
}
.lead {
font-size: 18px;
line-height: 1.8;
color: #555;
}この記事のまとめ
font-sizeで文字の大きさを変えるfont-weightで太さを調整font-familyでフォントを指定- 行間（line-height）は読みやすさの鍵
- Google Fonts を使えば簡単にデザインアップ
こんな感じに淡々と解説しましたが、どうでしょうか。
CSSができるようになるとコードを作ることも楽しくなるので、是非頑張って覚えて慣れていってください！
ではでは！次回！：HTML/CSS入門⑨ ボックスモデル徹底解説！margin・paddingの基本
コメント