Fluidly Scaling Text

By using viewport units with font-size

by Simon Harte

HTML

<div class="wrapper">
  <span class="text">Scaling Text</span>
</div>

CSS

.wrapper {
  width: 30vw;
  border: 2px solid brown;
  background: beige;
  border-radius: 50%;
}
.text {
  display: block;
  font-size: 5vw;
  line-height: 0;
  padding: 50% 0;
  text-align: center;
}