← カテゴリ一覧に戻る

フォント（種類・サイズ・太さ）

font-familyfont-sizefont-weightfont-style

フォント関連のCSSプロパティはテキストの見た目を決定します。フォントファミリー・サイズ・太さ・スタイルを組み合わせて読みやすく美しいタイポグラフィを実現します。

デモ：font-family（フォント種類）

serif — 明朝体・セリフ体（Times New Roman など）
sans-serif — ゴシック体・サンセリフ体（Helvetica など）
monospace — 等幅フォント（Courier New など）
cursive — 筆記体風フォント
system-ui — OSのシステムフォント（推奨）
Georgia, serif — 具体的なフォント名＋フォールバック

デモ：font-size（サイズ）

font-size: 12px — 固定サイズ（小）
font-size: 16px — ブラウザのデフォルト（基準）
font-size: 24px — 固定サイズ（大）
font-size: 1rem — ルートの1倍（通常16px）
font-size: 1.5rem — ルートの1.5倍（通常24px）
font-size: 1em — 親要素の1倍
font-size: clamp(14px, 2vw, 24px) — レスポンシブ可変

デモ：font-weight（太さ）

font-weight: 100
font-weight: 200
font-weight: 300
font-weight: 400 （normal）
font-weight: 500
font-weight: 600
font-weight: 700 （bold）
font-weight: 800
font-weight: 900

デモ：font-style / font-variant

font-style: normal（通常）
font-style: italic（イタリック）
font-style: oblique（斜体）
font-variant: small-caps — Small Caps Text Example

コード例

/* フォントファミリー */
body {
  font-family: system-ui, -apple-system, sans-serif;
}

/* フォントサイズ */
h1 { font-size: 2rem; }        /* 32px (基準16px時) */
p  { font-size: 1rem; }        /* 16px */
small { font-size: 0.875rem; } /* 14px */

/* レスポンシブフォントサイズ */
.hero-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

/* フォントの太さ */
.light  { font-weight: 300; }
.normal { font-weight: 400; } /* = normal */
.bold   { font-weight: 700; } /* = bold */

/* フォントショートハンド: style weight size/line-height family */
p {
  font: italic 400 1rem/1.6 system-ui, sans-serif;
}

比較：px vs em vs rem

単位基準特徴推奨シーン
px絶対値（画面ピクセル）ユーザーのブラウザ設定に追従しないborder, shadow など
em親要素のfont-sizeネストで累積するため予測が難しいpadding, margin（フォントに連動）
rem ⭐ルート（html）のfont-sizeネストに影響されない。アクセシブルfont-size全般（推奨）

NEWバリアブルフォント（font-variation-settings）と system-ui

バリアブルフォントは1つのフォントファイルで太さ・幅・傾斜などを連続的に変化させられます。font-variation-settingsで細かく制御できます。

font-variation-settings: 'wght' 100 — バリアブルフォントのデモ
font-variation-settings: 'wght' 300 — バリアブルフォントのデモ
font-variation-settings: 'wght' 500 — バリアブルフォントのデモ
font-variation-settings: 'wght' 700 — バリアブルフォントのデモ
font-variation-settings: 'wght' 900 — バリアブルフォントのデモ
/* バリアブルフォントの細かい制御 */
.text {
  font-variation-settings: 'wght' 650, 'wdth' 85;
}

/* system-ui: OSのUIフォントを使用（推奨） */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif;
}

/* フォントの滑らか表示 */
body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

🤖 AIプロンプトテンプレート

CSSのフォント関連プロパティを使ったタイポグラフィの実装例をReact + Tailwind CSSで作成してください。

要件:
- font-family / font-size / font-weight / font-style / font-variant の各プロパティを視覚的に比較できるデモ
- 単位（px・em・rem・clamp）の違いを実際に確認できるインタラクティブなデモ
- font-weightのスライダーやセレクタで値を動的に変更できるUI
- バリアブルフォント（font-variation-settings）のデモ（wghtの数値を変えられる）
- system-uiなど推奨フォントスタックの表示例
- Tailwind CSSのフォントユーティリティ（font-sans, font-serifなど）も活用すること

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo