Link tags: type



Design notes on the 2023 Wikipedia redesign

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.

Modern Font Stacks

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.

Some simple ways to make content look good - Set Studio

This is a terrific walkthrough from Andy showing how smart fundamentals in your CSS can give you a beautiful readable document without much work.

Container Queries and Typography

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.

clamp() Calculator · Chris Burnell

Like a little mini Utopia:

Handy little tool for calculating viewport-based clamped values.

The Independent Type Foundry Advent Calendar 2022 · Matthias Ott – User Experience Designer

For 24 days this month, Matthias featured a different independent type foundry, writing about each one and selecting some lovely examplars of their typefaces.

Mona Sans & Hubot Sans

Two new lovely open source variable fonts from Github.

Designing a Utopian layout grid: Working with fluid responsive values in a static design tool. | Utopia

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.

Building the new Utopia homepage | Trys Mudford

Trys has written up how he made that nifty little resizing widget on the Utopia homepage.

Fontshare: Quality Fonts. Free.

A whole lotta nice fonts—most of them variable fonts—from Indian Type Foundry.

Bunny Fonts | Explore Faster & GDPR friendly Fonts

A drop-in replacement for Google Fonts without the tracking …but really, you should be self-hosting your font files.

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!)

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 -

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.