When I wrote about the idea of declarative design it really resonated with a lot of people.
I think that there’s a general feeling of frustration with the imperative approach to designing and developing—attempting to specify everything exactly up front. It just doesn’t scale. As Jason put it, the traditional web design process is fundamentally broken:
This is the worst of all worlds—a waterfall process creating dozens of artifacts, none of which accurately capture how the design will look and behave in the browser.
In theory, design systems could help overcome this problem; spend a lot of time up front getting a component to be correct and then it can be deployed quickly in all sorts of situations. But the word “correct” is doing a lot of work there.
If you’re approaching a design system with an imperative mindset then “correct” means “exact.” With this approach, precision is seen as valuable: precise spacing, precise numbers, precise pixels.
But if you’re approaching a design system with a declarative mindset, then “correct” means “resilient.” With this approach, flexibility is seen as valuable: flexible spacing, flexible ranges, flexible outputs.
These are two fundamentally different design approaches and yet the results of both would be described as a design system. The term “design system” is tricky enough to define as it is. This is one more layer of potential misunderstanding: one person says “design system” and means a collection of very precise, controlled, and exact components; another person says “design system” and means a predefined set of boundary conditions that can be used to generate components.
Personally, I think the word “system” is the important part of a design system. But all too often design systems are really collections rather than systems: a collection of pre-generated components rather than a system for generating components.
The systematic approach is at the heart of declarative design; setting up the rules and ratios in advance but leaving the detail of the final implementation to the browser at runtime.
Let me give an example of what I think is a declarative approach to a component. I’ll use the “hello world” of design system components—the humble button.
Two years ago I wrote about programming CSS to perform Sass colour functions. I described how CSS features like custom properties and calc() can be used to recreate mixins like darken() and lighten().
I showed some CSS for declaring the different colour elements of a button using hue, saturation and lightness encoded as custom properties. Here’s a CodePen with some examples of different buttons.
If these buttons were in an imperative design system, then the output would be the important part. The design system would supply the code needed to make those buttons exactly. If you need a different button, it would have to be added to the design system as a variation.
But in a declarative design system, the output isn’t as important as the underlying ruleset. In this case, there are rules like:
For the hover state of a button, the lightness of its background colour should dip by 5%.
In this kind of design system you can look at some examples to see the results of this rule in action. But those outputs are illustrative. They’re not the final word. If you don’t see the exact button you want, that’s okay; you’ve got the information you need to generate what you need and still stay within the pre-defined rules about, say, the hover state of buttons.
This seems like a more scalable approach to me. It also seems more empowering.
One of the hardest parts of embedding a design system within an organisation is getting people to adopt it. In my experience, nobody likes adopting something that’s being delivered from on-high as a pre-made sets of components. It’s meant to be helpful: “here, use this pre-made components to save time not reinventing the wheel”, but it can come across as overly controlling: “we don’t trust you to exercise good judgement so stick to these pre-made components.”
The declarative approach is less controlling: “here are pre-defined rules and guidelines to help you make components.” But this lack of precision comes at a cost. The people using the design system need to have the mindset—and the ability—to create the components they need from the systematic rules they’ve been provided.
My gut feeling is that the imperative mindset is a good match for most of today’s graphic design tools like Figma or Sketch. Those tools deal with precise numbers rather than ranges and rules.
The declarative mindset, on the other hand, increasingly feels like a good match for CSS. The language has evolved to allow rules to be set up through custom properties, calc(), clamp(), minmax(), and so on.
So, as always, there isn’t a right or wrong approach here. It all comes down to what’s most suitable for your organisation.
If your designers and developers have an imperative mindset and Figma files are considered the source of truth, than they would be better served by an imperative design system.
But if you’re lucky enough to have a team of design engineers that think in terms of HTML and CSS, then a declarative design system will be a force multiplier. A bicycle for the design engineering mind.
Weve detected that JavaScript is disabled in this browser. Please enable JavaScript or switch to a supported browser to continue using twitter.com. You can see a list of supported browsers in our Help Center.
Understanding how people with disabilities browse the web using assistive technologies (AT) is core to making an accessible and inclusive user experience. Our browsing with assistive technology videos series introduces commonly used software, who uses it, how it works, and ways people navigate content.
Assistive technologies (AT) are software or hardware used by people with disabilities to help them complete a task. While AT can refer to wheelchairs, hearing aids or canes, we look at AT for using a computer and browsing the web, including desktop and mobile screen readers, the keyboard, screen magnification, and speech recognition.
A screen reader is a software application that announces what is on the screen to people who cannot see or understand visual content. They provide access to the entire operating system and applications, including browsers and web content.
Keyboards can be plugged in, built-in or attached wirelessly to desktop computers, laptops and mobile devices. They enable access to the entire operating system and applications, including browsers and web content, for people who do not use a mouse.
Screen magnification software enlarges content on a desktop computer, laptop, tablet or smartphone screen. It magnifies everything on the screen, including the operating system, applications, and content.
Speech recognition software listens to human speech, transcribes it into text, and executes spoken commands that operate your computer or device. People commonly use it as an alternative to using a keyboard, mouse or touch gestures. Speech recognition provides access to the entire operating system and applications, including browsers and web content.
Six things to consider before changing fonts on a website
New year, new typefaces! I pimped the type of Pimp my Type – wow, that’s meta. I’m super excited about it and wanted to use this occasion to share with you, what motivated me to do it, and what I paid attention to. So if you’re in a similar situation, this article will help you to figure out, if it’s worth the effort to change fonts on a website, or not.
TL;DR: Ask yourself why? What does not work now, and what should be better after? Decide if it’s really worth the effort, test it with trial fonts and real content, check the licenses, and expect that the spacing most likely will be off. Brace yourself for inconsistencies, and know that it won’t be perfect afterwards.
Before and after
Before, I used the beautiful, soft and classical serif typeface Bressay by Dalton Maag for body text. Headlines and functional text, like navigational elements or captions, I set in the Basic Sans, a clean and softer sans-serif by Latino Type. Both were hosted via Adobe Fonts.
I replaced them with two of my favorite typefaces of the last year. The spiky and lively serif Piazzolla by Huerta Tipográfica for the body text. And the quirky and more expressive Grotesque Magnet by Frere-Jones Type.
After
Before
Before: the previous typefaces Basic Sans and Bressay are calmer, softer and more space consuming. After: Magnet and Piazzolla need less space, are more expressive, and easier to read in smaller sizes. Not totally different, but you can see that things changed.
Reasons for changing typefaces
First, take some time to think about why you want to change typefaces? What does not work now, and what do you expect to be better afterwards? What do you hope to achieve with the result? This will set the basis for everything. To give you an idea and some examples, I’ll guide you through my reasoning.
To set Pimp my Type more apart
I started Pimp my Type on YouTube almost 16 months ago. Back then, I wanted to keep the effort as little as possible, focus everything on content creation. This is why I used my existing, professional and unpronounceable Zeichenschatz site to push out content. I used the typography and style from there. After a year I moved it all on its own domain. Now I slowly start to differentiate the design more and more. Changing the typography was the next logical step to show that.
To create a different vibe
It should be a little less calm, a pinch more striking, more interesting, more unconventional. I wanted it to be shaper, and contrasting.
To take advantage of a variable font
Especially from optical sizing, which is possible with variable fonts out of the box. I just love this so much, and Piazzolla comes with it. I describe it here in more detail, but optical sizing optimizes the width and text weight to the size it is set in. You can best see how it works, when you compare a before an after for mobile. It’s subtle, but powerful.
On
Off
Optical sizing off: the spacing is tighter and the weight is a bit lighter. Too light and compact for small text. Optical sizing on: Yes! Slightly sturdier strokes and wider spacing make it ideal for smaller text.
To host the fonts myself
I hosted fonts via Adobe Fonts, which is a cool tool to try things out and to design. But it has some downsides, and I want to be independent of third party services as much as possible, mostly for privacy reasons. That’s also why the YouTube player on top is not loaded instantly and only after you clicked the thumb with the crappy resolution 😉.
To optimization for mobile
I wanted a compact display typeface that also would work for functional text and still show some character. It should be rather narrow with a larger x-height, and Magnet accomplished that. Especially in the navigation and Headings, it’s much clearer now. For the body text, Piazzolla is more space-saving as well, compared to its predecessor, which makes a better reading experience.
Before – especially on mobile the body text set in Bressay was rather wide.
After – Piazzolla is narrower, has a larger x-height and seems more even on mobile.
… but it should not be too different
Make it different but not too different – sounds like a horrible client briefing, right? 😂 I wanted it to be an evolution, not a revolution. The basic idea of having a Grotesque for headings and functional text and a serif for the body text should remain. Also, the metrics should not be radically different. The reason behind that is, that I want Pimp my Type to still be recognized, after building it up for the past months.
Support Pimp my Type
Make typographic knowledge practical, fun and accessible to everyone. I’m greatful for your support in any of these ways:
🤘Share it with a someone, who you think might benefit from it.
☕️Buy me coffee to get me through late night editing.
After all this background information, and sating my case, let’s move to the six things you should consider before you change typefaces on your website.
1. Is it really worth the effort?
Work will be involved, you’ll have to revisit every typographic component and check it again. In my case – my heart just said yes to it. It makes me so happy just to look at it, so it’s definitely worth the effort.
2. Test it, if possible.
I got myself some trial fonts to try it out. I quickly sandboxed it, fell in love and then tweak the tiny details. And always test it with your real blog posts and content, if possible. Specimen sheets always look nice, but they are rarely the reality of your product.
weight: 450
weight: 400
On my high density phone the text was too light.
On my desktop monitor, everything looked fine, but after going live I discovered, that the font weight seemed very light and thin on the high density screen of my iPhone 12 and my MacBook. So I used the power of the variable font and set the normal weight of the text from the default of 400 to font-weight: 450. Pro tip: when you do something like this, check if the bold text has to be bolder too, to create sufficient contrast. In my case, it was not necessary and the default of 700 worked as well. I wrapped it all in a feature query that checks if the browser supports variable fonts. I combined it with a media query that detects, if it’s a retina screen, and voilà, here’s my overcomplicated typography CSS 😂.
@supports (font-variation-settings: normal) {
@media screen and (-webkit-min-device-pixel-ratio: 2),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
body {
font-weight: 450;
}
}
}
3. Check the license before you buy it
In my case, the desktop license of Magnet does not include broadcast use, which is – of course – important to me! So I had to check with Frere-Jones Type what additional investment this means. If it had been out of my budget, I would have reconsidered it.
4. Vertical and horizontal spacing might be off
In my case, Magnet is a little different from Basic Sans. I had to realign every button and text that was covered by a rectangular shape. The tags, the category links, etc. It was not much work, but it was work.
Before – vertical alignment in the category “Typography” and comments link does not work yet. It seems to low positioned inside the shape.
After – With the vertical alignment adjusted, it appears centered.
5. Inconsistencies with prior content are almost inevitable
You will have to live with that. There will be captions and text inside my thumbs and other graphics that I will not update to the new typeface. Because I’d rather focus on new content than polishing the exiting stuff.
6. Live with it, that it won’t be perfect
Even if all these changes are a big improvement, I still see things that are not that perfect. I’m still not sure about my gigantic animated drop cap in goofy Cheee (but I slightly updated it already and put it on a fixed blobby brackground). At times, too many typographic elements collide and create imbalance, and a twitchy feeling. Also, you have to download quite some files now. Before it was roughly 350 KB of fonts, which is already a lot. Now it’s over 600 KB. That’s not ideal, and I’ll leave it up for future improvements.
But things will never be that perfect. There will always be cases where it’s not that ideal, and better done than perfect.
I’m curious, what do you think of the new typefaces? Was it worth all the effort? Are you planning to change typefaces on your website as well, and was this helpful to you? I’m happy to read your comments below!
P.S.: Thanks to Kel, who motivated me to include a better way of comparing before and after situations. Due to his feedback, I integrated a slider to make changes more obvious.
When I first fell in love with the web, it was a radically different place. Aside from the many technical improvements that have been made, I feel like the general culture of the web has changed a lot as well.
Growing up with the web as a teenager meant having access to an infinite treasure chest of content. A lot of that content was spread across blogs, forums and personal websites.
The overwhelming motivation behind it seemed to be “I made something, here it is”. Sharing things for the sake of showing them to the world. Somebody had created something, then put it online so you could see it. Visit their website (wait for the dial-up to finish), and it’s yours.
Follow any link on the web today and you’ll likely be met with a different scenario:
Cookie consent pops up, intentionally confusing. (You're tired - just hit "Accept All".)
App download banner asks you to install the native app. (Dismiss.)
Newsletter modal blocks the site, asking for your email address. (Close it.)
Start reading a few paragraphs, before another modal requires you to create an account. (Leave site, frustrated.)
Notice how everything about that interaction is designed to extract value from your visit. The goal here is not for you to read an article; it’s to get your analytics data, your email, your phone and your money.
It’s the symptom of a culture that sees the web purely as a business platform. Where websites serve as eloborate flytraps and content as bait for unsuspecting users.
In this culture, the task of the self-appointed web hustler is to build something fast & cheap, then scale it as much as possible before eventually cashing out.
You see it in email bots, spamming blogs for link placements and sponsored posts.
You see it in Twitter accounts where grifters try to monetize their “communities” with useless ebooks.
You see it in crypto, burning the planet for quick profits.
web3 and NFTs are the latest evolution of this culture. The latest attempt to impose even more artificial locks and transactions on users, to extract even more money.
This is the web as envisioned by late-stage capitalism: a giant freemium game where absolutely everyone and everything is a “digital asset” that can be packaged, bought and sold.
Sure, the web has changed since the 90s. It has “grown up”.
Of course there are lots of legitimate reasons to monetize, and creators deserve to be compensated. It’s not about people trying to make a buck. It’s about those treating the web simply as a market to run get-rich-quick schemes in, exploiting others out of pure greed.
We’ve gotten so used to it that some can’t even imagine the web working any other way - but it doesn’t have to be like this.
At its very core, the rules of the web are different than those of “real” markets. The idea that ownership fundamentally means that nobody else can have the same thing you have just doesn’t apply here. This is a world where anything can easily be copied a million times and distributed around the globe in a second. If that were possible in the real world, we’d call it Utopia.
It’s also a world that can be shaped by the consumer:
Large companies find HTML & CSS frustrating “at scale” because the web is a fundamentally anti-capitalist mashup art experiment, designed to give consumers all the power.
Sorry I didn’t quote tweet anything in order to say that.
This “mashup art experiment”, as Mia calls it, is what made the web great in the first place. It’s the reason it became a global phenomenon and much of it is centered around the idea that digital content is free and abundant.
Resource Scarcity doesn’t make sense on the web. Artificially creating it here serves no other purpose than to charge money for things that could easily have been free for all. Why anyone would consider that better is beyond me.
The online game Wordle recently took the world by storm. To the utter shock of many, it is just a free piece of content. A free and open web game millions can enjoy, no strings attached.
Its creator, Josh Wardle, originally built the game for his partner and put it online. Despite its success, he has no intention to monetize it - and the world is richer for it. When questioned about it, he said this:
I think people kind of appreciate that there’s this thing online that’s just fun. It’s not trying to do anything shady with your data or your eyeballs. It’s just a game that’s fun.
Because the notion that monetization is the only worthwile goal on the web is so widespread, this is somehow a very controversial take. But you can actually stand out of the crowd by simply treating the web platform as what it is: a way to deliver content to people.
Despite what web3 claims, it’s possible to “own” your content without a proof of it on the blockchain (see: IndieWeb). It’s also possible to create things just for the sake of putting them out into the world.
The best growth hack is still to build something people enjoy while attaching no strings to it. You’d be surprised how far it can get you.
With Home Assistant the last few years weve been focusing on making things easier, stable, and faster. More things can be managed via the UI, most YAML-based integrations can be reloaded without restarting and if something breaks, safe mode and built-in backups have your back.
We have amazing contributors who work on making Home Assistant better every single day. However, you cant keep growing by adding new things in the same structure. An interface made for 4 items will become confusing once the 10th item is added (like our profile page). A veteran Home Assistant user might be fine because they have seen the growth feature by feature and know exactly where to find what. For new users it is overwhelming.
For 2022 the motto will be streamlining experiences . We want to better organize and integrate all the different features that make up Home Assistant.
For example, there should be a built-in way, for both YAML and the UI, to easily send a notification with a camera snapshot to your phone, pick a song to play for an automation, or use text-to-speech to notify you when something is happening. All these things are possible today but require too much knowledge of how the various parts work.
Well have 11 releases this year and each release should streamline more things.
Have a good and healthy 2022 and see you at our first release on February 2!
