Fluid Typography - html

Question

I'm trying to use fluid typography and the goal is to scale the text between screen sizes 300px and 1160px.
So at 1160px I want 56px H1 and mobile 30px.
The problem I'm having is the H1 increases in size past the 1160px and keeps increasing.
h1 {
font-size: calc(30px + (56 - 30) * ((100vw - 300px) / (1160 - 300)));
}
<H1>Fluid Typography</H1>

Answer 1

You need to limit fluid calculation of h1 between media queries. Try this:
h1 { font-size: 30px; }
#media (min-width: 300px) {
h1 {
font-size: calc(30px + (56 - 30) * ((100vw - 300px) / (1160 - 300)));
}
}
#media (min-width: 1160px) {
h1 {
font-size: 56px;
}
}
First, the minimum font-size needs to be provided: that's the first line. Then between two breakpoints you introduce fluid calculation which, at 300px gives exactly 30px of font-size, and again at 1160px calculates to exactly 56px. After 1160px you keep it at 56px again using media query. This way you have a graceful transition between static and fluid typography between the set breakpoints.
You can find more examples of this here:
https://www.madebymike.com.au/writing/fluid-type-calc-examples/
or here:
https://www.smashingmagazine.com/2016/05/fluid-typography/
Let me know if you need more examples, I've done a lot of these.

Answer 2

If you are using SCSS you can use the following Mixin:
https://gist.github.com/MColl92/3229098c32e20c1d5593865a7e3ea3da
$min_screen_width: 360px;
$max_screen_width: 1448px;
$min_font_size: 38px;
$max_font_size: 52px;
#mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
$u1: unit($min-vw);
$u2: unit($max-vw);
$u3: unit($min-font-size);
$u4: unit($max-font-size);
#if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
& {
font-size: $min-font-size;
#media screen and (min-width: $min-vw) {
font-size: calc(
#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)}*
((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)})
);
}
#media screen and (min-width: $max-vw) {
font-size: $max-font-size;
}
}
}
}
#function strip-unit($value) {
#return $value / ($value * 0 + 1);
}
To apply globally:
Define your minimum and maximum screen widths
Define your min and max font size for H1 element in px
Apply fluid-type mixin to root element (html or body selector).
Generate px to rem table from https://nekocalc.com/px-to-rem-converter.
(NOTE: you will need to set the root font size to you max_font_size when generating)
Assign REM values to font-size as required