Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Font metrics

https://drafts.csswg.org/css-values-3/#font-relative-lengths

I can't find a reference as to what constitutes the "font metrics" of an element. What does that all encompass?

2 Answers

Steven Parker
Steven Parker
215,954 Points

The term "font metrics" as used here simply means "font size".

The "metrics" actually encompass all parameters that are used to display the font, but for this exercise the focus is on the font size.

Since the relative units do not have a specific size, they are based on the current size from the font metrics.

So, for example, if the current font size was 10px and you set it to 1.5em, it would now be 15px.

Hi Benjamin,

Font metrics is information that is part of a font file which is used to help display the font properly. The browser will use these metrics to determine how the text should be displayed in terms of size and spacing.

For example, in the link you gave for the ex unit, it mentions that it uses the x-height of the font. x-height is one of the metrics that a font can provide.

Here's a wikipedia article with a Font Metrics section: https://en.wikipedia.org/wiki/Typeface#Font_metrics

There's a diagram of the word "Sphinx" and it shows that the x-height is the height of a lowercase x. It also shows some of the other metrics that a font can provide.

Another wikipedia link, https://en.wikipedia.org/wiki/Font#Metrics , which also talks about kerning. Some fonts could provide kerning information which tells you how close together certain letter pairs can be.

Also in the link you gave, the 'ch unit' mentions "advance width or height" which are 2 more examples of font metrics.

Font metrics could also be used by the browser for line-height and leading calculations.