That Fluid Type Stuff Again
There have been a couple of articles lately regarding fluid type.
Matt Smith (calling it “flexible type”):
My preferred approach for more flexible type is to calculate the font size based on the viewport height and width using the
:rootselector
Richard Rutter (calling it “Responsive Display Text”):
In one fell swoop you can set the size of a display heading to be proportional to the screen or browser width, rather than choosing from a scale in a series of media queries.
Both are all about leveraging viewport units to size type that doesn’t jump from size to size at breakpoints, but gracefully scales.
I’d highly recommend checking out Mike Riethmuller’s Fluid type though, which is nearly just as simple but allows for setting minimum and maximum sizes, which feels like the way to go for me.
I moved to fluid type on CodePen blogs recently and I love it. Notice we also stole Mike’s fluid modular scale as well. As in, on large screens, the size difference between h1-h6 is more dramatic, while on small screens that scales back, all fluidly.
“Fluid Type” i?n?s?p?i?r?e?d? stolen from @MikeRiethmuller now live on @CodePen blogs. Including “Fluid Modular Scale!” pic.twitter.com/0yJk8Iq8fR
— Chris Coyier (@chriscoyier) October 27, 2016
A “CSS lock” is how Tim Brown calls those minimums and maximums, and he demonstrates it can be useful for line-height as well as font-size.
That Fluid Type Stuff Again is a post from CSS-Tricks
