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

CSS-Only Fluid Typography

Published: 
Last updated: 

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 🤞

Can Rau
Can Rau

Doing web-development since around 2000, building my digital garden with a mix of back-to-the-roots-use-the-platform and modern edge-rendered-client-side-magic tech 📻🚀

Living and working in Cusco, Perú 🦙