This article has been imported from coding4.gaiama.org and is not necessarily up to date!

CSS-Only Fluid Typography

Update 2020-01-04 Currently not re-implemented after moving to Theme UI

Just came across this awesome piece of CSS by madebymike.com

:root {
  font-size: 0.875rem;
}

@media screen and (min-width: 20rem) {
  :root {
    font-size: calc(0.875rem + 0.5 * ((100vw - 20rem) / 60));
  }
}

@media screen and (min-width: 80rem) {
  :root {
    font-size: 1.1rem;
  }
}

Line 7 is where all the magic happens. 🦄
The rest ensure minimum and maximum sizes so it won't shrink or grow infinitely.

I'm using this exact piece of CSS on this page, so please let me know if you encounter any font-size related issues.
Hopefully you can read this note 🤞