Skip to content
Coding4GaiAmaOpen Source straight from the jungle

#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

CSS
: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 🤞

Discuss on Twitter
Share

Can Rau

Open Source & Rainforest Maintainer at GaiAma.org 🌴