10日で覚えるCSSDay 4: タイポグラフィ
第 410日で覚えるCSS

Day 4: タイポグラフィ

今日学ぶこと

  • フォントファミリーとフォントスタック
  • フォントサイズと単位
  • 行間・文字間隔の調整
  • Webフォント（Google Fonts）
  • テキストの装飾とスタイリング

フォントファミリー

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

これはフォントスタックと呼ばれ、左から順にブラウザが利用可能なフォントを探します。

ジェネリックフォントファミリー

キーワード 特徴 例
serif 明朝体系（セリフ付き） Times New Roman, Georgia
sans-serif ゴシック体系（セリフなし） Arial, Helvetica
monospace 等幅フォント Courier New, Consolas
cursive 筆記体 Comic Sans MS
system-ui OSのシステムフォント San Francisco, Segoe UI 
/* モダンなフォントスタック */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
}

/* コード用 */
code {
    font-family: "Fira Code", "Source Code Pro", Consolas, monospace;
}

推奨: system-uiを使うと、各OSのデフォルトフォントが自動的に適用されます。

フォントサイズ

h1 { font-size: 2.5rem; }    /* 40px（ルート16px想定） */
h2 { font-size: 2rem; }      /* 32px */
h3 { font-size: 1.5rem; }    /* 24px */
body { font-size: 1rem; }    /* 16px（ブラウザのデフォルト） */
small { font-size: 0.875rem; } /* 14px */

rem vs em

flowchart LR
    subgraph Units["フォントサイズの単位"]
        REM["rem<br>ルート要素基準<br>予測しやすい"]
        EM["em<br>親要素基準<br>ネストで変化"]
    end
    style REM fill:#22c55e,color:#fff
    style EM fill:#f59e0b,color:#fff
単位 基準 推奨用途
rem html要素のfont-size フォントサイズ全般
em 親要素のfont-size padding等の相対値
px 固定値 border等の固定サイズ

ベストプラクティス: フォントサイズはremを使いましょう。ユーザーがブラウザのフォントサイズ設定を変更した場合にも正しくスケールします。

フォントの太さとスタイル

.light   { font-weight: 300; }
.normal  { font-weight: 400; }   /* normal */
.medium  { font-weight: 500; }
.bold    { font-weight: 700; }   /* bold */
.heavy   { font-weight: 900; }

.italic  { font-style: italic; }
.oblique { font-style: oblique; }

行間（line-height）

body {
    line-height: 1.6;   /* フォントサイズの1.6倍 */
}

h1 {
    line-height: 1.2;   /* 見出しは狭めに */
}

推奨: 本文は1.5〜1.8、見出しは1.1〜1.3が読みやすい行間です。単位なしの数値を使うと、フォントサイズに対する倍率として計算されます。

文字間隔と単語間隔

.spaced {
    letter-spacing: 0.05em;    /* 文字間隔を広げる */
}

.heading {
    letter-spacing: -0.02em;   /* 大きい文字は詰める */
}

.loose {
    word-spacing: 0.1em;       /* 単語間を広げる */
}

テキストの配置と装飾

.center { text-align: center; }
.right  { text-align: right; }
.justify { text-align: justify; }

/* テキスト装飾 */
.underline    { text-decoration: underline; }
.line-through { text-decoration: line-through; }
.no-underline { text-decoration: none; }

/* 装飾のカスタマイズ */
.fancy-underline {
    text-decoration: underline wavy #3b82f6;
    text-underline-offset: 4px;
}

/* テキスト変換 */
.uppercase  { text-transform: uppercase; }
.lowercase  { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }

テキストの省略

/* 1行で省略 */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 複数行で省略 */
.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

Google Fontsの使い方

1. フォントの選択

fonts.google.com にアクセスし、フォントを選択します。

2. HTMLで読み込み

<head>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Noto+Sans+JP:wght@400;700&display=swap" rel="stylesheet">
</head>

3. CSSで使用

body {
    font-family: "Inter", "Noto Sans JP", sans-serif;
}

flowchart LR
    subgraph WebFont["Google Fontsの導入"]
        Select["1. フォント選択<br>fonts.google.com"]
        Load["2. HTMLで読み込み<br>&lt;link&gt;タグ"]
        Use["3. CSSで使用<br>font-family"]
    end
    Select --> Load --> Use
    style Select fill:#3b82f6,color:#fff
    style Load fill:#22c55e,color:#fff
    style Use fill:#f59e0b,color:#fff

パフォーマンス: display=swapを指定することで、フォント読み込み中はシステムフォントを表示し、読み込み後に切り替わります。

CSS変数でフォント管理

:root {
    --font-sans: "Inter", "Noto Sans JP", system-ui, sans-serif;
    --font-mono: "Fira Code", "Source Code Pro", monospace;

    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 2rem;
}

body {
    font-family: var(--font-sans);
    font-size: var(--text-base);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
code { font-family: var(--font-mono); }

実践: ブログ記事のタイポグラフィ

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Inter", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    color: #1e293b;
    max-width: 680px;
    margin: 0 auto;
    padding: 48px 16px;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 16px;
}

.subtitle {
    font-size: 1.25rem;
    color: #64748b;
    margin-bottom: 32px;
}

h2 {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 48px;
    margin-bottom: 16px;
}

p {
    margin-bottom: 24px;
}

blockquote {
    border-left: 4px solid #3b82f6;
    padding-left: 24px;
    margin: 32px 0;
    font-style: italic;
    color: #475569;
}

code {
    font-family: "Fira Code", monospace;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.875em;
}

.meta {
    font-size: 0.875rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

まとめ

概念 説明
font-family フォントスタック（複数指定）
rem ルート要素基準のサイズ単位
line-height 行間（単位なし推奨）
letter-spacing 文字間隔
Google Fonts Webフォントの読み込み
CSS変数 フォント設定の一元管理

重要ポイント

  1. フォントサイズはremを使う
  2. 行間は本文1.5〜1.8、見出し1.1〜1.3
  3. フォントスタックで複数のフォールバックを用意
  4. Google Fontsはdisplay=swapでパフォーマンス最適化

練習問題

問題1: 基本

Google Fontsから好きなフォントを選び、見出しと本文に異なるフォントを適用してください。

問題2: 応用

CSS変数を使って、フォントサイズのスケールシステム（xs, sm, base, lg, xl, 2xl, 3xl）を作成してください。

チャレンジ問題

ブログ記事の全体をスタイリングしてください。見出し、本文、引用、コードブロック、メタ情報など、すべてのテキスト要素に適切なタイポグラフィを設定しましょう。

参考リンク

次回予告: Day 5では「色と背景」について学びます。グラデーション、背景画像、透明度など、ビジュアルを豊かにする技術をマスターしましょう。