Easy Responsive Headings using CSS Variables, VW, and Calc

Defining breakpoints and all that for headings can be quite time-consuming. As a lazy person, I’ve developed a way to get around this conundrum that’s just kind of a one-off for each website and then you never really need to touch heading sizes again:

You can replace h1, h2, h3, below with classes of course like .heading-one, .heading-two, .heading-three in case you only want to apply this to certain headings.

h1 { --multiplier: 1; }
h2 { --multiplier: 0.8; }
h3 { --multiplier: 0.5; }
h1, h2, h3 {
 --minfont: 26px;
 --vwmultiplier: 2.3;
 font-size:calc(calc(calc(1vw * var(--vwmultiplier)) * var(--multiplier)) + var(--minfont));
}
@media (min-width: 992px) {
 h1, h2, h3 {
 font-size:calc(calc(calc(var(--vwmultiplier) * 9.92px) * var(--multiplier)) + var(--minfont));
 }
}

This takes advantage of vw (viewport width) as a means to determine font size responsively. If we used vw alone (for example set h1 to 2vw), then the size would be responsive, but we would encounter two problems.

1. The font will get super tiny when the window gets small.
2. The font will get super big when the window gets big.

So we need to use some fancy math to deal with this. It looks kind of complicated but it’s actually pretty simple. First, we have our minfont variable, which defines the smallest we want any heading to get.