Hacker News new | ask | show | jobs
by chrismorgan 1314 days ago
In the context of browsers, these are both wrong.

em is an arbitrary font metric that actually has nothing to do with actual character measurements, and not even a particularly strong correlation. I measured the width/advance of m glyphs at font-size 16px in a handful of the fonts I have installed, and got values between 8.88 (Advocate, condensed) and 15.59 pixels (DejaVu Sans). The two monospaces I had were around 9.6. The regular serifs and sans-serifs were 12.01–15.59 with no obvious rhyme or reason. Some have different aspect ratios which lead to this, and some are just smaller or bigger than others at particular sizes by ten or even twenty percent. Font sizes are truly just fairly arbitrary numbers. (But there is the ch unit, which is actually based on font metrics: the width/advance of the 0 glyph. Also ex, the height of the x glyph.)

rem is root em, which for practical purposes means “not relative” in contrast to em, which is relative to the current or parent font size, depending on where you use it. (Sure, rem is still relative to the root font size in most places, and the initial font size in the root font-size declaration and in media queries, but it’s… less relative than em, if you will. Certainly thinking of it as “relative em” will lead you wildly astray.)

1 comments

I have always thought `em` is the line height?

I didn't know about `ch` and `ex`, I'm gonna try them

The default line height is defined by the font (and the browser may influence it in other ways too?), but it’s distinct from the em. (It’s easy to try in a browser. I see values like 18.78px and 19.33px and 21.67px on my 16px text.)