Does Font Size in CSS Really Measure From Ascenders to Descenders?

Understanding Font Size Measurement in CSS: Myth vs. Reality

In CSS, setting a font-size property sparks queries about its actual height. While traditional wisdom suggests it corresponds to the height from ascenders to descenders, it's important to dive deeper to unravel this topic.

Historical Roots

Originally, the "em" unit in typography denoted the block size allotted to engrave each capital letter, particularly the M. Today, digital fonts have no such physical constraints, allowing font designers to set em sizes according to their vision.

Defining Standards

In OpenType fonts, the em size is usually 1000 units, while in TrueType fonts, it's typically 1024 or 2048. To ensure consistency, it's recommended to define font styles using EM units. This way, the font-size refers to the font's x-height, representing the distance between the baseline and mean line.

Units of Measurement

Various units are used to measure font sizes:

• Point (ATA): 0.3514598 mm
• Point (PostScript): 0.3527777778 mm
• Pixel (PX): Varies based on screen resolution

Myth vs. Reality

The misconception that font-size represents the height from ascenders to descenders is not universally true. It largely depends on the font developer's design and the browser's rendering capabilities.

For example, Apple's Zapfino script font was originally designed with larger lowercase letters than expected, resulting in a larger apparent font-size at a given point value.

Additional Resources

• [International Unification of Typographic Measurements](https://archive.org/details/InternationalUnificationOfTypographicMeasurements/page/n11/mode/2up)
• [Point (Typography)](https://en.wikipedia.org/wiki/Point_(typography))
• [Pixels per Inch](https://en.wikipedia.org/wiki/Pixels_per_inch)
• [Font Metrics](https://en.wikipedia.org/wiki/Font_metrics)
• [Typographic Units](https://en.wikipedia.org/wiki/Typographic_units)

Practical Exploration

To gain firsthand insights, consider exploring font development tools like FontForge or Fontlab Studio. These platforms provide access to the inner workings of font design, allowing you to manipulate font glyphs and understand their geometry.

The above is the detailed content of Does Font Size in CSS Really Measure From Ascenders to Descenders?. For more information, please follow other related articles on the PHP Chinese website!