Authors want to use a range of font families for aesthetic and practical reasons, such as variety and readability. font-family: "Verdana" is chosen for readability, but that font looks bigger than many similar fonts, so the author might be tempted to set: font-size: 90% to bring it into line with the visitor's expectations. But that doesn't work if the visitor's browser doesn't have the font; it will then use an alternative, but still apply the size adjustment that is no longer appropriate, resulting in smaller text than what the visitor expected.

In other words, this declaration:

body {
  font-family: "Verdana";
  font-size: 90%;
}

…is equivalent to:

body {
  font-size: 90%;
}

…if you don't have Verdana.

To deal with this problem, one must combine the two properties so that they are applied together or not at all. There are CSS proposals for disabling general groups of rules if some of them cannot be applied, but there are circumstances where it may be better to deal with fonts specifically, and I outline a proposal below.

When specifying a particular font, enclose its name in quotes, and include a scaling parameter, something like this:

font-family: "Verdana:0.9", sans-serif;

Firstly, note that browsers that do not recognize this extension will not find a font with the literal name Verdana:0.9, so the relatively safe sans-serif will be chosen instead, and without any size adjustment.

But now there's an opportunity for a clever browser to parse the string, and apply the scaling if the font is actually used.

The result would not be the exactly same as having a separate font-size in some sort of conditional block (as demonstrated by one proposed syntax below):

body {
  font-family: sans-serif;
}

@media (supports) {
  body {
    font-size: 90%;
    font-family: Verdana !supported;
  }
}

…as such a condition would never consider availability of the font for individual characters. Instead, the proposed "Verdana:0.9" syntax implies that a new font is generated by scaling an existing one.