Rusty Locks Notes 2023

#Link |  Responsive type scales

This CSS calculation to create responsive type size by Tobias Ahlin is somewhat the sickest I’ve ever seen …

.container-adaptive {  
  --font-size: calc(var(--min-size) * 1px + (var(--max-size) - var(--min-size)) * (100cqw - var(--container-min) * 1px) / (var(--container-max) - var(--container-min)));
  font-size: clamp(var(--min-size) * 1px, var(--font-size), var(--max-size) * 1px);  

… but works great. It would only be nice if it were simpler.

#css #responsive #type


You can interact with this note (applause, criticism, whatever) by mention it in one of your posts or by replying to its syndication on Mastodon, which will be shown here as a Webmention .

In case your blog software can't send Webmentions, you can use this form:


No Webmentions yet...