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; }

--

--

Sharing my experience of web design with the world. petermakeswebsites.co.uk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store