Update
Fixed a few things around these parts today; I started using Fakir for headings and tidied up a lot of stuff on smaller screens. The biggest change is that the headings now change size depending on the width of the container that they’re in, like this:
.title-wrapper {
container-type: inline-size;
}
.title-wrapper h1 {
font-size: 15cqw;
}
One of the problems with this type of responsive heading is that I want the size of the text to change depending on the number of words in the title. So if a title is small—like “Analog”—then I want that to be enormous, but if the title is real long—“Questionable Best Practices in Modern Front-end Development”—then I want the text to scale down a bit and fit in a reasonable space.
But after all these years, it looks there’s no good way to responsively set the font-size of big headings without knowing the exact number of words or letters in them. We’ve got rem
, vw
, and now cqw
units but none of them work precisely the way I want them to.
So I’m kinda forced to write a bunch of logic that takes into consideration...
- Small, one-word titles that need to be monstrously big
- Long, one word titles that need to be medium-sized
- Real long sentences that need to be smallish-sized to fit
That convinced me that I should just write a whole bunch of hacky JavaScript that detects how many words and letters are in the h1
and then slaps a CSS class on it:
const title = document.querySelectorAll("#heading")[0];
const titleLetters = title.textContent.length;
const titleWords = title.textContent.trim().split(/\s+/).length;
if (titleLetters > 15) {
title.classList.add("title-long");
}
if (titleLetters > 10) {
title.classList.add("title-medium");
}
if (titleLetters > 8 && titleWords < 2) {
title.classList.remove("title-short");
title.classList.remove("title-medium");
title.classList.add("title-quite-long");
}
I’m sure there’s a better way to do this but, hey, it works fine for now.
I had a lot of hacky fun making the headings work across different screen sizes although it’s a bit frustrating that there’s no way in CSS to make a relationship between the number of words in a sentence and the size of the text. Also, having so many ways length values to set the font-size definitely adds to that feeling of overwhelmingness when it comes to writing CSS.
I don’t want yet another value in CSS—cqw
works well enough for me. But I really wish there was some way to do this CSS alone. Something like...
.element:letters(<5) {
font-size: 10cqw;
}
.element:words(> 2) {
font-size: 15cqw;
}
:letters()
and :words()
is perhaps a little silly and maybe it’s super not performant to do this with CSS alone but the idea is sound to me. It’s sorta like a media query, I guess.
Anyway, lemme know what ya think about the new design of this here website. I’m sure there’s all sorts of kinks I’ll need to smooth out this weekend.