{"id":10250,"date":"2026-06-29T11:00:50","date_gmt":"2026-06-29T16:00:50","guid":{"rendered":"https:\/\/master.dev\/blog\/?p=10250"},"modified":"2026-06-29T11:00:51","modified_gmt":"2026-06-29T16:00:51","slug":"fluid-typography-with-progress","status":"publish","type":"post","link":"https:\/\/master.dev\/blog\/fluid-typography-with-progress\/","title":{"rendered":"Fluid Typography with progress()"},"content":{"rendered":"\n
\n

Never do pixel math with em and rem units. That\u2019s where we went wrong, by assuming that 16px == 1em is a reliable fact.<\/p>\nMiriam Suzanne, Reimagining Fluid Typography<\/em><\/a><\/cite><\/blockquote>\n\n\n\n

Fluid typography has been around for a while. These days, most people reach for clamp()<\/code> with pre-calculated values from tools like Utopia<\/a>, Fluid Type Scale<\/a>, or Sass. It\u2019s modern, concise, and super easy to use.<\/p>\n\n\n\n

You\u2019ve probably used a similar calculator before. You input two sizes and their corresponding breakpoints, and it generates a value that fluidly scales between them.<\/p>\n\n\n\n

Usually, we input these numbers as pixels, and most good calculators will convert the font size to rems. That\u2019s part of the appeal.<\/p>\n\n\n\n

But you might not have realized that your thoughtfully chosen breakpoints have also been converted to rems and are now subject to the user\u2019s default font size.<\/p>\n\n\n\n

In practice, this means your breakpoints can be wildly different from what you imagined, and we can accidentally disregard the user\u2019s font size choices in the process.<\/p>\n\n\n\n

We’ll explore why this happens and how we can solve it with modern CSS, using range mapping to calculate everything in the browser.<\/p>\n\n\n\n

Before we dive in, a quick heads-up: this technique is more complex than you might be used to, but it\u2019s easy to reuse thanks to custom properties, and future CSS will make it much more concise.<\/p>\n\n\n\n

A Problem with Fluid Typography<\/strong><\/h2>\n\n\n\n

Let\u2019s say you\u2019ve set up some fluid type with these inputs:<\/p>\n\n\n\n

Viewport<\/strong><\/td>Font Size<\/strong><\/td><\/tr>
600px<\/td>12px<\/td><\/tr>
1200px<\/td>32px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

A calculator will then helpfully convert those values to rem units behind the scenes:<\/p>\n\n\n\n

Viewport<\/strong><\/td>Font Size<\/strong><\/td><\/tr>
37.5rem<\/td>0.75rem<\/td><\/tr>
75rem<\/td>2rem<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

Now, imagine a user with a 1200px<\/strong> wide screen and the default root font size of 16px<\/strong>. At 2rem, the font size is 32px, exactly what we expected.<\/p>\n\n\n\n

But what if that user increases their base font size to 32px<\/strong>?<\/p>\n\n\n\n

Everything is still in rems, but now 1rem = 32px. So:<\/p>\n\n\n\n

Viewport<\/strong><\/td>Font Size<\/strong><\/td><\/tr>
1200px<\/td>24px<\/td><\/tr>
2400px<\/td>64px<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

At the same 1200px viewport, the font size is now only 24px<\/strong>.<\/p>\n\n\n\n

Despite the viewport not changing and the user increasing their font size, our fluid type has shrunk, working directly against the user\u2019s preference.<\/p>\n\n\n\n

While this is an extreme case, any pre-calculated fluid value experiences this issue to some degree.<\/p>\n\n\n\n

So how do we fix it?<\/p>\n\n\n\n

We need to bring the calculations back into CSS and mix our units, combining the accuracy of pixel-based breakpoints with the accessibility of rem-based font sizes.<\/p>\n\n\n\n

There are several ways to perform these calculations, but range mapping stands out as a method especially well suited to CSS. It\u2019s particularly appealing because it aligns with emerging CSS features like progress()<\/code> and calc-mix()<\/code>, which will simplify these calculations in the future.<\/p>\n\n\n\n

While this is closely related to the similar problem of ensuring fluid type can be zoomed to 200% of its original size, it is unfortunately not addressed by this technique and will still require manual testing.<\/p>\n\n\n\n

Range Mapping<\/strong><\/h2>\n\n\n\n

Range mapping is the process of converting a value from one range to another while preserving its relative position. For fluid typography, we want to take the current viewport width and calculate the corresponding value in our output range.<\/p>\n\n\n\n

In this demo, you\u2019ll see that for any value in either range, there is a corresponding value in the other:<\/p>\n\n\n\n