Q. Noto Sansの場合、下にずれたように見える

2023年8月9日

Noto Sansを使った際に、他のフォントと比べて下にずれたように見える問題についての調査をまとめた。

Table of Contents

実際のサンプル

line-heightを1emにして、各フォントがどのように領域を占有するかを比較している。

フォントに指定されている情報によって、意図してこうなっている可能性がある。

フォント周りのCSSプロパティは未だあまりサポートされておらず、ほぼコントロールすることが出来ないため、どうしようもないと思われる。

インライン整形コンテキストの大きさは、文字のベースラインよりも上の大きさAscent metric、文字のベースラインよりも下の大きさDescent metric、行間の大きさLine gap metricによって決定される。

line-height= ascent metric + descent metric + line gap metric

これらの値は、フォントによっては好ましい値が指定されている場合がある。

またLine gap metricはLeadingとして利用され、Descent metricとAscent metricの上下にLeading / 2の値が付与される。

text-box-edge(text-edge)プロパティなどがサポートされたら、Leadingの挙動は変更できるが、現状草案の段階であり、ほとんどの環境で利用できないため、実質Line gap metricは常に分割して付与されることになる。

line-heightが指定の値になるように、leadingを削って調整される。

Descent metricとAscent metricの和よりも小さな値が指定された場合は、特に書かれていないが、Chromeでは両側から均等に削られているように見える。