# 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:; }h1, h2, h3 {0.5

--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) *) * var(--multiplier)) + var(--minfont));9.92px

}

}

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.

- The font will get super tiny when the window gets small.
- 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.