<h1><span>Example heading</span> sized with the clamp() function!</h1>

<p>This lets you set a <code>min</code>imum font-size, and ideal font-size, and a <code>max</code>imum font-size.</p>

<p><mark>Resize the viewport</mark> to see how it adjusts it's size.</p>

h1 {            /*-- stay in here! --*/
  font-size: clamp(30px, 10vw, 60px);
                /* min    ?    max */


We haven't seen this middle number explained very well.

So, we just play with it until id "works."You can also play with vmin unit - which will be whatever is smaller: width or height of the viewport 

Here's a detailed post


html {
  background-color: #faf1e2;

h1 span {
  font-family: 'Helvetica', sans-serif;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.