Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[CSS-Fonts] Need method to interpolate variable font settings #5635

scottkellum opened this issue Oct 19, 2020 · 5 comments

[CSS-Fonts] Need method to interpolate variable font settings #5635

scottkellum opened this issue Oct 19, 2020 · 5 comments


Copy link

scottkellum commented Oct 19, 2020

There is currently no way to interpolate font variation settings fluidly across widths (viewport or element widths). This is expected behavior from many font authors but is impossible to do in CSS.

This can not be done in calc() (via clamp or CSS locks) due to CSS unit typing as font variation settings require a type of <number> and viewport units are incompatible <length> typed.


  • I would propose adding a way to bind viewport/element dimensions to animations, allowing people to interpolate properties across sizes. This is related to the CSS Scroll Linked Animations draft, but expands it to bind to width. This dramatically expands the scope of this issue, but allows interpolation of all properties across varying widths and enabling far more control around style changes across page and element scaling than media queries or element queries allow.
  • Allow for some sort of unit logic in calc() that can re-type a value, although this seems kind of clumsy to me as it is limited in use cases, and the math has the potential to be concluded and cumbersome. Calc() functions are also shifted as the user’s base font size changes making it unreliable.
Copy link

IIRC there's already an effort to be able to put a length in the denominator of a calc division, so you could do something like 100vh/1px or something. That seems like the most natural solution for this.

Copy link

Yeah, you can divide the unit away to get a raw number, which'll then type-check in calc(). Just requires UAs to finish implementing the calc() changes.

Copy link

The CSS Working Group just discussed Need method to interpolate variable font settings, and agreed to the following:

  • RESOLVED: No change, should work with already-in-the-spec calc() improvements
The full IRC log of that discussion <emilio> topic: Need method to interpolate variable font settings
<emilio> github:
<emilio> astearns: This was raised by scott a while back along with other issues
<emilio> ... he works on typetura which does a lot of fancy things with responsive typography
<emilio> ... and he'd like to do fancier things and helpfully filed a bunch of issues
<emilio> ... but they didn't get a lot of attention
<emilio> ... so I raised them to get some attention from the group
<Rossen_> q
<TabAtkins> q+
<chris> q+
<emilio> ... he wants to interpolate variable font settings that are numbers with e.g. viewport lengths
<emilio> ... can't use calc() because incompatible units
<chris> q-
<emilio> TabAtkins: it's perfectly fine to use calc(), you just need to divide the unit away
<emilio> ... unless there's something more subtle going on we should be fine on this issue
<Rossen_> ack TabAtkins
<chris> I was going to say the sam as tab
<emilio> astearns: there are some other subtleties, calc() might be limiting, but let's do this on the next issue
<chris> calc(19px/1px)
<fantasai> chris, wouldn't you just write 19 at that point?
<emilio> emilio: Tracking multiple units doesn't work, but dividing the same units and getting an integer possibly works already?
<chris> if you have some length and it happens to have px, you can convert it to number by dividing out the unit
<emilio> RESOLVED: No change, should work with already-in-the-spec calc() improvements
<chris> but what I put was a handy test

Copy link

@litherum @tabatkins Is there a link to the calc() changes? Very curious how this will work with CSS unit types.

Copy link

The relevant specification is CSS Values & Units 4. It is just a case of the implementations catching up to what is already specified.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
No open projects

No branches or pull requests

7 participants