Responsive Letter Spacing – Cloud Four
Another clever use of clamp() and calc() for web typography, but this time it’s adjusting letter-spacing.
Let’s Talk Solar | LOGO24
Here’s a really useful case study for anyone who wants to do “guerrilla” responsive design: when you’re handed a fixed-width mockup but you know that responsive is the way to go:
I started by styling up every element, without layout. The result was a fully elastic layout that effectively served as a mobile, or small screen, layout, which just needed some tweaking of horizontal spacing.
Bingo! And this approach had knock-on benefits as it “supported writing component-based, or modular, CSS”.
Related links
An Interactive Guide to CSS Container Queries
Another terrific interactive tutorial from Ahmad, this time on container queries.
Retrofitting fluid typography | Clagnut by Richard Rutter
Here’s a taste of what Rich will be delivering at Patterns Day on Thursday—can’t wait!
Getting started with CSS container queries | MDN Blog
Michelle has written a detailed practical guide to container queries here.
Related posts
Media queries with display-mode
I never would’ve known about the `display-mode` media feature if I hadn’t been writing about it.
Utopia
Why do I like fluid responsive typography? Let me count the ways…
Building the dConstruct 2015 site
Hats off to Graham.
Pattern sharing
The front-end style guide for Code for America.
A Gov Supreme
A big, big gov.