Responsive type scales with composable CSS utilities

It's probably easier to express this sort of scale as a linear function y = mx + b, where y is the font size and x is the screen size. If you have:

  minFont = 12
  maxFont = 18
  minScreen = 320
  maxScreen = 2400

Then you calculate the slope (m) using the ol' (y - y) / (x - x):

  m = (maxFont - minFont) / (maxScreen - minScreen)

Then plug one of the (font, screen) pairs into the equation and solve for b. Use that as --linear-font-size.

Once you have the linear equation for your font size, you use clamp() to bound the screen size between the min and max that you set before.

  font-size: clamp(var(--minScreen), var(--linear-font-size), var(--maxScreen))

I think this basically has the same effect as the blog post produces, but it fits in my head better when the dynamic part is expressed as the equation for a line.

I appreciate how the author has laid out how the calculation works and the pitfalls of CSS calc. It makes it very approachable for folks.

Has anyone seen a responsive type solution like this that doesn't break the "resize text" accessibility section of WCAG? [0] I would love to be able to use this style of responsiveness, but every time I've ever seen it there's always accessibility concerns or a piece of a blog post dedicated to how you'll still need to tweak and fine tune to meet the needs of less sighted users so it isn't the silver bullet it seems.

For instance on this blog post when zooming in on the example section, my naked eye feels like I never see it actually grow to 200% bigger. I'm on my gaming PC which isn't set up well for much code inspection, but it feels like it's either not growing at all or clamped at a certain size based on the zoom's width. Looking at dev tools, it shows it going from 28px to 18px, so it technically is getting a little smaller, whereas if you have 2rem you see the text grow as you zoom in.

I also could be completely misinterpreting this WCAG section or maybe misunderstanding the font size calculation. It is college football Saturday here in the US, so my brain may not be firing on all cylinders!

[0] https://wcag.com/designers/1-4-4-resize-text

I have been using this approach and happy with it. It’s similar I think? I just don’t need tailwind for the puny websites I cobble together.

Andy Bell – Be the browser’s mentor, not its micromanager

https://m.youtube.com/watch?v=5uhIiI9Ld5M

Btw. Great website and articles. Thank you for posting.

It would be nice to have this as a tailwind class.