Poly Fluid Sizing

Avatar of Chris Coyier
Chris Coyier on (Updated on )

Grow sales with Customer Journey Smarts Mailchimp tracking pixel

Fluid typography is pretty amazing. We have a writeup of how it all works. But as fancy as that is, it’s still scaling the type linearly. What if we wanted the type size to fall along a curve? The math gets a bunch more complicated, but it’s possible.

Jake Wilson digs in, and while he finds that calc() isn’t quite up for the job (e.g. font-size: calc(3vw * 3vw); /* This doesn't work in CSS */), he does land on a technique he’s calling Poly Fluid Sizing, which takes a map of breakpoints and font sizes and linear interpolates them just about as good (*it depends*).

UPDATE: This used to be a link post, but Jake’s original post on Medium has been taken down pending some kind of author investigation apparently. We’ve got lots of coverage about fluid type though for you to explore.