What's the Real Story Behind Font Size in CSS: Is it Just the Height of the Ascenders and Descenders?

Determining the Actual Height of Letters in CSS: Unraveling the True Font-Size

Despite the common assumption that setting a font-size in CSS directly corresponds to the height of the ascenders (upper portion of certain letters like 'h' and 'l') and descenders (lower portion of letters like 'g' and 'y'), the true measurement can be more complex.

Historical Perspective: The Em

Historically, the "em" referred to the block size of individual letters engraved on metal. Since the capital "M" typically occupied the largest space, its size determined the overall "em" size. Today, font developers design fonts without physical constraints, rendering the "em" a virtual concept.

Standards: OpenType and TrueType

In OpenType fonts, the em size is set to 1000 units, while in TrueType fonts, it's usually 1024 or 2048. Ideally, the font-size should be defined using "em" units, which refer to the x-height of the font, not the pixel height.

Unit Conversion: Point, Pica, and PPI

The "point" is a measurement commonly used in typography. Depending on the convention, one point can range from 0.188mm to 0.4mm. The "pica" is an older unit equal to 12 points. The "ppi" (pixels per inch) varies widely between different screen resolutions.

Browser Rendering: Variance Across Implementations

Despite the existence of standards, the actual size of font glyphs varies based on how the font developer designed them and how they are rendered by different browsers. For instance, the Apple Zapfino script font was enlarged to make lowercase letters more legible.

Font Development Tools: Exploring the Fundamentals

To gain a deeper understanding of font size, consider using free font development tools like FontForge. These tools allow you to create your own fonts and experiment with different sizing techniques.

Conclusion

Understanding the true height of letters in CSS requires an appreciation of historical conventions, font standards, and browser-specific rendering differences. By leveraging the resources mentioned above, you can gain a more comprehensive knowledge of this foundational subject in web design.

The above is the detailed content of What's the Real Story Behind Font Size in CSS: Is it Just the Height of the Ascenders and Descenders?. For more information, please follow other related articles on the PHP Chinese website!