CSS フォント サイズでの文字の実際の高さの決定

CSS でフォ​​ント サイズを設定する場合、その実際の高さが何を表すかを理解することが重要です。ご想像に反して、フォント サイズは文字のピクセル高さに直接対応しません。代わりに、それは「em」と呼ばれる概念を指します。

「Em」の歴史的起源

「em」は金属活字印刷の時代に始まりました。これは、通常、大文字「M」の高さに基づいて、各文字を含む正方形のブロックを指します。デジタル フォントの出現により、この物理的な制限は適用されなくなりました。

標準と単位変換

現代のフォント テクノロジでは、「em」はソフトウェア内の架空の境界のままです。通常、OpenType フォントでは 1000 単位、TrueType フォントでは 1024 または 2048 単位に設定されます。フォント サイズを正確に定義するには、ピクセルの高さではなく、フォントのベースラインと平均線の間の距離を表す「em」単位を使用します。

異なる文字体裁単位と画面解像度間の変換では、次のことが可能です。複雑になる。ただし、1 ポイント (Truchet) は約 0.35 mm に相当し、1 ピクセル (PX) は画面上の 1 つの「ドット」であり、画面の解像度によって異なります。

実際の不一致サイズ

標準の存在にもかかわらず、特定のフォントのグリフの実際の高さは次の要素によって大きく異なります。

• フォント開発者がグリフをどのように設計したか
• ブラウザによる文字のレンダリング
• 画面の解像度とピクセル密度

たとえば、Apple が作成した Zapfino スクリプト フォントは、元々はフォント内の最大の大文字に応じたサイズになっていました。 。ただし、小文字が小さく見えるため、フォントは後に修正され、特定のポイント サイズが他のフォントよりも約 4 倍大きくなりました。

実践的な意味

フォント サイズの本質を理解するCSS は、デジタル デザインにおいて一貫性のある正確なタイポグラフィを確保するために非常に重要です。望ましい視覚的効果を実現するには、フォント サイズを指定するときに、フォントのメトリック、ブラウザの互換性、画面解像度を考慮することが不可欠です。