An Archeology for the Future in Space
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!)
Link tags: type
347
Utopian project kickstarter — Figma
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.
The Demo → Demo Loop - daverupert.com
I’m 100% convinced that working demo-to-demo is the secret formula to making successful creative products.
Bjørn Karmann › Occlusion Grotesque
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.
Paper Prototype CSS
A stylesheet to imitate paper—perfect for low-fidelity prototypes that you want to test.
What serif typeface would go well with Proxima Nova?
Mark Simonson goes into the details of his lovely new typeface Proxima Sera.
Min-Max-Value Interpolation
Here’s a really nice little tool inspired by Utopia for generating one-off clamp() values for fluid type or spacing.
Roboto … But Make It Flex - Material Design
This version of Roboto from Font Bureau is a very variable font indeed.
Tim Brown: CSS forces
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.
Fluid Type Scale - Generate responsive font-size variables
This is kind of a Utopia lite: pop in your minimum and maximum font sizes along with a modular scale and it spits out some custom properties for clamp() declarations.
Contextual Spacing For Intrinsic Web Design | Modern CSS Solutions
To complement her talk at Beyond Tellerrand, Stephanie goes through some of the powerful CSS features that enable intrinsic web design. These are all great tools for the declarative design approach I was talking about:
Be the browser’s mentor, not its micromanager. - Build Excellent Websites
This one-page site that Andy has made to illustrate his talk at All Day Hey is exactly what I was talking about with declarative design.
Give the browser some solid rules and hints, then let it make the right decisions for the people that visit it, based on their device, connection quality and capabilities. This is how they will get a genuinely great user experience, rather than a fragmented, broken one.
Thoughts on Exerting Control With Media Queries - Jim Nielsen’s Blog
Some thoughts on CSS, media queries, and fluid type prompted by Utopia:
We say CSS is “declarative”, but the more and more I write breakpoints to accommodate all the different ways a design can change across the viewport spectrum, the more I feel like I’m writing imperative code. At what quantity does a set of declarative rules begin to look like imperative instructions?
In contrast, one of the principles of Utopia is to be declarative and “describe what is to be done rather than command how to do it”. This approach declares a set of rules such that you could pick any viewport width and, using a formula, derive what the type size and spacing would be at that size.
Utopia - an introduction - YouTube
James and Trys have made this terrific explanatory video about Utopia. They pack a lot into less than twenty minutes but it’s all very clearly and methodically explained.
February’s Font of the Month: Warbler Text | David Jonathan Ross
A lovely font based on the Bulmer typeface.
Fluid type sizes and spacing — Piper Haywood
Prompted by Utopia, Piper shares her methodology for fluid type in Sass.
The computer built to last 50 years | ploum.net
A fascinating look at what it might take to create a truly sunstainable long-term computer.
Manrope – free sans-serif variable font
This font is a crossover of different font types: it is semi-condensed, semi-rounded, semi-geometric, semi-din, semi-grotesque. It employs minimal stoke thickness variations and a semi-closed aperture.
Seb Lester’s Favorite Fonts
Seb picks his top ten typefaces inspired by calligraphy.
Build a Better Mobile Input
This is such a handy tool for building forms! Choose different combinations of type, inputmode, and autocomplete attributes on input elements and see how that will be conveyed to users on iOS and Android devices.