結論

@font-face{font-family:'Noto Sans JP';src:local('Noto Sans JP');ascent-override:100%;descent-override:22%;}

皆さんこんにちは。これは株式会社カオナビ Advent Calendar 2025の15日目（シリーズ3）の記事です。

Noto Sans JPの上下中央揃えの問題については、ご存知の方も多いのではないかと思います。以下のような既存記事も参考になります。

筆者も業務でこの問題に取り組む機会があり、既存記事に見当たらない解決法（冒頭のもの）をとったのでご紹介します。

問題の概要

Noto Sans JPでは、上下に非均等な余白があります。筆者はフロントエンドエンジニアなのでCSSの言葉で説明するのですが、例えば次のようなスタイルにしてみましょう。

body{font-family:"Noto Sans JP";font-size:14px;line-height:22px;font-weight:bold;}span{display:inline-block;background-color:#eee;}

この状態で、<span>テキスト</span>とするとこのような表示になります。

見やすさのために拡大していますが、灰色の領域の縦の大きさが22pxとなっています。

そして、画像をよく見ると、灰色のボックスの中で、文字が上下中央ではなく若干下に寄っているように見えます。

次の画像では、ずれが分かりやすいように背景を市松模様にしました。各正方形が1px四方です。

この画像によると、グリフの上端・下端から見ると、上方向の余白が約6px、下方向の余白が約4pxあるように見えます。

このように、確保された行の高さに対して中央に描画されません。CSSのボックスとしてはこの画像の背景付きの範囲がボックスとして扱われることになるため、単純にボックスを上下中央揃えにしても、テキストが中央揃えにはなりません。これがNoto Sans JPの上下中央揃え問題です。

@font-face を用いる解決策

CSSの@font-faceを使うことで、Webフォント、あるいはローカルのフォント（ユーザーの端末にインストールされたフォント）に対してパラメータを上書きしつつ使用することができます。

冒頭でお見せした解決策では、ascent-overrideとdescent-overrideを用いてフォントのパラメータを上書きしています。ざっくり言えば、これらのパラメータを上書きすることで上方向と下方向の余白を調整できます。@font-faceルールの内容を再掲します。

@font-face{font-family:'Noto Sans JP';src:local('Noto Sans JP');ascent-override:100%;descent-override:22%;}

このように調整すると、画面表示はこうなります。

この画像からは、同じ高さ22pxのボックスの中で、上下の余白が約5pxずつになっていることが見て取れます。

冒頭にある通り、ascent-overrideやdescent-overrideの数値は筆者が実際の表示を見ながら数値を調整して得たものです。筆者はフォントにあまり詳しくないので何となくで調整しています。

しかし、筆者がいろいろなfont-sizeやline-heightで試してみたところ、どの場合もボックスの中央を維持できています。

これであれば、テキストを表示する側でのmarginやpaddingといった調整は不要で、@font-faceの指定をグローバルに追加するだけで全ての箇所を調整できるのが魅力的ですね。line-heightで確保された縦の長さのちょうど真ん中あたりにテキストが描画されるようになり、解決策としてはとてもシンプルです。

注意点

いくつか注意点があります。

明示的にNoto Sans JPを指定する必要がある

この方法ではfont-familyに明示的にNoto Sans JPを指定する必要があります。

現在、Windowsには最初からNoto Sans JPがインストールされているため、sans-serifで自動的にNoto Sans JPが適用されることがあります。

しかし、この記事のやり方を用いる場合にはfont-familyにNoto Sans JPを明記する必要がある点はご注意ください。理由は、@font-faceでNoto Sans JPというフォントを再定義しているからです。

本来の使い方と違うかも？

ascent-overrideといった機能の本来の使い方は、Webフォントなどを使っている場合に複数フォント間でパラメータを合わせることにありそうです。

そのため、この記事のように、特定のフォントのメトリクスだけを調整する目的で使うのは本来の使い方とは違うかもしれません。

Safariのサポートがない

今回使用したascent-overrideとdescent-overrideは、記事執筆時点ではSafariにサポートされていません。

ただ、Safari + Noto Sans JPという組み合わせがかなりレアなことから、我々はこの組み合わせには対応しなくても問題ないと考えています（もし発生したとしても、最悪従来のように縦にズレるだけですし）。

まとめ

今回は、@font-faceだけでNoto Sans JPの上下中央揃え問題に立ち向かう方法を紹介しました。

このテクニックはまだプロダクトに実践投入しておらず、もう少し検証する予定です。

しかしながら、この手法はパッと調べても出てこなかったので、皆さんの役に立ちそうだということでご紹介します。

ぜひ試してみてください。もしくは、筆者が気づいていない問題点に気づいた方はぜひ教えていただければと思います。