Font Size problem

By Xah Lee. Date: .

standardize perceived font size?

have you ever designed a website, or tried to tweak blog “themes”? lots css for layout and width/height stuff. Then, you saw some pretty font, and use font-family to switch to it. Bang, your site goes heywire. texts overlap, or become too small and unreadible. Even though you never changed font-size.

font size comparison 2018-11-02 01e83
font size comparison

there needs to be a standardized metric for perceived font size, so that, if we say p size x, we can swap any font with that size without changing any site design.

see Meaning of Font Size

on mastodon, i got into a semi argument. (from a private reply. gawd i hate private replies) apparently, some people don't get what am saying. Here's the deal.

When you say font-size:16px, ok it's 16 pixels, but what exactly does it mean? M height? M width? Neither! In fact, there is no precise definition of font size. It's just a box, and font designers put M about 70% inside it. Actual size of M vary wildly.

font size em height
font size em height

Metrically Compatible Fonts?

there is a concept of “metrically compatible” fonts. It means, such fonts have the same caps height, x height, baseline height, ascender height, decender height. e.g. helvetica and arial are metrically compatible. you can swap between them, sans screwing up layout.

note, there is no “metrically compatible” concept in CSS. We need it. e.g. CSS property font-metric-param:baseline/caps_ratio, xheight/cap_ratio,… So web authors can swap font sans screwing up layout.

note: “metrically compatible” fonts is more a side effect of copyright then actual typography concept. e.g. helvetica is ©. Microsoft “reinvent” it as Arial. Linux by Liberation Sans. But it'd be hard pressed to find “metrically compatible” that's not clones.