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 š
8 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.