<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]>      <html class="no-js"> <!--<![endif]-->

<div class="content">
  <h1>This is very large heading</h1>
  <h2>This is a large heading</h2>
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
    industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and
    scrambled it to make a type specimen book.
  </p>
</div>
html {
  font-size: 62.5%;
  box-sizing: border-box;
}
@function prefValue($minFontSize, $maxFontSize, $minWidth, $maxWidth) {
  $slope: (($maxFontSize - $minFontSize) / ($maxWidth - $minWidth));
  $yAxis: -$minWidth * $slope + $minFontSize;

  @return unquote(
    "clamp(" + $minFontSize + "rem, (" + $yAxis + "rem + " + ($slope * 1000) +
      "vw), " + $maxFontSize + "rem)"
  );
}
.content {
  margin: auto;
  text-align: center;
  padding: 2rem 2.4rem;
}

h1 {
  font-size: 2.4rem;
  //   font-size: clamp(2.8rem, 4vw , 6rem);
  font-size: prefValue(2.8, 6, 360, 960);
}

h2 {
  font-size: 1.8rem;
  //   font-size: clamp(2.2rem, 3vw, 4.8rem);
  font-size: prefValue(2.2, 4.8, 360, 960);
}

p {
  font-size: 1.4rem;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-size: prefValue(1.4, 2, 360, 960);
}

img {
  display: block;
  max-width: 100%;
  margin: auto;
  width: clamp(36rem, 100%, 72rem);
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.