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
Tenkes
Tenkesโ€ข2y ago
You should use clamp() function in CSS. Kevin talks about it in few of his videos: https://youtu.be/U9VF-4euyRo https://youtu.be/VsNAuGkCpQU
Kevin 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...
Corizon
Corizonโ€ข2y ago
Thanks a lot. Let me watch the video now. I will give you feedback when I'm done ๐Ÿ™‚
ghostmonkey
ghostmonkeyโ€ข2y ago
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
Corizon
Corizonโ€ข2y ago
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?
ghostmonkey
ghostmonkeyโ€ข2y ago
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)
~MARSMAN~
~MARSMAN~โ€ข2y ago
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)
Corizon
Corizonโ€ข2y ago
Cool I don't really have a reason tho
CodeNascher
CodeNascherโ€ข2y ago
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.
posix
posixโ€ข3mo ago
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?
Ivะพ
Ivะพโ€ข3mo ago
Yes, you can.
posix
posixโ€ข3mo ago
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.
Ivะพ
Ivะพโ€ข3mo ago
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.
Kevin Powell
Kevin Powellโ€ข3mo ago
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.
posix
posixโ€ข3mo ago
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.
Kevin Powell
Kevin Powellโ€ข3mo ago
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 SVGs
Martin Beroiz
Martin Beroizโ€ข3mo ago
Iโ€™m surprised no one mentioned utopia. I use the system for my website and it works great. Utopia.fyi
Kevin Powell
Kevin Powellโ€ข3mo ago
utopia is fantastic, but doesn't solve what he's trying to do here
Lamer of Sweden
Lamer of Swedenโ€ข3mo ago
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. ๐Ÿ™‚
posix
posixโ€ข3mo ago
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?
Kevin Powell
Kevin Powellโ€ข3mo ago
ah, for OP, totally yes! I meant for what posix was taking about ๐Ÿ˜„
Want results from more Discord servers?
Add your server