Preventing too-short final lines of blocks | Clagnut by Richard Rutter
Check out the demo that Rich has put together to go with Amelia’s proposed syntax.
Check out the demo that Rich has put together to go with Amelia’s proposed syntax.
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.
Rich explains what text-wrap:balance
does …and what it doesn’t.
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.
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 like this approach to offering a design system. It seems less prescriptive than many:
Designed not as a rule set, but rather a toolbox, the Data Design Language includes a chart library, design guidelines, colour and typographic style specifications with usability guidance for internationalization (i18n) and accessibility (a11y), all reflecting our data design principles.
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.
Cardigans are not entirely necessary for a show or a film to fit within the Cardigan sci-fi subgenre (although they certainly help). It’s the lack of polish in the world, it’s the absence of technological fetishism in the science fiction itself. The science or the tools or the spaceships do not sit at the heart of Cardigan sci-fi — it’s all about the people that wear the cardigans instead.
Mark Simonson goes into the details of his lovely new typeface Proxima Sera.
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.
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.
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.
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.
A lovely font based on the Bulmer typeface.