📝 This Week in Web Design and Development

View this newsletter on the web.

Earlier this week Amelia Wattenberger wrote a fantastic piece all about the CSS cascade and how complex this stuff can get. What I particularly like about this post is how interactive it is—Amelia writes about a specific part of the cascade and then offers a quiz at the end of each section. Actually fun and engaging quizzes!

Here’s the beautifully designed blog post:

There was one answer that I got wrong here too so I’m certainly glad that I read through the whole piece. Try it for yourself!

📝 This Week in Web Design and Development

View this newsletter on the web.

To kick things off this week, here’s a beautiful website all about a new typeface for coding called Recursive Sans and Mono. The nifty thing about this typeface is that it’s also a rather intricately made variable font, which means that it has a ton of customizable options to best suit our needs.

So effectively this is actually two separate typefaces in one font file. That means you can animate between the two easily if needs be! In the type specimen website there’s a great example of how to switch between these different options, or “axes”, with the CSS font-variation-settings property:

What does this mean? Well, it means we have all this control now that was previously impossible, we can maybe have more performant sites since we don’t need to download multiple resources, and we can animate text like so:

The example on the left is of a regular spaced font that’s switching between regular and bold, but the example on the right shows how since Recursive is a monospaced variable font there’s no need for that jarrring text jump. Interesting stuff!