I’ve been thinking about font sizes that scale responsively. We already know how to do this pretty handily to elements & containers and images using width and rems or percentages or vh/vw units. Today, I learned that the term for this is fluid typography. I saw some crazy formulas, but also a nice, easy one that just uses a base rem and adds a vw number to it. Here they are, with some videos I watched:

The easy way:

font-size: calc(.9rem + 1vw);

This basically just sets the font-size of an element to a fraction of a rem (a rem generally starts at 16px, which is the default size of a character in most browsers) and adds a percentage to the size using view width. So, in the example above, our font starts with a base size of .9rem (slightly less than a default of 1rem) and adds a percent of the screen’s width to it.

I’m sure we can set breakpoints with a specific minimum font-size and a specific maximum font-size to make sure that text never shrinks or grows past a certain amount, to ensure readability. There are some functions like clamp, and some other formulas that can handle this as well, but I don’t know if clamp is fully-supported across all browsers yet, and I tend to prefer simple solutions over complex formulas.

The harder way:

I haven’t tried these formulas yet, but perusing YouTube contents left me with this example:

body { font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300))); }

A commentor in that thread explained it like this: This formula is for fluid typography – basically it’s a better alternative to the media query breakpoint method (the text will change size fluidly from 14 to 26 px on windows between 300 and 1600 px width)

In a different video, someone else shared the following formula, which is what the above example uses:

font-size: calc(min-font-size + (max-font-size - min-font-size) * (100vw - min-screen-size) / (max-screen-size - min-screen-size));

I might have used something like this in a project sometime in the past year-and-a-half, but I didn’t understand the formula than.

Using only vw

This was the first video I watched, which only uses vw, with no base to add it to. My concern with this is that there’s no default/starting size. Its always a percentage of the screen width, which makes me worry about the text being illegible on really small screens because there’s no forced minimum. Like the first example, up top, we can use breakpoints to set a min and max font-size, but I worry about all of the in-betweens.

CSS-Tricks

CSS-Tricks also had an article exploring it. I’ll look into this further at some point.

• CSS-Tricks: Fluid Typography