[css-fonts-5][editorial] Add more meta text scale examples

[davidsgrogan]

Follow up to offline June 1 convo.

[davidsgrogan]

/cc @progers @JoshTumath

[progers]

What do you think of adding a comment and a little content, then showing an example of the content at 1.x, 2x, and 3.5x? This will encourage others to test large scales.

<meta name="viewport" content="width=device-width">
<meta name="text-scale" content="scale">
<style>
h1 {
  /*
    Multiply the 2em baseline by a dampening factor (between 1.0 to 0.5) to
    ensure headers scale up, but without getting too large. Here are the
    resulting font sizes at various text scale factors:
            h1      body
      1x    32px    16px
      1.5x  40px    24px
      2x    48px    32px
      3x    64px    48px
      3.5x  72px    56px
  */
  --dampen-factor: calc(0.5 + 0.5 / env(preferred-text-scale));
  font-size: calc(2em * var(--dampen-factor));
}
</style>
<h1>Header</h1>
This is some body text. The header grows slower than the body text.