3

I would like to know if there is a CSS command allowing to increase the font size when the viewport width becomes smaller (like a reverse clamp method). In fact, I want to do the opposite of what clamp does (as the first entry is the MIN value). I searched on internet without success. Thank you in advance for your feedback.

Dhalsim
  • 31
  • 1

1 Answers1

4

You can use calc to subtract from a font-size based on the width of the viewport which will give you the inverted scaling you desire.

You can then still use clamp as desired with a min/max value.

Run the snippet below as full page.

h1 {
 font-size: clamp(10px, calc(100px - 5vw), 100px); 
}
<h1>Heading 1</h1>
cam
  • 3,179
  • 1
  • 12
  • 15