<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
https://blog.bitsrc.io/css-clamp-the-responsive-combination-weve-all-been-waiting-for-f1ce1981ea6e

*/











































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.