<div>Resize the browser window to see the text size change in response.</div>
  
<h1>The Knightes Tale</h1>

<p>Whylom, as olde stories tellen us,
Ther was a duk that highte Theseus;
Of Athenes he was lord and governour,
And in his tyme swich a conquerour,
That gretter was ther noon under the sonne.
Ful many a riche contree hadde he wonne;
What with his wisdom and his chivalrye,
He conquered al the regne of Femenye,
That whylom was y-cleped Scithia;
And weddede the quene Ipolita,
And broghte hir hoom with him in his contree
With muchel glorie and greet solempnitee,
And eek hir yonge suster Emelye.
And thus with victorie and with melodye
Lete I this noble duk to Athenes ryde,
And al his hoost, in armes, him bisyde.</p>

<p>Text from Geoffrey Chaucer's <i>The Canterbury Tales</i></p>

@import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700");

:root {
  font: normal 100% / 1.5 Lora, serif;
  background: #fff;
  color: #000;
}

body {
  font-size: 1rem;
  max-width: 60vw;
  margin: auto;
}

* {
  margin-block: 0 4vb;
}

div {
  background: #fc0;
  font-size: clamp(1em, 3dvw ,1.3em);
  padding-inline: 1rem;
}

h1 {
  font-size: clamp(2em, 8dvw, 12.5rem);
  line-height: 1.2;
}

p {
  font-size: clamp(1em, 2dvw, 4rem);
  white-space: pre-line;
}