Link tags: type

Introducing TODS – a typographic and OpenType default stylesheet | Clagnut by Richard Rutter

This is a very handy piece of work by Rich:

The idea is to set sensible typographic defaults for use on prose (a column of text), making particular use of the font features provided by OpenType. The main principle is that it can be used as starting point for all projects, so doesn’t include design-specific aspects such as font choice, type scale or layout (including how you might like to set the line-length).

The Beatrice Warde Memorial Lecture - St Bride Foundation

Oh, this looks like an excellent event (in London and online):

Adventures in Episodic Type Design

With David Jonathan Ross

Thursday 17th October 2024

Some of the best free fonts | Clearleft

If you start with a high-quality, legible, free typeface and experiment with size, weight, colour, line height, and (subtle) letter spacing, you might find these free options will get you further than you’d think. These are professional fonts crafted and maintained by experts and they can help your content land the way it deserves to.

Prototypes, production & fidelity layers | Trys Mudford

I’ve always maintained that prototyping and production require different mindsets. Trys suggests it’s not as simple as that.

I agree with much of what he says about back-end decisions (make it manual ‘till it hurts—avoid premature optimisation), but as soon as you’re delivering HTML, CSS, and JavaScript to real people, I think you need to meet certain standards when it comes to accessibility, performance, etc.

Utopia WCAG warnings | Trys Mudford

Wouldn’t it be great if all web tools gave warnings like this?

As you generate and tweak your type scale, Utopia will now warn you if any steps fail WCAG SC 1.4.4, and tell you between which viewports the problem lies.

Responsive typography and its role in design systems | Clagnut by Richard Rutter

Okay, if you weren’t already excited for Patterns Day, get a load of what Rich is going to be talking about!

You’ve got your ticket, right?

Marbla

A fun variable font with three axes: inktrap, balloon, and curve.

Monaspace

Five lovely monospaced variable fonts.

Wilco Loft Sans – SimpleBits®

How cool is this‽ Dan made a font for Wilco!

htmx ~ Why htmx Does Not Have a Build Step

The best reason to write a library in plain JavaScript is that it lasts forever. This is arguably JavaScript’s single most underrated feature. While I’m sure there are some corner cases, JavaScript from 1999 that ran in Netscape Navigator will run unaltered, alongside modern code, in Google Chrome downloaded yesterday. That is true for very few programming environments.

And yet:

Of course, most people’s experience with JavaScript is that it ages like milk. Reopen a node repository after 3 months and you’ll find that your project is mired in a flurry of security warnings, backwards-incompatible library “upgrades,” and a frontend framework whose cultural peak was the exact moment you started the project and is now widely considered tech debt.

Clamp calculator | Utopia

Oh, this is a nice addition to the Utopia set of tools: when you don’t need a full-on type scale but you still want to figure out fluid clamp() values, the clamp calculator has you covered.

It’s got permalinks too!

We’re still not innovating with AI-generated UI.

Prototypes and production:

It looks like it will be a great tool for prototyping. A tool to help developers that don’t have experience with CSS and layout to have a starting point. As someone who spent some time building smoke and mirrors prototypes for UX research, I welcome tools like this.

What concerns me is the assertion that this is production-grade code when it simply is not.

Legibility

Mary Dyson’s short book is available for free online as a lovely web book:

1. What do we mean by legibility?
2. How we read
3. Perspectives on legibility
4. What is measured and how
5. Overview of research: Type
6. Overview of research: Typography
7. Beyond legibility research

Why I moved on from Figma – No Handoff

A good looking artifact too early in the process gains buy-in too quickly and kills discovery.

Language Model Sketchbook, or Why I Hate Chatbots

Chat is rarely a suitable interface for most tasks. Here, Maggie Appleton explores and prototypes some alternatives.

Typography Manual by Mike Mai

A short list of opinions on typography. I don’t necessarily agree with all of it, but it’s all fairly sensible advice.

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.