CSSのsize-adjustプロパティで日本語フォントと英語フォントの見た目のサイズを揃える方法を実例付きで解説。

• ✅ 日本語と英語フォントでサイズ感が異なる理由
• ✅ size-adjustプロパティの使い方
• ✅ 調整値の決め方（実践的な方法）
• ✅ 実際のコード例とビフォー・アフター
• ✅ よくある問題と解決策

同じfont-sizeでも異なるサイズに見える問題を、HTMLを変更せず解決する方法をご紹介します。

---

1. 問題：なぜフォントのサイズ感が合わないのか

よくある悩み

body {
	font-family: "Overused Grotesk", "Noto Sans JP", sans-serif;
	font-size: 16px;
}

このように英語フォントと日本語フォントを併用すると：

英語: The quick brown fox  ← 15pxくらいに見える（小さい！）
日本語: あのイーハトーヴォの ← 16pxに見える

問題:

• 同じ font-size: 16px なのに
• 英語フォントの方が小さく見える
• 視覚的にバランスが悪い

---

なぜこうなるのか？

x-height（エックスハイト）の違い

Overused Grotesk (欧文フォント):
━━━━━━━━━━━━ cap height (大文字の高さ)
xxx          ← x-height が小さい
━━━━━━━━━━━━ baseline

Noto Sans JP (日本語フォント):
━━━━━━━━━━━━ 仮想ボディの高さ
あああ         ← 実際の字面が大きめ
━━━━━━━━━━━━ baseline

原因:

• Overused Groteskなどのフォントは x-height が小さめ
• 日本語フォント（Noto Sans JP等）は字面が比較的大きい
• 結果として、同じ font-size でも英語フォントが小さく見える

フォントによる違い:

Overused_Grotesk

Hanken Grotesk

Poppins

Kumbh Sans

Noto Sans

英語フォント	日本語との比較	size-adjust参考値
Overused Grotesk	かなり小さく見える	106-110%
Hanken Grotesk	やや小さく見える	103-106%
Poppins	少し小さく見える	101-103%
Kumbh Sans	ほぼ揃っている	100-101%
Noto Sans	揃っている	100%

---

2. size-adjustとは？

定義

size-adjust は、@font-face で定義したフォントの視覚的なサイズを調整するCSSプロパティ。

@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk.woff2') format('woff2');
	size-adjust: 106%;  /* 6%拡大して日本語と揃える */
}

特徴

項目	説明
適用場所	@font-face 内のみ
効果	フォントの表示サイズを調整
値	パーセンテージ（例: 100%, 106%, 110%）
デフォルト	100%
ブラウザサポート	Chrome 92+, Firefox 92+, Safari 17+

何が変わるのか

/* 調整前 */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk.woff2') format('woff2');
}

/* 調整後 */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk.woff2') format('woff2');
	size-adjust: 106%;  /* ← これを追加 */
}

結果:

調整前: font-size: 16px → 視覚的に 15px（英語が小さい）
調整後: font-size: 16px × 106% = 視覚的に 16.96px ≈ 17px（揃った！）

---

3. 基本的な使い方

ステップ1: @font-face で定義

/* 英語フォント（調整が必要） */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	size-adjust: 106%;  /* ← 6%拡大して日本語と揃える */
}

