Respectful font size

# Background

Use font-size: 100% !important  argues that we should be respectful and set our CSS font size to relative units of 1em or equivalently 100%, and not require users to either zoom-in or zoom-out to achieve their own needs or preferences.

I agree wholeheartedly with this sentiment. But want to extend it one step further to take into consideration the font family, and its underlying font metrics.

# What is font-size?

The following list of web-safe fonts  are all the same font-size: 1em;, differing only in their font-family (the font used in this site is Roboto). Evidently, they look different - the horizontal and vertical space each consumes for the same character is radically different.

Georgia ☙ Palatino Linotype ☙ Times New Roman ☙ Arial ☙ Arial Black ☙ Comic Sans MS ☙ Impact ☙ Lucida Sans Unicode ☙ Tahoma ☙ Trebuchet MS ☙ Verdana ☙ Courier New ☙ Lucida Console

CSS font-size is measured from the top of the highest ascender, to the bottom of the lowest ascender, plus a bit. But there is no rule for the heights of ascenders, descenders, the x-height, or even the "a bit". Further, the width and thickness that each character consumes is also completely indeterminate. As such, the amount of "ink" for glyphs from different fonts can be different despite having the same nominal size. And ultimately, it is this amount of "ink" that makes a font readable.

But there is no universal measure for "inky-ness", and browsers are unable to offer that as a user choice. So we're left with the situation whereby font-size becomes the proxy metric for legibility.

# Choosing font sizes

To be respectful, we should aim for our CSS font-size to be visually the same as the user's needs or preferences. Necessarily, this means using a relative font size that is approximately 1em or 100%, adjusted slightly larger or smaller depending on the "inky-ness" of our target font, relative to some baseline. For example, the default font for Google Chrome on Windows is Times New Roman, Arial, or Consolas, respectively for serif, sans-serif, and monospace. It makes sense to use those as a baseline.

# Fallback fonts

In the world-wide web, we can't guarantee that users will have the fonts we specify - it may be blocked by user choice, by company policies, or even by governmental policies. Even when it is not blocked, there is a time delay from when the HTML is loaded and from when the web fonts are ready for use.

As such, it is common to specify not just one font-family, but a number of them as per the declaration below. When the preferred font is [temporarily] unavailable, a fallback font may be used.

html {
  font-family: Arial, Helvetica, sans-serif;
  font-display: swap;
}

To avoid a jarring change in appearance when fonts are being loaded, I highly recommend to have metric compatible  fonts as fallbacks.

# TLDR

To be respectful, relative fonts are a must. This means font-size: 1em; or font-size: 100%;. However, due to differences in optical sizes across fonts of different font-family, we should adjust this slightly larger or smaller depending on the optical size of the font.