Font optical size multiplication factor

Many variable web fonts which have an opsz axis practically require a smaller value of opsz than the actual point size of the typeface in order to work well on screen. For example, with Indestructible Type’s revival of Bodoni I typically have to set opsz to a third or a quarter of the actual font size because of the very thin hairlines.

At present there’s no way to do this systematically so that setting font-size automatically sets the optical size. It would be nice if there were such a way.

There are a couple of challenges involved here:

• because the user may have selected a different font than the one specified in the stylesheet, the setting only affect the one font the designer selects an appropriate opsz value for; in other words it should be a per-font setting and not a cascading property, which implies it belongs in @font-face
• but because the aesthetically/legibly ideal factor likely depends on the output device, it should also ideally be possible to set different values with a resolution or print/screen media query; as far as I know, @media is invalid inside @font-face

But hypothetically it could look like this:

@font-face {
    font-family: 'Bodoni';
    src: url('Bodoni-variable-font.woff2') format('woff2-variations');
    @media (screen and max-resolution: 144dpi) {
        optical-size-factor: 0.25; /* set `opsz` to be a quarter of the actual point size of the font */
    }
    @media (screen and max-resolution: 288dpi) {
        optical-size-factor: 0.5; /* set `opsz` to be half of the actual point size of the font */
    }
}

Start with issue #13331 and its proposed @font-face and @media examples. Examine how the requested per-font optical-size factor should interact with selected fonts and screen or resolution conditions. Done means producing an agreed, implementable CSS design that addresses these constraints.