/* 日本語フォント（基準） */
@font-face {
	font-family: 'Noto Sans JP';
	src: url('NotoSansJP-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

ステップ2: フォントスタックで使用

body {
	font-family: "Overused Grotesk", "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.66;
}

ポイント:

• 英語フォント（調整済み）を先に指定
• 日本語フォント（基準）を後に指定
• HTMLは一切変更不要！

---

4. 調整値の決め方

方法1: 計算による決定

x-heightの測定

フォントメトリクスを取得するツールなどを使用

フォントメトリクス解析ツール - 2つのフォントを比較して、size-adjustの最適値を計算

2つのフォントを比較して、CSSの size-adjust プロパティの最適値を計算するオンラインツール。フォントメトリクス値・--font-top-offset の値も取得。  続きを読む

notoSansJP {
	unitsPerEm: 1000,
	xHeight: 536,  // 日本語フォント（基準）
};

overusedGrotesk {
	unitsPerEm: 1000,
	xHeight: 505,  // 英語フォント（小さめ）
};

// 調整値の計算
sizeAdjust = (notoSansJP.xHeight / overusedGrotesk.xHeight) * 100;
// 536 / 505 ≈ 106.14%

size-adjust を調整:

@font-face {
	font-family: 'Overused Grotesk';
	size-adjust: 106%;
}

フォント別の計算例:

英語フォント	x-height	計算式	参考値
Overused Grotesk	505	536÷505	106%
Hanken Grotesk	516	536÷516	104%
Poppins	524	536÷524	102%
Kumbh Sans	534	536÷534	100%
Noto Sans	536	536÷536	100%

※x-height値は例です。実際のフォントファイルから取得してください。

方法2: ブラウザDevToolsで、確認・微調整

.english {
	font-size 106%;  /* ← リアルタイムで確認 */
}

最適値をCSSファイルに反映。

---

5. unpkg.comでの配信方法

ディレクトリ構成

font-overused-grotesk-adjusted/
├── package.json
├── README.md
├── font-face.css           # オリジナル版（調整なし）
├── font-face.adjusted.css  # size-adjust版（推奨）
├── OverusedGrotesk-Light.woff2
├── OverusedGrotesk-Regular.woff2
├── OverusedGrotesk-Medium.woff2
└── OverusedGrotesk-Bold.woff2

package.json

{
	"name": "@your-username/font-overused-grotesk-adjusted",
	"version": "1.0.0",
	"description": "Overused Grotesk with size-adjust for Japanese fonts",
	"main": "font-face.adjusted.css",
	"files": [
	"*.woff2",
	"font-face.css",
	"font-face.adjusted.css"
	],
	"keywords": ["font", "overused-grotesk", "size-adjust", "japanese"],
	"license": "OFL-1.1"
}

font-face.css（オリジナル版）

/* Regular */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

/* Bold */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

font-face.adjusted.css（調整版）

/* Regular */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	size-adjust: 106%;  /* 日本語フォントとのバランス調整 */
}

/* Bold */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
	size-adjust: 106%;  /* 日本語フォントとのバランス調整 */
}

公開

npm publish --access public

使用

<!-- オリジナル版（調整なし） -->
<link href="https://unpkg.com/@your-username/font-overused-grotesk-adjusted@1.0.0/font-face.css" rel="stylesheet">

<!-- 調整版（推奨） -->
<link href="https://unpkg.com/@your-username/font-overused-grotesk-adjusted@1.0.6/font-face.adjusted.css" rel="stylesheet">

---

まとめ

問題:

• 英語フォントと日本語フォントでサイズ感が異なる
• 特に、Overused Grotesk等は小さく見える

解決策:

/* 小さく見える英語フォントを拡大 */
@font-face {
	font-family: 'Overused Grotesk';
	src: url('OverusedGrotesk.woff2') format('woff2');
	size-adjust: 106%;  /* ← これで解決！ */
}

/* 日本語フォントは調整不要 */
@font-face {
	font-family: 'Noto Sans JP';
	src: url('NotoSansJP.woff2') format('woff2');
}

メリット

• ✅ HTMLを変更せずにサイズ調整
• ✅ すべてのウェイトに一括適用可能
• ✅ ブラウザの標準機能（追加JSなし）
• ✅ レスポンシブデザインでも有効
• ✅ 拡大なので視認性を保てる

注意点

• ⚠️ フォントごとに最適値が異なる
• ⚠️ 古いブラウザでは無視される（安全）
• ⚠️ 視覚的な確認が必須
• ⚠️ 縮小より拡大を推奨

---

関連記事

• Google Fontsだと字詰めが効かない理由 OTFとTTFの違い
• 【完全ガイド】Webフォントをnpm/unpkg.comにアップロードする方法
• FontToolsの使い方：OTFからwoff2への変換
• font-feature-settingsの完全ガイド

---

参考リンク

• size-adjust - MDN
• CSS Fonts Module Level 5