#112 - Goal Dilution

Hey everyone,

Welcome to issue #112, where I share a round up of useful links in the realm of design, code and typography.

This week I’ve been working on a new approach to responsive navigation. The technique combines CSS Grid template areas and media queries to adapt layout at different screen sizes, meaning you can write cleaner, more accessible HTML. I plan on writing this up soon, but in the meantime I’ve include a fantastic talk on CSS Grid by Andy Clarke and an equally impressive article by Rachel Andrew, which looks at using grid template areas to create editorial layouts.

On another note, I’m tearing through Human Universe by Brian Cox and Andrew Cohen. What a book! Think Sapiens, with a lot more Space. So I’ll begin this week with a few words from the book that made me stop and think for a moment.

Thought provoking #

“By focusing on tiny but interesting things with honesty and clarity, great and profound discoveries are made” Brian Cox in Human Universe.

Goal Dilution explains the way we perceive the quality of products or services. The more singular something is in its purpose, the more effective we believe it is.

Design and Code #

Editorial Design Patterns With CSS Grid And Named Columns. By naming lines when setting up our CSS Grid layouts, we can tap into some interesting and useful features of Grid — features that become even more powerful when we introduce subgrids.

Space, Grids, and Layouts. Elliot Dahl on composing spatial design systems.

Smart animation has arrived in Figma, but what can you actually do with it? This 5 Minute animation by Pavel Ryaposov should give you an idea.

Complete into to Netlify in 3.5 hours from Shawn Swyx Wang. Everything you can possibly want to know about Netlify and how its various products and features can link together to create a full JAMstack app.

Powerful New CSS for Styling Bullets, Numbers, and List Markers. Miriam Suzanne demonstrated what’s possible with the new ::marker pseudo element.

Creating a custom focus style. Zell Liew with more tips on creating custom focus styles.

Typography #

Reviving a blackletter font from a museum’s archive. Printing museum Pavillon-Presse in Weimar (Germany) revive a forgotten German blackletter font from 1916, by the type foundry of Julius Klinkhardt.

A tiny guide to variable color fonts. Arthur Reinders Folmer explores what’s seemingly endless possibilities of font interpolation.

Questions asked by parents whilst watching type designer Jonathan Hoefler’s Abstract episode. A fun experiment by the editors at Eye on Design.

Something to watch #

Andy Clarke - Inspired by CSS Grid. How compound grids, modular grids, and skinny columns will change the way you think about layout on the web.

Reply by email

Monthly Newsletter

Once a month I curate a newletter for designers and developers interested in static sites, CSS and web performance. Check out past issues to get an idea.