loading...

How do you handle responsive titles?

jmau111 profile image Julien Maury Updated on ・1 min read

I have a bunch of tips on my own, for example, one of them is to use vw as font size unity, so your text will be "resized" according to the viewport :

.site-title {
     font-size: 5vw;
}
Enter fullscreen mode Exit fullscreen mode

This technique is not perfect, though.

It would be nice to have your opinion. If you have tricks, do no hesitate to share them, with their pros and cons. That would be nice.

I'm referring to those headlines <h1>, <h2>, etc. Most of the time, when using a smartphone, you get 2 or 3 lines of text, especially in portrait mode.

Discussion

pic
Editor guide
Collapse
neuroptera profile image
neuroptera (they/them)

May I ask what caniuse result you're looking at that makes you say 'ouch'? The first result, CSS API: vw, is largely irrelevant here; it's the next results about the vw unit that matter, and support is at a bit above 95%. That's not perfect, but it's pretty good. Of course, YMMV; maybe you just have higher standards for support/need to support very old browser versions, which is cool, and feel free to ignore me if that's the case! Just thought I'd say something because 'ouch' seemed like a strong reaction, so I was wondering if you were accidentally looking at the wrong thing, in which case I'm pleased to inform you that vw support isn't nearly as bad as you think.

I like to use clamp() with a rem/vw mixture; it's nice because it's generally responsive but also lets you set constraints, so the size doesn't get too out of hand. Browser support is okay but not all that great, so as a fallback I'll first set the font-size normally; anything will do, but I like to use a rem value that's on the smaller side, which won't change based on viewport but still should look decent on small screens. It doesn't address every single browser out there, but I'm not a professional and it suits my needs just fine as a newbie coding smaller things for personal use, for practice, and for fun.

Collapse
jmau111 profile image
Julien Maury Author

Thanks for your comment.

Yes, I was looking at the wrong thing. It was to give the weakest example possible, but that was pretty wrong ^^; my bad. For now, I'm using media queries and rem too.

I should have been more precise with my question. It's the word break that bothers me. It makes titles ugly on some devices, and even on some kick-ass frontend blogs.

Collapse
evelew profile image
Evellyn Lima

I always use px and media queries 🤔