Edit in JSFiddle

html {
  font-size: 16px;
  background-color: #d1e9ff;
}

#wrapper {
  display: inline-block;
  font-size: 6rem;
  line-height: 10rem;
}

#top {
  height: 6rem;
  line-height: 6rem;
  background-color: red;
  display: inline-block;
  vertical-align: top;
  font-size: 1rem;
}

#textTop {
  height: 6rem;
  line-height: 6rem;
  background-color: red;
  display: inline-block;
  vertical-align: text-top;
  font-size: 1rem;
}

#textBottom {
  height: 6rem;
  line-height: 6rem;
  background-color: red;
  display: inline-block;
  vertical-align: text-bottom;
  font-size: 1rem;
}

#bottom {
  height: 6rem;
  line-height: 6rem;
  background-color: red;
  display: inline-block;
  vertical-align: bottom;
  font-size: 1rem;
}

#middle {
  height: 1.875rem;
  line-height: 1.875rem;
  background-color: red;
  display: inline-block;
  vertical-align: middle;
  font-size: 1rem;
}

#lineHeight {
  background-color: green;
  display: inline-block;
  vertical-align: bottom;
  font-size: 1rem;
  overflow: hidden;
}
<div id="wrapper">
  <div id="lineHeight">LH</div>
  <div id="top">top</div>
  <div id="middle">middle</div>
  <span>ÄÂMofixj</span>
  <div id="textTop">text-top</div>
  <div id="textBottom">text-bottom</div>
  <div id="bottom">bottom</div>
  <div id="lineHeight">LH</div>
</div>
<p style="font-size:16px;">
  Schriftgrösse des HTML Elements ändern:
</p>
<div style="font-size:16px;">
  <input type="number" maxlength="2" id="size" style="width:30px;" /> Pixel&nbsp;
  <input type="button" onClick="changeSize();" value="Schriftgrösse ändern" />
</div>
function changeSize() {
  var baseSize;
  baseSize = document.getElementById("size").value + "px";
  document.documentElement.style.fontSize = baseSize;
}