Nice video from Kevin Powell. Here are some notes, thoughts, and stuff I learned while watching it. Right when they came out, I was mostly obsessed with
font-size usage, but they are just functions, so they can be used anywhere you’d use a number, like a length. … Read article “min(), max(), and clamp() are CSS magic!”
CSS doesn’t have
max-font-size, so if we need something that does something along those lines, we have to get tricky.
Why would you need it at all? Well,
font-size itself can be set in dynamic ways. For example,
font-size: 10vw;. That’s using “viewport units” to size the type, which will get larger and smaller with the size of the browser window. If we had
max-font-size, we could limit how big it gets (similarly the other direction with … Read article “How Do You Do max-font-size in CSS?”
Fluid typography is the idea that
font-size (and perhaps other attributes of type, like
line-height) change depending on the screen size (or perhaps container queries if we had them).
The core trickery comes from viewport units. You can literally set type in viewport units (e.g.
font-size: 4vw), but the fluctuations in size are so extreme that's usually undesirable. Let's look at a technique for tamping the extremes, but it basically a one-liner now that CSS is evolving!
A little while back, you might have bumped into this CSS-Tricks article where I described how a mixin can be used to automate responsive font sizes using RFS. In its latest version,
v9, RFS is capable of rescaling any value for value for any CSS property with
rem units, like
border-radius or even
box-shadow.… Read article “Using a PostCSS function to automate your responsive workflow”
Responsive Font Size (RFS) is an engine that automatically calculates and updates the
font-size property on elements based on the dimensions of the browser viewport.
If you’re thinking that sounds familiar, that’s because there is a slew of tools out there that offer various approaches for fluid typography. In fact, Chris compiled a bunch of those a little while back. Check that out because it’s always good to know what’s out there and what fits best for a particular task.… Read article “Using a Mixin to Take the Math out of Responsive Font Sizes”
The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between the two sizes. We had a jQuery solution for this in FitText (meant of headings, of course) until the
calc() function was shipped giving us a pure CSS solution.… Read article “Fun Tip: Use calc() to Change the Height of a Hero Component”
There are a number of ways to go about putting some text in a container and having it size itself to fill that container. There are different technologies we can use and different considerations to think about. Let us count the ways.… Read article “Fitting Text to a Container”
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 … Read article “Poly Fluid Sizing”