What Does Font-Size Actually Measure in CSS?

Determining the True Height of Letters in CSS Font-Size

When setting a font size in CSS, it's important to understand what its true height represents. Contrary to what you might think, the font size does not directly correspond to the pixel height of letters. Instead, it refers to a concept called the "em."

Historical Origins of "Em"

The "em" originated in the days of metal movable type printing. It referred to the square block that contained each letter, typically based on the height of the capital letter "M." With the advent of digital fonts, this physical limitation no longer applies.

Standards and Unit Conversion

In modern font technology, the "em" remains an imaginary boundary in software. It is generally set to 1000 units in OpenType fonts and 1024 or 2048 units in TrueType fonts. To define a font size accurately, use the "em" unit, as it represents the distance between the baseline and the mean line of the font, not the pixel height.

Conversion between different typographic units and screen resolutions can be complex. However, it's important to note that 1 point (Truchet) equals approximately 0.35 mm, and 1 pixel (PX) is a single "dot" on a screen, which varies depending on the screen resolution.

Inconsistencies in Actual Size

Despite the existence of standards, the actual height of glyphs in a given font can vary significantly depending on:

• How the font developer designed the glyphs
• The browser's rendering of the characters
• The resolution and pixel density of the screen

For example, the Zapfino script font created by Apple was originally sized relative to the largest capitals in the font. However, the lowercase letters appeared small, so the font was later revised to make a given point size approximately 4 times larger than other fonts.

Practical Implications

Understanding the true nature of font size in CSS is crucial for ensuring consistent and accurate typography in digital design. It's essential to consider the font's metrics, browser compatibility, and screen resolution when specifying font sizes to achieve the desired visual impact.

The above is the detailed content of What Does Font-Size Actually Measure in CSS?. For more information, please follow other related articles on the PHP Chinese website!