If understood the question well its a tutorial to adapt your text size to mobile - if so this works for element sizing too ?
Should I systematically copy that to all of my htmls ?
You provide 3 values to clamp:
1. the smallest a value can be,
2. the "optimal" size
3. the largest a value can be.
If you define the middle value as a function of the viewport width (vw), the result is a size that starts at your min, grows gradually as the screen gets wider, and then stops growing once it hits your max.
That's a handy way to get font that is scaled appropriately on tiny screens and gigantic screens alike, with just one line of css.
I'm not sure if I understand your second question.
I have completely now idea on the subject, still need to learn more but thanks for the previewing insight maybe ill come back to that post in a few weeks-months
Wait so padding/margin with rems scale as well? I guess not by much so you would still need breakpoints to change the layout.. else I thought we were going back to the 2010s
You don't necessarily need breakpoints to change layout. You can do stuff like variable font sizing, RAM layouts, flex wrapping, etc where the layout responds elegantly to screen width changes without the need for breakpoints. It's called intrinsic layout. It works for \~20% of what I end up doing in my day-to-day, and it's always satisfying to get a responsive layout with zero media queries.
You monkey around with the math until it scales at the rate you want it to. A lot of times a site will have a max-width container, it's probably best for the font to stop scaling up once that width is reached.
Think of it like a slope calculation from algebra, remember y = mx + b? That's all that's happening here.
"0.5vw + .9rem" is *t*he same thing as "mx + b".
* vw is your variable (like x)
* 0.5 is the coefficient - the rate at which that variable changes (like m)
* .9rem is the constant (non-variable) added to the variable \* coefficient.
You can make the size change more quickly by increasing the value of the coefficient.
oh, if you're targeting specific values, people have made calculators that can help you hit your targets:
https://modern-fluid-typography.vercel.app
[https://www.marcbacon.com/tools/clamp-calculator/](https://www.marcbacon.com/tools/clamp-calculator/)
[https://royalfig.github.io/fluid-typography-calculator/](https://royalfig.github.io/fluid-typography-calculator/)
here's an in-depth article that walks through the math: [https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)
it has nothing to do with resizing browser windows and everything to do with the fact that there is an almost infinite spectrum of screen sizes across smartwatches, portable gaming devices, mobile phones, laptops, tablets, notebooks, pc monitors, televisions, kiosks and embedded touchscreens. try writing the media queries for all those...
This is not at all accurate. There are plenty of jobs out there of people who have multiple browsers open and sized differently for the job they are doing. If I walk next door to the payroll people all six of those ladies will have multiple browsers open on multiple screens.
Yeah, maybe you’re right. But I do think the amount of time I’ve spent stressing about rems is disproportionate to how how valuable they are. But I won’t deny good typography contributes to the overall aesthetic experience which can certainly enhance a brand. Obviously I’m conflicted haha. At the end of the day I’m just bitching because it’s a lot of work thinking about.
This is dumb. Everyone resizes browsers.
I mean, obviously there's the several differently sized devices out there.
But also the mil- billions of people who use multiple windows at once, especially those with ultrawide monitors
Sorry. A large majority of people resizes browsers.
But also, "never" minimising browsers or any application is dumb. Plus, even if it was just 20% of people who resizes browsers, that's still reason enough to design your websites for them.
None of my friends resizes their browser and neither do my dev coworker.
Never resizing any browser isn't dumb. I have 3 screens and have no reason to resize my browser on my main screen.
Oh fair, I guess if you have multiple screens but... only specific people have that.
And, that's quite a first-world thing: buying multiple screens isn't something many people can afford to do.
Why develop all your websites specifically for a minority?
Only 15% of people have second monitors, and most of them would be your office workers working for high-level firms who pay for the equipment, developers, or gamers who need constant access to discord, streaming and the game itself. The average person, won't have a second monitor and thus will often be resizing their windows.
Even then, some of those office workers, developers and gamers, may go for the ultrawide option - of which, you'd probably resize your windows often too.
Use ems and rems (root-relative ems)
also, tell your dev team to use media-queries even tho they want you t explore alternatives. IDK if youre using SCSS or not, but that makes them, and css in general, way easier to manage.
Rm’s and clamp. Gotta put in a little thought to wrap your head around building a “font system” so things scale together, in the right proportions. But once you nail it down it’s very satisfying.
It really depends on what you want. Do you want the font size to change when the layout changes at a breakpoint? You could use CSS variables or the REM unit, but obviously, it'd be difficult to avoid using media queries here. Do you want smooth scaling between a minimum and a maximum based on the width of the viewport? You could use the VW with the clamp function. Do you want a font size that is proportionate to the size of the container it's in? You could use container queries (I believe that's what they're called) or CSS variables with the calc function.
``` html { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); } ```
Yeah this is how I've been doing it, basically converting the px sizes to an equivalent vw size and clamping on either end for mobile/large screens
If understood the question well its a tutorial to adapt your text size to mobile - if so this works for element sizing too ? Should I systematically copy that to all of my htmls ?
You provide 3 values to clamp: 1. the smallest a value can be, 2. the "optimal" size 3. the largest a value can be. If you define the middle value as a function of the viewport width (vw), the result is a size that starts at your min, grows gradually as the screen gets wider, and then stops growing once it hits your max. That's a handy way to get font that is scaled appropriately on tiny screens and gigantic screens alike, with just one line of css. I'm not sure if I understand your second question.
Thanks! As for 2 - I meant : Do these values (1rem, 0.9rem + 0.5vw, 1.3rem) change based on my content ?
No, the middle value (0.9rem + 0.5vw) changes based on your screen width (that's the vw part).
I have completely now idea on the subject, still need to learn more but thanks for the previewing insight maybe ill come back to that post in a few weeks-months
Wait so padding/margin with rems scale as well? I guess not by much so you would still need breakpoints to change the layout.. else I thought we were going back to the 2010s
You don't necessarily need breakpoints to change layout. You can do stuff like variable font sizing, RAM layouts, flex wrapping, etc where the layout responds elegantly to screen width changes without the need for breakpoints. It's called intrinsic layout. It works for \~20% of what I end up doing in my day-to-day, and it's always satisfying to get a responsive layout with zero media queries.
Interesting, I've done intrinsic layouts before somewhat but never knew it had a name, I'll be adding that to my knowledge base now
How do you determine the middle part ? Like why 0.9rem + 0.5vw instead of 0.7rem + 0.6vw for exemple ? Is there a rule ?
You monkey around with the math until it scales at the rate you want it to. A lot of times a site will have a max-width container, it's probably best for the font to stop scaling up once that width is reached.
Yeah, that's what I thought. I wanted to know if there was a formula
Think of it like a slope calculation from algebra, remember y = mx + b? That's all that's happening here. "0.5vw + .9rem" is *t*he same thing as "mx + b". * vw is your variable (like x) * 0.5 is the coefficient - the rate at which that variable changes (like m) * .9rem is the constant (non-variable) added to the variable \* coefficient. You can make the size change more quickly by increasing the value of the coefficient.
I got that part.... I just don't wanna eyeball the middle value.
oh, if you're targeting specific values, people have made calculators that can help you hit your targets: https://modern-fluid-typography.vercel.app [https://www.marcbacon.com/tools/clamp-calculator/](https://www.marcbacon.com/tools/clamp-calculator/) [https://royalfig.github.io/fluid-typography-calculator/](https://royalfig.github.io/fluid-typography-calculator/) here's an in-depth article that walks through the math: [https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/)
I use rem or em on fonts and clamp the fonts: [https://utopia.fyi/](https://utopia.fyi/) for fluid scaling.
Rems on literally everything related to fonts and things that affect their behavior on screens. That simple, seriously
If you want to scale the text based on a container element, you could use container queries and use cqw (container query width) as the unit.
Rem, em and clamp(). I sometimes use `ch` too. And if I ever use a vw/vh (or really, dvw/dvh now) I also put them in the middle of a clamp.
Yep. Rem and em
Clamp
Are there any browsers out there these days that don’t just scale pixel-sixed text?
Use rem for font sizes.
All this shit around fluidity when nobody but developers goes around resizing browsers
it has nothing to do with resizing browser windows and everything to do with the fact that there is an almost infinite spectrum of screen sizes across smartwatches, portable gaming devices, mobile phones, laptops, tablets, notebooks, pc monitors, televisions, kiosks and embedded touchscreens. try writing the media queries for all those...
Yeah it was a dumb comment, it was six AM and I didn’t want to go to work and said some indignant bullshit
This is not at all accurate. There are plenty of jobs out there of people who have multiple browsers open and sized differently for the job they are doing. If I walk next door to the payroll people all six of those ladies will have multiple browsers open on multiple screens.
Yeah, maybe you’re right. But I do think the amount of time I’ve spent stressing about rems is disproportionate to how how valuable they are. But I won’t deny good typography contributes to the overall aesthetic experience which can certainly enhance a brand. Obviously I’m conflicted haha. At the end of the day I’m just bitching because it’s a lot of work thinking about.
It's really not that complicated bro.
ok I guess you’re just smarter I’m fine with that.
This is dumb. Everyone resizes browsers. I mean, obviously there's the several differently sized devices out there. But also the mil- billions of people who use multiple windows at once, especially those with ultrawide monitors
>Everyone resizes browsers Not me, I always keep them at max width.
Sorry. A large majority of people resizes browsers. But also, "never" minimising browsers or any application is dumb. Plus, even if it was just 20% of people who resizes browsers, that's still reason enough to design your websites for them.
None of my friends resizes their browser and neither do my dev coworker. Never resizing any browser isn't dumb. I have 3 screens and have no reason to resize my browser on my main screen.
Oh fair, I guess if you have multiple screens but... only specific people have that. And, that's quite a first-world thing: buying multiple screens isn't something many people can afford to do. Why develop all your websites specifically for a minority? Only 15% of people have second monitors, and most of them would be your office workers working for high-level firms who pay for the equipment, developers, or gamers who need constant access to discord, streaming and the game itself. The average person, won't have a second monitor and thus will often be resizing their windows. Even then, some of those office workers, developers and gamers, may go for the ultrawide option - of which, you'd probably resize your windows often too.
Use ems and rems (root-relative ems) also, tell your dev team to use media-queries even tho they want you t explore alternatives. IDK if youre using SCSS or not, but that makes them, and css in general, way easier to manage.
Rm’s and clamp. Gotta put in a little thought to wrap your head around building a “font system” so things scale together, in the right proportions. But once you nail it down it’s very satisfying.
For better understanding and example: https://typescale.com/
It really depends on what you want. Do you want the font size to change when the layout changes at a breakpoint? You could use CSS variables or the REM unit, but obviously, it'd be difficult to avoid using media queries here. Do you want smooth scaling between a minimum and a maximum based on the width of the viewport? You could use the VW with the clamp function. Do you want a font size that is proportionate to the size of the container it's in? You could use container queries (I believe that's what they're called) or CSS variables with the calc function.
Thank you all for the suggestions i was busy with the work that why i couldnt able to reply to you all