css responsive fluid html font size based on rem - html

Question

I want to implement the example from css-tricks based on rems. This is what I got so far. However, the scaling does not work as intended, and the font size increases only tiny amounts. What is the mistake?
html {
font-size: 1rem;
}
#media screen and (min-width: 320px) {
html {
font-size: calc(1rem + 2 * ((100vw - 20rem) / 680));
}
}
#media screen and (min-width: 1000px) {
html {
font-size: 3rem;
}
}
I assume that 2 * ((100vw - 20rem) / 680) returns a px value. If that's true. How can I change it to return rem instead?
Edited to add some clarifications:
I want to use rem instead of px because this allows the user to overwrite the default font size in the browser.
The term 2 * ((100vw - 20rem) / 680) is between 0 and 2 (1 rem equals 16px on normal font size). This is what I want to achieve. I want to have font-size: 1rem + [0, 2]rem between 320 and 1000px viewport width. A linearly increasing rem function based on the viewport width.
Here is a link to a sandbox example.
Edit 2:
I think what I want to achieve is not possible. If the user increases the default font size by 50%, I want the scaling factor also increase by 50%: font-size: 1rem + [0, 2 * 1.5]rem.
The current problem is that the part 2 * ((100vw - 20rem) / 680)) needs to be rem based. This is not possible because there is no way in CSS to strip the unit. If I could strip the unit, I could do this: 2rem * strip-unit((100vw - 20rem) / 680))

Answer 1

If you want a responsive font size then you can use View Width too, no need to use calc or rem for that.
Just change this so you can try it out:
HTML {
font-size: 5vw;
}
View width goes from 0 to 100 so you know how much room you have to work with.
edit: I personally haven't found out how to scale on both axis yet but just the X-axis works good enough in most cases.

Answer 2

Here is a solution for fluid fonts I got from Creating a Fluid Type Scale with CSS Clamp
After some tweaking I ended up with the following Sass code to generate the clamp function.
/*
From https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/
Generates the css clamp function.
Focused on font-size, but may be used for margins and padding
Usage:
clamped(min-size-px, max-size-px, min-browser-width-px, max-browser-width-px)
font-size: clamped(26px, 36px, 600px, 1200px);
font-size: clamped(26px, 36px); //using width default values
Output:
font-size: clamp(1.63rem, 1.11vw + 1.28rem, 2.25rem);
*/
#use "sass:math";
#use "sass:map";
// Default min-mix browser width values for clamped function
$default-min-bp: 500px;
$default-max-bp: 1400px;
// Convert pixels to rems.
#function to-rems($px) {
$rems: math.div($px, 16px) * 1rem;
#return $rems;
}
//round a to number of decimal places.
#function rnd($number, $places: 0) {
$n: 1;
#if $places > 0 {
#for $i from 1 through $places {
$n: $n * 10;
}
}
#return math.div(math.round($number * $n), $n);
}
// Generate css for clamp
#function clamped($min-px, $max-px, $min-bp: $default-min-bp, $max-bp: $default-max-bp) {
$slope: math.div($max-px - $min-px, $max-bp - $min-bp);
$slope-vw: rnd($slope * 100, 2);
$intercept-rems: rnd(to-rems($min-px - $slope * $min-bp), 2);
$min-rems: rnd(to-rems($min-px), 2);
$max-rems: rnd(to-rems($max-px), 2);
#return clamp(#{$min-rems}, #{$slope-vw}vw + #{$intercept-rems}, #{$max-rems});
}