So then the question becomes: how do you most effectively communicate designs, to facilitate the best discussions about those designs? My answer is: lots of little prototypes built with HTML, CSS, and JavaScript.
This is handy—a collection of font stacks using system fonts. You can see which ones are currently installed on your machine too.
The most performant web font is no web font.
This is a terrific walkthrough from Andy showing how smart fundamentals in your CSS can give you a beautiful readable document without much work.
I feel like we need a name for this era, when CSS started getting real good.
I think this is what I’ve been calling declarative design.
Like a little mini Utopia:
Handy little tool for calculating viewport-based clamped values.
For 24 days this month, Matthias featured a different independent type foundry, writing about each one and selecting some lovely examplars of their typefaces.
Two new lovely open source variable fonts from Github.
James describes his process for designing fluid grid layouts, which very much involves working with the grain of the web but against the grain of our design tools:
In 2022 our design tools are still based around fixed-size artboards, while we’re trying to design products which scale gracefully to suit any screen.
Trys has written up how he made that nifty little resizing widget on the Utopia homepage.
A whole lotta nice fonts—most of them variable fonts—from Indian Type Foundry.
A drop-in replacement for Google Fonts without the tracking …but really, you should be self-hosting your font files.
I really enjoyed this deep dive into some design fiction work done by Fabien Girardin, Simone Rebaudengo, and Fred Scharmen.
(Remember when Simone spoke at dConstruct about toasters? That was great!)
Do you like the ideas behind Utopia? Do you use Figma?
If the answer to both those questions is “yes”, then James has made a very handy Figma community file for you:
This work-in-progress is intended as a starting point for designers to start exploring the Utopia approach, thinking about type and space in fluid scales rather than device-based breakpoints.
I’m 100% convinced that working demo-to-demo is the secret formula to making successful creative products.
A typeface co-designed with a tree over the course of five years.
Yes, a tree.
Occlusion Grotesque is an experimental typeface that is carved into the bark of a tree. As the tree grows, it deforms the letters and outputs new design variations, that are captured annually.
A stylesheet to imitate paper—perfect for low-fidelity prototypes that you want to test.
Mark Simonson goes into the details of his lovely new typeface Proxima Sera.
Here’s a really nice little tool inspired by Utopia for generating one-off clamp() values for fluid type or spacing.
This version of Roboto from Font Bureau is a very variable font indeed.
Some interesting thoughts from Tim here. What if CSS could “displace” design decisions from one area to another?
For example, a flexible line spacing value in one container could influence margins that surround the text block. That change in spaciousness may mean that nearby headings need size or spacing adjustments to stay feeling connected.
This feels like the complete opposite way that most people approach design systems—modular, componentised, and discrete—but very in-line with the way that CSS has been designed—interconnected, relational and cascading.