<p>(You'll need to resize the screen horizontally)</p>

<!-- note CSS is reset -->
<h1>Example clamp() text with 10vh for value</h1>

<h2>Example clamp() text with vh + v2 = average... </h2>

<h2>Example clamp() text with vmin... </h2>

<p>These 2 ^ will pay attention to the viewport height too... for short situations </p>

// https://developer.mozilla.org/en-US/docs/Web/CSS/clamp

h1 {
	// clamp(MIN, VAL, MAX)
	font-size: clamp(18px, 10vw, 70px);
}

h2 {
	// clamp(MIN, VAL, MAX)
	font-size: clamp(18px, calc(10vw + 10vh)/2, 70px);
}

h3 {
	// clamp(MIN, VAL, MAX)
	font-size: clamp(18px, 10vmin, 70px);
}






























body {
	padding: 20px;
}


h1, h2, h3, p {
	margin-top: 10vh;
}

h1, h2, h3{
	font-family: Sans-serif;
	font-weight: 700;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.