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!
