<div class="box">
  <p class="text">
    あのイーハトーヴォのすきとほった風、<br>
    夏でも底に冷たさをもつ青いそら、<br>
    うつくしい森で飾られたモーリオ市、<br>
    郊外のぎらぎらひかる草の波
  </p>
</div>
.box {
  border: 1px solid gray;
  padding: 20px;
  width: fit-content;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .box:after {
    content: 'ウインドウサイズ:768px以上';
  }
}

.text {
  font-size: clamp(14px, calc(100vw * 16 / 375), 20px);
}

@media (min-width: 768px) {
  .text {
    font-size: min(calc(100vw * 24 / 768), 32px);
  }
}
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.