How do I create a responsive text?
A project I'm working on have lots of media queries just for the text to adapt to screen sizes.
I would love to implement a fluid text responsiveness or even a stepped responsiveness but in better way with or less media queries.
Thanks ๐
20 Replies
You should use
clamp() function in CSS. Kevin talks about it in few of his videos:
https://youtu.be/U9VF-4euyRo
https://youtu.be/VsNAuGkCpQUKevin Powell
YouTube
min(), max(), and clamp() are CSS magic!
CSS has come a long way, but min(), max(), and clamp() make a lot of things a lot easier than they used to be, and really open up the world of responsive typography like we never had before! Clamp() is the ingredient that we've needed for a long time to really be able to make type fully responsive in our CSS, and to be able to do it on one line ...
Kevin Powell
YouTube
3 modern CSS techniques for responsive design
My free course, Conquering Responsive Layouts: https://courses.kevinpowell.co/conquering-responsive-layouts
A look at how we can use CSS comparison functions min(), max(), and clamp() for responsive layout techniques, plus a look at Utopia, a fluid type scale that we can use in our projects!
๐ Links
โ
Utopia Fluid Type Scale: https://utopi...
Thanks a lot. Let me watch the video now. I will give you feedback when I'm done ๐
another option if you don't want to go the clamp route, is to simply make a general media query for font sizes in your css. Here's an example very similar to how Kevin does it:
--fs-300: 3rem;
--fs-250: 2.5rem;
--fs-200: 2rem;
--fs-175: 1.75rem;
--fs-150: 1.5rem;
--fs-125: 1.25rem;
--fs-100: 1rem;
--fs-body: var(--fs-100);
--fs-button: var(--fs-125);
--fs-heading: var(--fs-150);
--fs-title: var(--fs-200);
}
@media (min-width: 50em) {
:root {
/* font-sizes */
--fs-body: var(--fs-125);
--fs-button: var(--fs-150);
--fs-heading: var(--fs-200);
--fs-title: var(--fs-300);
}
}
then you don't need to add media queries all over your code, it is just automatic. And, you probably don't need to change your font sizes nearly as much you think you do to keep them sized correctly and responsive
I just started with the second video, and all I can say is that, that 14mins of videos packs a lot ๐ฎ Thanks again @Tenkes I really appreciate
Another great feedback, thanks a lot @ghostmonkey I really appreciate ;D
Is it a good idea to use clamp() on a border-radius?
i can't think of a good reason to do that, do you have one?
i have seen where calculations are done on border-radius in order to determine if it is within say 4-8px of the viewport window (and if it is, to set the radius to 0)
I use it because on larger screens and as the items size increases the border radius get smaller and smaller.
Like if i have a 2 rem radius in a card in small screens, and as that card gets bigger the radius slowly decreases.
I use something like:
clamp(1rem, 6vw, 3rem)Cool
I don't really have a reason tho
Typically, i use clamp() for the font-size I set on the body. Then use em for the border-radius. Since the body font-size changes with the viewport, so does the border-radius.
I've used clamp in multiple places before (padding, and different other size declarations) and didn't like the visuals it produced. Everything shifted sizes in a weird-to-look-at way, hard to "synchronize" from my experience so far.
The approach I mentioned above is more predictable IMO, but I guess that's your decision. Whatever works best for you.
I have a grid-area in which I want text that must use
white-space: nowrap to scale responsively to available width. So I cannot use vw. I reckon the only way to do this might be cqw? Can you use these values with text?Yes, you can.
Thanks for responding. I tried it and it seems to work, however 100cqw doesn't seem to be 100% of the container? I guess I'm misunderstanding.
If your container has a width of 300px the font size should be 300px when setting it as 100cqw. Make sure you set the font size property on a child of the element you set
container-type to.100cqw or 100vw on the
font-size won't make the text 100% of the width of the container (or viewport), it makes the font-size really big ๐
You'll have to magic number it, but both of those will work... it will depends on the font you're using, but you just need to play with the cqw and try different numbers until you get one that fits properly.Thanks everyone ๐
And always such an honour to have Kevin respond ๐โโ๏ธ
I noticed what you said Kevin, although I don't fully understand why the font size is so much larger and not corresponding to the 100cqw. I tried magic numbering which of course instantly breaks on mobile, and I didn't dare test an Apple device yet ๐
What's worse is I want to use background clipping on the font. In my case anything that overflows the grid area will be transparent, because I noticed while the type overflows, the background does not.
So I'm afraid I might resort to using an SVG of my text and scale it to my hearts content.
If you're container is, say, 500px wide, then it's the same as setting
font-size: 500px, which is huge ๐
In this case, SVG is probably a good option, and you can keep text in SVGsIโm surprised no one mentioned utopia. I use the system for my website and it works great. Utopia.fyi
utopia is fantastic, but doesn't solve what he's trying to do here
Note: This was an old post (2013 3/15) from user Corizon. Yesterday this post got a new question from posix with a different take on responsiveness. So with the OP i see Utopia as perfect. ๐
I feel so dumb now thinking the 500px width of the container would translate in an absolute width of 500px on the type. But surely it'll apply that as a font-size. I was too fixated on the container width.
Took me a moment to understand what utopia even is. But I understand it's a tool to generate an elaborate CSS hack that will allow what we need here?
ah, for OP, totally yes! I meant for what posix was taking about ๐