Responsive Typography sizing off when using REMs

[ekfuhrmann]

I understand the issue, but am unsure of how to resolve it short of switching to a different, more absolute value (px).

The issue is that I change the base font size across my site by doing the following:

html {
  font-size: 62.5%; // Scales 1 rem unit to 10px
}

The responsive typography calc seems to not account for this global font-size change causing it to jump when hitting the min/max value.

I can work around this by using px values for responsive text, but it would be nice if there was some way to be able to have smooth responsive typography while using rems on a site that modifies the base font-size.

For reference, here is a code example of responsive typography working and not working:

// Does NOT Scale Correctly
h1 {
    font-size: responsive 4rem 6.8rem;
    font-range: 420px 1280px;
}

// Scales Correctly
h1 {
    font-size: responsive 40px 68px;
    font-range: 420px 1280px;
}