CSS：size-adjustで日本語と英語フォントのバランスを調整する -実例で完全解説- | CODE-PLUS（コードプラス）

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: 視覚的な比較

テストHTMLを作成

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<style>
@font-face {
font-family: 'Overused Grotesk Test';
src: url('OverusedGrotesk-Regular.woff2') format('woff2');
size-adjust: 100%;  /* ← ここを変更してテスト */
}

.english {
font-family: "Overused Grotesk", sans-serif;
}

.japanese {
font-family: "Noto Sans JP", sans-serif;
}

p {
font-size: 16px;
line-height: 1.66;
}
</style>
</head>
<body>
<p class="english">The quick brown fox jumps over the lazy dog</p>
<p class="japanese">あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら</p>
</body>
</html>

調整手順

100%から始める

size-adjust: 100%;  /* 英語が小さく見える */

5%刻みで増やしてテスト

size-adjust: 103%;  /* 少し大きく */
size-adjust: 106%;  /* もう少し */
size-adjust: 110%;  /* さらに大きく */

視覚的に揃うポイントを探す
- 大文字の高さを比較
- 小文字xの高さを比較
- 全体的な印象を確認

最適値を決定

size-adjust: 106%;  /* ← ちょうど良い！ */

方法2: 計算による決定

x-heightの測定

// フォントメトリクスを取得するツール
// https://opentype.js.org/ などを使用

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

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

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

結果:

@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値は例です。実際のフォントファイルから取得してください。

方法3: ブラウザDevToolsで微調整

Chromeデベロッパーツールを開く

Elementsタブで@font-faceを編集

@font-face {
...
size-adjust: 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（オリジナル版）

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

/* 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（調整版・推奨）

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

/* 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.0/font-face.adjusted.css" rel="stylesheet">

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

📊 まとめ

問題:

英語フォントと日本語フォントでサイズ感が異なる
特に、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なし）
✅ レスポンシブデザインでも有効
✅ 拡大なので視認性を保てる

注意点

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

【JS】クリック時とホバー時にそれぞれ対応するJavaScriptアコーディオン

iOSのpointer-eventsバグとイベント制御対策

Google Fontsだと字詰めが効かない理由 ~OTFとTTFの違い -Shi...

font-feature-settingsの使い方｜palt・kern等よく使う機能を実例...

CSS：size-adjustで日本語と英語フォントのバランスを調整する -実例で...

CSS：size-adjustで日本語と英語フォントのバランスを調整する
-実例で完全解説-