Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Benjamin Hedgepeth
Benjamin Hedgepeth
5,672 Points

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
229,785 Points
Steven Parker
Steven Parker
229,785 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.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

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.