Container queries & typography | Robin Rendle

I've been saying for a couple of years that we are on the brink of a "fluid design" revolution in front-end development, similar to what happened around the late 2000s with "responsive design". Container queries are a key part of that puzzle, and Robin's example here of using a combination of fluid type (via clamp()) and container queries is precisely the kind of pattern I've been thinking about. Plus, I love seeing a solid example for the new cqw unit. (Though a standard accessibility disclaimer around fluid type and how that interacts with page and text zoom.)

It's so cool to see these patterns slowly becoming a possibility 🙌

Example code:

p {
  font-size: clamp(1rem, 2.5cqw, 2rem);
  line-height: clamp(1.35rem, 3.5cqw, 1.9rem);
}

On why container sizes (and viewport sizes) can have an outsized impact on typography:

This is because in typography the font-size, the line-height, and the measure (the width of the text) are all linked together. If you change one of these variables, you likely have to change the others in response.

Explore Other Notes

Newer

Optimising LCP

Harry has created an absolutely phenomenal talk here that provides an immense amount of depth whilst still being completely accessible to someone like me who largely doesn't deal with the technical […]

Older

Stop using JavaScript objects

Theo has some really interesting videos, but the more I dig into the archive the more I find little gems like this. It's the definition of a quick tip, and it helps explain Maps and Sets in […]
  • I've been saying for a couple of years that we are on the brink of a "fluid design" revolution in front-end development, similar to what happened around the late 2000s with "responsive design". […]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.