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

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

 使い方

▼フォントファイルを選択

フォントをドラッグ&ドロップ

または クリックして選択

フォントをドラッグ&ドロップ

または クリックして選択

対応形式：TTF, OTF, WOFF
※WOFF2は こちら でTTFに変換してからご利用ください

▼計算結果

使い方

💡 size-adjust とは？

size-adjust は、@font-face で定義したフォントの視覚的なサイズを調整するCSSプロパティです。 日本語フォントと英語フォントを併用する際、同じ font-size でもサイズ感が異なる問題を解決できます。

🎯 使用手順
  1. 基準フォント：サイズの基準となるフォント（例：Noto Sans JP）をドロップ
  2. 調整フォント：サイズを調整したいフォント（例：Roboto）をドロップ
  3. 「計算」ボタンをクリック
  4. Markdown形式で結果が出力され、自動でクリップボードにコピーされます。
  5. ※実際には font-size で比較して目視で確認する等した方が、実際の見た目に近く確実です。
⚙️ 計算方法
  • x-height基準：小文字の高さ（x）を揃える
  • Cap Height基準：大文字・数字の高さを揃える（推奨）
  • Ascender基準：上端を揃える
📐 --font-top-offset とは？

日本語フォントは上部余白（Ascender）が広く、ボタン内でテキストが下にズレて見えることがあります。 --font-top-offset は、このズレを補正するためのCSS変数です。 計算式: (Win Ascent - Win Descent - Cap Height) / 2

📌 実装例
@font-face {
font-family: 'Roboto';
src: url('Roboto-Regular.woff2') format('woff2');
size-adjust: 103%;  /* Noto Sans JP に合わせる */
}

/* 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);
}
関連記事