- Start with the text
- Use size intentionally
- Contrast weights and styles
- Play with spacing
- Use colour, but don’t rely on it
- Limit your font choices (but choose well and wisely)
- Repeat, repeat, repeat
- Test your system
When you vibe code, you are incurring tech debt as fast as the LLM can spit it out. Which is why vibe coding is perfect for prototypes and throwaway projects: It’s only legacy code if you have to maintain it!
The worst possible situation is to have a non-programmer vibe code a large project that they intend to maintain. This would be the equivalent of giving a credit card to a child without first explaining the concept of debt.
If you don’t understand the code, your only recourse is to ask AI to fix it for you, which is like paying off credit card debt with another credit card.
The short version of what I want to say is: vibe coding seems to live very squarely in the land of prototypes and toys. Promoting software that’s been built entirely using this method would be akin to sending a hacked weekend prototype to production and expecting it to be stable.
Remy is taking a very sensible approach here:
I’ve used it myself to solve really bespoke problems where the user count is one.
Would I put this out to production: absolutely not.
I love the interactive illustrations in this article filled with type and architecture nerdery!
A great talk by Matthias on what you can do with web standards today!
Everything you ever wanted to know about text-wrap: pretty in CSS.
Google Fonts only lets you download .ttf files meaning that if you want to self-host your fonts (and you should), you have to first convert them to .woff2 files.
Luckily this tool has been online for over a decade, doing what Google Fonts should be doing by default.
A fun new font from Jason:
Citywide is a sans serif family inspired by mid-1900s bus and train destination roll signs.
This is absolutely wonderful!
There’s deep dives and then there’s Marcin’s deeeeeeep dives. Sit back and enjoy this wholesome detective work, all beautifully presented with lovely interactive elements.
This is what the web is for!
The power of prototyping:
Most of my work is a set of disposables rather than deliverables, and I celebrate this.
I like the three questions that Chris asks himself:
- What’s the quickest, cheapest thing I can create to help make the next design decision?
- What can I create to best demonstrate the essence of the concept?
- How can I most effectively share the thinking behind the design with decision-makers?
Some interesting experiments in web typography here.
Anselm isn’t talking about becoming a CSS wizard, but simply having an understanding of what CSS can do. I have had similar experiences to this:
In the past years I had various situations where TypeScript developers (they called themselves) approached me and asked whether I could help them out with CSS. I expected to solve a complex problem but for me — knowing CSS very well — it was always a simple, straightforward solution or code snippet.
Let’s face it, “full stack” usually means “JavaScript”—HTML and CSS aren’t considered worthy of consideration. Their loss.
A complete digital archive of the famous typography from the Sanborn Fire Insurance Maps
The lettering really is lovely!
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).
Oh, this looks like an excellent event (in London and online):
Adventures in Episodic Type Design
With David Jonathan Ross
Thursday 17th October 2024
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.
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.
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.
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?