日本語フォントと英語フォントを併用するとき、同じfont-sizeなのにサイズ感が違うという経験はありませんか？
また、Noto Sans JP でボタンを作るとテキストが微妙に下にズレて見えるという問題に悩んだことはないでしょうか。
これらの問題を解決するために、フォントメトリクス解析ツールを作成しました。フォントファイルをドラッグ&ドロップするだけで、CSSの最適値を自動計算できます。
フォントメトリクス解析ツール - 2つのフォントを比較して、size-adjustの最適値を計算
ツールでできること
このツールでは、2つのフォントを比較して以下の値を自動計算します。
1. size-adjust 値の計算
size-adjust は、@font-face で定義したフォントの視覚的なサイズを調整するCSSプロパティです。
たとえば、Noto Sans JP と Roboto を併用する場合、Roboto 側に size-adjust: 106% を設定することで、両フォントの文字サイズを揃えることができます。
ツールでは3つの基準で計算します。
- x-height基準：小文字の高さを揃える
- Cap Height基準：大文字・数字の高さを揃える（推奨）
- Ascender基準：フォント上端を揃える
2. --font-top-offset 値の計算
Noto Sans JP などの日本語フォントでは、上部余白（Ascender）が広く設計されて。そのため、ボタン内でテキストが視覚的に下にズレて見える問題が発生します。
Noto Sans JPのボタンがズレる原因と解決法 | CODE-PLUS（コードプラス）
--font-top-offset は、このズレ量を表すCSS変数です。ツールでは以下の計算式で自動算出します。
font-top-offset = (Ascender + Descender - Cap Height) / 2
3. メトリクス比較表
2つのフォントの詳細なメトリクス値を比較表で出力します。
- x-Height
- Cap Height
- Ascender
- Descender
- 16pxでの実際の差分（px単位）
使い方
Step 1: フォントファイルを用意
TTF、OTF、WOFF 形式に対応しています。
WOFF2形式の場合は、everythingfonts.com などでTTFに変換してからご利用ください。
Step 2: フォントをドロップ
- 基準フォント：サイズの基準となるフォント（例：Noto Sans JP）
- 調整フォント：サイズを調整したいフォント（例：Roboto）
それぞれのエリアにドラッグ&ドロップします。
Step 3: 計算ボタンをクリック
「計算」ボタンを押すと、Markdown形式で結果が出力されます。結果は自動でクリップボードにコピーされるので、そのままメモやドキュメントに貼り付けられます。
出力例
Noto Sans JP と Roboto を比較した場合の出力例です。
# Noto Sans JP Regular × Roboto Regular 比較結果
## 推奨 size-adjust 値
**103%** （※実際には、目視で106%くらい）
### 計算方法別の値
| 基準 | 値 | 用途 |
|---|---|---|
| x-height基準 | **103%** | 小文字の高さを揃える |
| Cap Height基準 | **103%** | 大文字・数字の高さを揃える |
| Ascender基準 | **117%** | フォント上端を揃える |
### メトリクス比較
| 項目 | Noto Sans JP Regular | Roboto Regular | 差分 |
|---|---|---|---|
| x-Height | 0.5430em | 0.5283em | +14.7/1000em |
| Cap Height | 0.7330em | 0.7109em | +22.1/1000em |
| Ascender | 0.8800em | 0.7500em | 130.0/1000em |
| Descender | -0.1200em | -0.2500em | 130.0/1000em |
---
## --font-top-offset（ボタン等の縦位置補正）
| フォント | --font-top-offset | 備考 |
|---|---|---|
| Noto Sans JP Regular | **0.070em** | ⚠️ 補正推奨 |
| Roboto Regular | **-0.105em** | 補正不要 |
### CSS実装例
```css
:lang(ja) {
--font-top-offset: 0.070em;
}
.button {
padding: calc(0.5em + var(--font-top-offset, 0em) / 2) 1em calc(0.5em - var(--font-top-offset, 0em) / 2);
}
実装方法
size-adjust の実装
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.woff2') format('woff2');
size-adjust: 103%; /* Noto Sans JP に合わせる */
}
body {
font-family: "Roboto", "Noto Sans JP", sans-serif;
}
--font-top-offset の実装
/* Noto Sans JP 用の補正値 */
:lang(ja-NotoGP) {
--font-top-offset: 0.07em;
}
/* ボタンに適用 */
.button {
padding: calc(0.5em + var(--font-top-offset, 0em) / 2) 1em calc(0.5em - var(--font-top-offset, 0em) / 2);
}
この実装のポイントは、他のフォントに影響を与えないことです。--font-top-offset が定義されていないフォントでは、デフォルト値の 0 が使われるため、フォントを切り替えても問題ありません。
技術的な仕組み
opentype.js によるフォント解析
このツールは opentype.js を使用してフォントファイルを解析しています。
フォントのOS/2テーブルから以下のメトリクス値を取得します。
sTypoAscender：Ascender（上部余白）sTypoDescender：Descender（下部余白）sCapHeight：Cap Height（大文字高さ）sxHeight：x-Height（小文字高さ）unitsPerEm：UPM（フォントの基準単位）
これらの値をUPMで割ることで、em単位のメトリクス値を算出しています。
計算式
size-adjust の計算
sizeAdjust = baseFont.capHeight / adjustFont.capHeight
// 例: 0.733 / 0.711 = 1.03 → 103%
font-top-offset の計算
fontTopOffset = (ascender + descender - capHeight) / 2
// 例: (0.88 + (-0.12) - 0.733) / 2 = 0.0135 → 約0.07em
主要フォントのメトリクス参考値
よく使われるフォントのメトリクス値を参考として掲載します。
| フォント | Ascender | Descender | Cap Height | --font-top-offset |
|---|---|---|---|---|
| Noto Sans JP | 0.880em | -0.120em | 0.733em | 0.014em |
| Noto Serif JP | 0.880em | -0.120em | 0.729em | 0.016em |
| Roboto | 0.750em | -0.250em | 0.711em | -0.106em |
| Inter | 0.931em | -0.232em | 0.727em | -0.014em |
| 游ゴシック | 0.820em | -0.180em | 0.640em | 0.000em |
※ フォントのバージョンによって値が異なる場合があります。正確な値はツールで計測してください。
まとめ
フォントメトリクス解析ツールを使えば、以下のことが簡単にできます。
- 日本語・英語フォントの size-adjust 最適値 を計算
- ボタンの縦ズレを補正する --font-top-offset 値 を計算
- 2つのフォントの 詳細なメトリクス比較 を出力
フォントをドラッグ&ドロップするだけで、面倒な計算を自動化できます。
フォントメトリクス解析ツール - 2つのフォントを比較して、size-adjustの最適値を計算
