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.
It’s worth looking at our more recent post Simplified Fluid Typography for practical, clamped, viewport-based type sizing.
I’m really digging this technique but I do think (like a lot of stuff on the web) you need to be careful with it. I’ve seen a couple examples of people implementing fluid type without capping the size which can make stuff waaaay too big. The end result is a great line length in terms of character count but bad readability due to viewing distance (personally I think anything over 30px for body copy feels weird and hard to read from about a foot away).
For large format displays like digital Kiosks and living room televisions, being generous with the scaling maximum could be the solve for adequately supporting oversized text in these contexts.
But even for 4k monitors used on systems with little or no UI scaling enabled, I find text difficult to read on certain sites because the type is too small.
Curious to look into how fluid type can address pixel density in addition to viewport size.
@chris coyier, this might be an opportunity for expanding the UX data from your screensize analytics post :) https://css-tricks.com/google-analytics-can-show-screen-resolution-%E2%89%A0-browser-window/
I just use VW units (viewport width) and a media query for small screens
Might as well say goodbye to zooming. Please read this.
Maybe, because I’m a newbie in coding, but for me ’em’ doesn’t work at all, as I try to build semantic code with sectioning and sometimes I nest in it three / four aria-hidden h1, only. Also, ‘vh’ and ‘vw’ aren’t perfect as not sensitive to zoom. At present time, I’m still looking for the best adaptive solutions for my first web pages and try to experiment with instaling vmin, vmax based on media queries for font-size in body tag and ‘rem’ for headings. Thank you, Chris for this post. Hope to read also more comments based on different experiences and ideas from your prof readers.