HTML/CSS

✅【コーダー必携】font-weightの数値と名称対応一覧表｜CSS実装時の備忘録

こんにちは！デザインカンプからコーディングする際、「あれ、MediumってCSSだと何の数値だっけ…」という経験はありませんか？🤔

この記事では、font-weightの数値と名称の対応関係をまとめました。デザインツールとCSSの橋渡しとなる情報なので、ぜひブックマークして活用してください！

目次[-]

📋 font-weight 数値と名称の対応表

数値名称別名一般的な使用箇所
100ThinHairline特に細い装飾的な見出し
200Extra LightUltra Light非常に細いテキスト
300Light–副見出し、大きなテキスト
400NormalRegular本文テキスト（デフォルト）
500Medium–強調テキスト、小見出し
600Semi BoldDemi Bold中見出し
700Bold–強調テキスト、主見出し
800Extra BoldUltra Bold重要な見出し
900BlackHeavy最も太い見出し、特に目立たせたいテキスト

🔍 font-weightの実装方法

CSSでの指定方法

/* 数値で指定（推奨） */
.heading {
  font-weight: 700;
}

/* キーワードで指定 */
.text {
  font-weight: bold; /* 700と同等 */
}

/* 変数での管理例 */
:root {
  --fw-thin: 100;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;
}

.heading {
  font-weight: var(--fw-bold);
}

重要ポイント

  • CSSでは数値での指定が推奨されています
  • ブラウザは指定した太さが利用できない場合、近い値を自動選択します
  • normalは400と、boldは700と等価です

⚠️ よくある注意点とトラブルシューティング

🔷 フォントによって利用可能なウェイトは異なる

すべてのフォントがすべてのウェイトを持っているわけではありません。例えば、あるフォントでは400と700しか用意されていないこともあります。

/* この場合、500はブラウザによって400か700に変換されます */
.text {
  font-family: 'Example Font', sans-serif;
  font-weight: 500; /* フォントに存在しないウェイト */
}

🔷 フォントファイルの読み込み指定と一致させる

Google Fontsなどを使用する場合、読み込むウェイトと実際に使用するウェイトを一致させることが重要です。

<!-- Google Fontsの例 -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">

上記の例では、300, 400, 700のみが読み込まれるため、CSSで500を指定しても正確に表示されません。

🔷 可変フォント（Variable Fonts）の場合

最新の可変フォントでは、連続的な数値（例：451, 567など）も指定できます。

/* 可変フォントの場合 */
.text {
  font-family: 'Variable Font Example', sans-serif;
  font-weight: 467; /* 連続的な値も指定可能 */
}

🎨 デザインツールごとのfont-weight表記

Figma

Figmaでは、次のような表記が一般的です：

Figmaでの表記CSS数値
Thin100
Extra Light200
Light300
Regular400
Medium500
Semi Bold600
Bold700
Extra Bold800
Black900

Adobe XD

Adobe XDでは、次のような表記も見られます：

XDでの表記CSS数値
Thin100
Light300
Regular400
Medium500
Bold700
Heavy900

Adobe Photoshop

Photoshopでは、フォントによって表記が異なりますが、一般的には：

Photoshopでの表記CSS数値
Thin100
Light300
Regular400
Medium500
Bold700
Black900

💡 実装のベストプラクティス

🔷 変数による管理

SCSSやCSS変数を使用して、一貫したfont-weight管理を行いましょう。

// SCSSの例
$font-weight: (
  'thin': 100,
  'light': 300,
  'regular': 400,
  'medium': 500,
  'semi-bold': 600,
  'bold': 700,
  'black': 900
);

.heading {
  font-weight: map-get($font-weight, 'bold');
}

// CSS変数の例
:root {
  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;
}

.heading {
  font-weight: var(--font-weight-bold);
}

🔷 一貫性のあるクラス命名

Tailwind CSSのように、一貫したクラス命名を行うことで、メンテナンスが容易になります。

/* ユーティリティクラスの例 */
.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }

/* 意味のある名前を付ける場合 */
.fw-thin { font-weight: 100; }
.fw-light { font-weight: 300; }
.fw-regular { font-weight: 400; }
.fw-medium { font-weight: 500; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.fw-black { font-weight: 900; }

📱 レスポンシブでのfont-weight考慮事項

小さな画面では、細すぎるフォントは読みにくくなる場合があります。メディアクエリを使って調整しましょう。

/* デスクトップでは細めのフォント */
.heading {
  font-weight: 300;
}

/* モバイルでは太めに調整 */
@media (max-width: 768px) {
  .heading {
    font-weight: 400; /* より読みやすく */
  }
}

まとめ

font-weightの数値と名称の対応を理解することで、デザインからコーディングへの変換がスムーズになります。

  • 通常は400（Normal/Regular）が標準
  • 強調したいテキストは700（Bold）
  • さらに細かいニュアンスは500（Medium）や600（Semi Bold）で表現

このガイドを参考に、font-weightを効果的に活用してデザイン通りの実装を実現してください！

参考

hisa

関連記事

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA