Damn your responsive layout tutorials are so helpful and I'm a fairly experienced dev. I love the clamp thing. I have been using min to get something similar but I like clamp even more.
Man , that's absolute genius, been fighting with this for years! I'm saving this video with my legacy firefox youtube downloader, that vid going in my library!
Kevin, you are the fucking best, you know, right?. This week I learned A LOT from you. Your content is incredible. Everything I have to do and find out how to on my projects, I search and you explained it better than anyone.
Great that you explain we should not base font size on the view port size. It is not how typography works. Typography works on view distance (and you eye sight) so unless our devices get a sensor to measure how far our eyes are away from the screen we are reading, we have to work by the experience we have. Here we are in luck as we already use type for centuries, so we have some experience. An experience that is supported by some science of the last century where reading over distance became a real thing, like how large should type be on a road sign... The other great thing I would implement as soon as possible is to gather as much typographic parameters and behavior in one place, somewhere at the beginning of (css) files.
Interesting! I tend to use em (not rem) in all instances while making sure to always keep things very simple: End-points (so , , tags and the like) get an EM value, all padding, margins, etc. use em values, image sizes use em values (with srcset so the image can be much larger but display properly based on the actual display needs) or vector art. Then I will have "containers" like a or , or even a which can be designed to "mod" the size (say you want "big quotes", then that tag gets a font-size of 1.4em for example). Anything drastic or that could have many exceptions will be set using a class instead of a tag so that I don't have to override these em values constantly. Then I just use my body's font-size as a responsive breaking point. That clamp trick would work wonders there, since it would affect the entire site's content within controllable bounds!
Great content as always! :) I really appreciate that you talk about pros and cons for every decision. I have only one question, if I read correctly clamps() is not supported by Internet Explorer... so how the page behaves when you open it in IE? I am not sure how many people still uses the IE but I think it is still in use in business segment.
Great Video, Right now, was currently using vw, vh approach never heard of that clamp function seems really interesting, the only issue i see is the support. It's actually less supported than grid-layout, but surelly when browsers keep evolving will be a must use.
Clamp is a good one. Thanks. I kinda wish they had something where you could set a size based on the parent container's width instead of the whole viewport.
@@ormuriauga I think setting font-size as percentage goes by percentage of the element-level font size, similar to em (I could be totally wrong, just my present understanding). I think percentage is a bit unintuitive for font sizes though, I usually use rem!
I have watched a few of your videos. Good work! But I have a question about your approach to the rem. For example, we can see 14px as a base font size in our mockups. There are several approaches: 1) to use 62.5% for HTML font size and 1.4rem for body, etc. 2) to use 100% for HTML and 0.875rem for body, etc. 3) to use 87.5% for HTML and 1rem for body, etc. 4) others? Wiche one do you prefer and why? The Bootstrap 4 sets $font-size-base: 1rem to the body and nothing to HTML. The Foundation sets $global-font-size: 100% to HTML and nothing to the body. Both of them think in the base font size categories (1rem). I had experience with fluid typography by changing the HTML font size with a formula with vw (14px on mobile to 18px on desktop). It works well until we don't have mockups for several screen sizes. You can't use fluid rem in Foundation if the gutter is the same on mobile/tablet/desktop mockups. Long story short: I'm looking for the best approach with rem/rem-calc()/sizes/typography.
Great tutorial very helpful and demonstrates responsive text methods very well, thanks. I am not very experienced with css so this is a great introduction to responsive text. I am very interested to learn more about the overall layout design with this newspaper - magazine type layout which is great and makes the whole page more interesting to look at and more inviting to read. Do you have another video explaining the concepts behind this layout design? I can work out quite a lot from the code you kindly supplied in the codepen (thanks!) but some of the code I don’t understand. Thanks again!
Clamp creates an s-curve for mapping font size to screen size. You can also achieve this with calc(#vw -#vw) but setting bounds with clamp() is much more Design Driven. Anything that helps detangle the mental exhaustion of mapping design goals to math is a big win
Please make a video about Z-index and how it works especially when working with ::before & ::after and how parent’s position might change things I’m currently working on some things and it involves a lot of layering of stuff, and trying to use pseudo elements things don’t seem to work the way I thought they did
I've been sacrificing accessibility a bit on some of my projects by using viewport measurements, love the clamp idea. To solve the problem of vw getting super big/super small I had swapped to vh which I actually find to be a pretty good scalable solution - works well on both desktop and mobile once you find the sweet spot - if you don't mind it always being the same size regardless of zoom (which I think you obviously should mind now that I know clamp exists!)
I have been using a root vw font-size that is based to the Adobe XD artboard size. I'm using scss functions to aid me with this but it can be done with calc. this would look something like this: html{font-size: calc(20 / 1280 * 100vw)}. This will make it so that 1rem is 20px at a viewport width of 1280px. As you resize the viewport this relation will stay the same. Then you can use a different relation for a mobile width using media queries. This allows not just my text but other elements with rem/em values to scale perfectly with the viewport width. As a nice bonus I can use the same px values used on the XD artboard. I just have to convert them to em/rem. I use scss functions for this again to keep things neat but you can use calc for this as well. With a container width of 500px it would look like this: width: calc(500 / 20 * 1em); 20 being the base font-size that is also defined in the root font-size. This certainly brings a lot of advantages. My designer has a print background so a lot of his layouts heavily rely on the right ratio between text and other elements like images. But of course there a downsites as well. Aside from running into some unexpected bugs from time to time the two major issues are: 1. zoom accessibility 2. some layouts don't work very nice on larger screen sizes because you end up with very litte content being visible at a time. this might all be a bit much for a youtub comment but oh well xD
Those two :roots...yet another "oh, that's smart" moment in your videos. Thanks! If I understand correctly, that 1rem of the 12vw + 1rem is just a token amount, so you can pinch the screen -- is that right? If so, is there any reason NOT to put similar measurements throughout your CSS? e.g. for the --fs-400, could you put .5vw + .5rem, or whatever the size equivalent would be?
Something that I don't really understand is: Do I have to adjust the font-size for every element? Because if I change the font-size of , every rem unit will adjust as well, which I don't want. It seems, as if I should define all font-sizes via classes, which I think is unnecessary for all regular text. I just want to overwrite the font-sizes at each breakpoint, like I do with h1-h6 and so on.
Seems like your clamp scaling will behave differently depending on the zoom level. The lower & upper limits grow faster than the target (because zoom only affects rem not vw), so I would expect >100% zoom to min-out/max-out at a proportionally wider screens, and
I built a logo name slogan hero in svg and to approve the relations always stay the same gave the svg a relative unit. Works fine for all screen sizes and is super fluid, but is definately no work case for paragraphs 😄
@@DarKcS2 IE11 was the last IE version and isn't even receiving security patches any longer... non-chomium edge on the other hand is the new problem child... other than people that insist on their custom browser flavor of some weird webkit clone.
That is great when you have only one css file, but I use quite a few css files, one for images one for navigation etc, all my media queries are in one css file, easy to find what you are looking for indeed. EDIT: all my roots are also within one css file.
I use clamps but let's say the max size is 32px, then when viewing on a 4k large monitor the font is small again and we go back to the media query solution...
it's setting the base to 1rem, and adding 20vw to that 1rem number. It just means that if someone zooms in/out, the 1rem will actually be getting bigger/smaller and the size will change :)
there should be a one css line for responsiveness that will remove the stress of most people (but i know its very hard for one line for responsiveness automatically)
That +1rem is noiceeee I love it. Pinch zoom is issue with viewport units.
this
Yup, now off to add this to every clamp() I've written.
Can someone further explain this? I don’t understand. Thanks
@@bulkywallnut5674 as you zoom in your viewport shrinks hence actual vale of vh and vw also goes down but rem stays same regardless of viewport size.
Never considered pinch zoom 🤔
Otoh, why would you want to pinch zoom if font size is appropriate?
So glad to see Kevin now includes accessibility concerns in every video he makes. This is so important for the community. Thank you!
@avfr like derek banas? anyway who hurt you?
@@miyalys a blind guy with hearing issues took his girlfriend and now he's sad
@avfr what the hell is a soydevs
You have made me I love with CSS and I'm really surprised with the amazing things you can use only CSS to do
I've been using clamp instead of media queries for a while now. But using both with variables is brilliant. I absolutely love it.
clamp(3.5rem, 12vw + 1rem, 12rem) which is amazing. Now I will be use in my all projects
As always, great stuff. I think min, max, and clamp are pretty awesome.
this
“frontend friends.” for months i thought he was saying “friend and friends.”
Mind = blown 😮
Thanks!
Thank you so much!
Damn your responsive layout tutorials are so helpful and I'm a fairly experienced dev. I love the clamp thing. I have been using min to get something similar but I like clamp even more.
謝謝！
Thank you so much!
it's nice to see a video with material about which you knew for 6 months already
Danke!
Thanks so much!
@@KevinPowell We have to thank YOU! I realy love your style, the length of your videos and your content.
Man , that's absolute genius, been fighting with this for years! I'm saving this video with my legacy firefox youtube downloader, that vid going in my library!
The Clamp trick is amazing!!
Thank you for the tips!
Kevin, you are the fucking best, you know, right?. This week I learned A LOT from you. Your content is incredible. Everything I have to do and find out how to on my projects, I search and you explained it better than anyone.
Also finishing your CRL 21 days course
Thanks so much! So happy that you're enjoying me content 😊
I am so happy I found this channel 😭
Kevin, you are my savior! Yet another amazing video ❤️Thank you so so much and I wish you an amazing new year!
Great that you explain we should not base font size on the view port size. It is not how typography works. Typography works on view distance (and you eye sight) so unless our devices get a sensor to measure how far our eyes are away from the screen we are reading, we have to work by the experience we have. Here we are in luck as we already use type for centuries, so we have some experience. An experience that is supported by some science of the last century where reading over distance became a real thing, like how large should type be on a road sign...
The other great thing I would implement as soon as possible is to gather as much typographic parameters and behavior in one place, somewhere at the beginning of (css) files.
Man, why is this guy so awesome with CSS.
I've never heard about clamp, I loved it, thanks for the video.
Interesting!
I tend to use em (not rem) in all instances while making sure to always keep things very simple:
End-points (so , , tags and the like) get an EM value, all padding, margins, etc. use em values, image sizes use em values (with srcset so the image can be much larger but display properly based on the actual display needs) or vector art.
Then I will have "containers" like a or , or even a which can be designed to "mod" the size (say you want "big quotes", then that tag gets a font-size of 1.4em for example). Anything drastic or that could have many exceptions will be set using a class instead of a tag so that I don't have to override these em values constantly.
Then I just use my body's font-size as a responsive breaking point. That clamp trick would work wonders there, since it would affect the entire site's content within controllable bounds!
I don't know if you already watched this, but if not, take a look: ruclips.net/video/pautqDqa54I/видео.html
Objective and Useful video! Thank you!
Thanks for this video Kevin. Just used (clamp) for one of my designs after this. Super helpful.
He has video for my every css doubt
People really gotta clamp down on text like this :D
Defo my favourite RUclips coder ♥️
Awesome as always. You never disappoint!!!
good point about VW and accessibility issues.
Thank you, Kevin, that was precisely what I was looking for. I have subscribed for more. :)
Yet another great video Kevin! Thank you.
I love your approach. Great job.
Great, helpful staff. Love how you explain what I shouldn't use. Made my day. Thank you!!
As always, outstanding. Thanks, Kev!
Amazing stuff as always, thanks a lot!
I think the fall in love with CSS bit has drastically changed!
Excellent technique with the clamp + calc (implied)! :) Thanks!
Wooooow, you rock!!!
Your videos are awesome, clear and to the point.
This is so helpful. Thank you so much!
Really good stuff. I'm learning a ton from your videos. Thanks for putting them together.
Amazing work man, you have taught me a lot of things from your videos! Keep it up!!
This is fantastic, thanks so much for these fun vids
8:08
Why add 12vw + 1rem, when you zoom it won't scale right
Why don't you multiple 1rem by some vw instead so it will scale better when zooming?
Neat! I've tried to do this with .less and never was able to, this is really nice!!
What a great solution!!! I really enjoyed this vid (whilst eating breakfast ha ha). Thanks Kevin 👍🏻
Wow This is Great Man ❤️
awesome, exactly what I neeeded
Great video, thanks Kevin
Wonderful.
Understandable.
Incredibly useful.
Thank you.
Thank you for this video. Really helpful.
Great content as always! :) I really appreciate that you talk about pros and cons for every decision. I have only one question, if I read correctly clamps() is not supported by Internet Explorer... so how the page behaves when you open it in IE? I am not sure how many people still uses the IE but I think it is still in use in business segment.
IE what , IE who
@@ooogabooga5111 Internet explorer bruh
this video is awesome thanks a lot Kevin
CSS Variables - a great invention!
Great Video, Right now, was currently using vw, vh approach never heard of that clamp function seems really interesting, the only issue i see is the support. It's actually less supported than grid-layout, but surelly when browsers keep evolving will be a must use.
Clamp is a good one. Thanks. I kinda wish they had something where you could set a size based on the parent container's width instead of the whole viewport.
percent!
@@roberotful I 100% agree with what Rob said 😉 Or is it 80%? I don't know anymore.
Doesn't work for font-sizes though :(@@roberotful
@@ormuriauga I think setting font-size as percentage goes by percentage of the element-level font size, similar to em (I could be totally wrong, just my present understanding). I think percentage is a bit unintuitive for font sizes though, I usually use rem!
This is something I've been trying to figure out how to do via SCSS. Any chance you make a follow up with how to do this?
Keep up the great work.
Ok, honestly I rarely ever say that but today I actually learned something I didn't know about..,
Literally saved my day!!
Killer tutorial !
I have watched a few of your videos. Good work! But I have a question about your approach to the rem. For example, we can see 14px as a base font size in our mockups. There are several approaches: 1) to use 62.5% for HTML font size and 1.4rem for body, etc. 2) to use 100% for HTML and 0.875rem for body, etc. 3) to use 87.5% for HTML and 1rem for body, etc. 4) others? Wiche one do you prefer and why? The Bootstrap 4 sets $font-size-base: 1rem to the body and nothing to HTML. The Foundation sets $global-font-size: 100% to HTML and nothing to the body. Both of them think in the base font size categories (1rem). I had experience with fluid typography by changing the HTML font size with a formula with vw (14px on mobile to 18px on desktop). It works well until we don't have mockups for several screen sizes. You can't use fluid rem in Foundation if the gutter is the same on mobile/tablet/desktop mockups. Long story short: I'm looking for the best approach with rem/rem-calc()/sizes/typography.
ответ нашли на свой вопрос ?
Never change your fontsize to 62.5%. That's not a very wise choice.
@@permanar_ why shouldn’t you do that?,
Woah, clamp() is native CSS? Awesome!
I think scss is moving to native css.
Amazing video, thank you so much.
Great tutorial very helpful and demonstrates responsive text methods very well, thanks. I am not very experienced with css so this is a great introduction to responsive text. I am very interested to learn more about the overall layout design with this newspaper - magazine type layout which is great and makes the whole page more interesting to look at and more inviting to read. Do you have another video explaining the concepts behind this layout design? I can work out quite a lot from the code you kindly supplied in the codepen (thanks!) but some of the code I don’t understand. Thanks again!
Wow this is great! Thank you thank you thank you!!
LOVE that t-shirt!
whats with 499 and 599 and 699. almost every time you have you remove 99 to replace it with 00?
Clamp creates an s-curve for mapping font size to screen size. You can also achieve this with calc(#vw -#vw) but setting bounds with clamp() is much more Design Driven. Anything that helps detangle the mental exhaustion of mapping design goals to math is a big win
Thats awesome🔥🤯
Wow, that ‘clamp()’ 🤯 i didn’t know about it. Merci
bienvenue!
I like your css content
awesome job dude, thanks.
damn that is smart, never thought about root on media queries
thank you for help me : )
Great solution. And by the way you have exactly 350.000 followers by now.
🥳🥳
Please make a video about Z-index and how it works especially when working with ::before & ::after and how parent’s position might change things
I’m currently working on some things and it involves a lot of layering of stuff, and trying to use pseudo elements things don’t seem to work the way I thought they did
This might be what you're after: ruclips.net/video/uS8l4YRXbaw/видео.html
@@KevinPowell thanks a lot 🙏🏽
the answer i was searching for.
Pure gold right here.
Loved the t-shirt... and tutorial of course...
Thank you Kevin!
dude the vw is a miracle
pure gold
All fonts - make in Rem < and @media maybe change just a ----- Rem?
Really good stuff., thank You!
I've been sacrificing accessibility a bit on some of my projects by using viewport measurements, love the clamp idea. To solve the problem of vw getting super big/super small I had swapped to vh which I actually find to be a pretty good scalable solution - works well on both desktop and mobile once you find the sweet spot - if you don't mind it always being the same size regardless of zoom (which I think you obviously should mind now that I know clamp exists!)
I have been using a root vw font-size that is based to the Adobe XD artboard size.
I'm using scss functions to aid me with this but it can be done with calc.
this would look something like this:
html{font-size: calc(20 / 1280 * 100vw)}.
This will make it so that 1rem is 20px at a viewport width of 1280px.
As you resize the viewport this relation will stay the same.
Then you can use a different relation for a mobile width using media queries.
This allows not just my text but other elements with rem/em values to scale perfectly with the viewport width.
As a nice bonus I can use the same px values used on the XD artboard. I just have to convert them to em/rem.
I use scss functions for this again to keep things neat but you can use calc for this as well.
With a container width of 500px it would look like this:
width: calc(500 / 20 * 1em);
20 being the base font-size that is also defined in the root font-size.
This certainly brings a lot of advantages. My designer has a print background
so a lot of his layouts heavily rely on the right ratio between text and other
elements like images.
But of course there a downsites as well. Aside from running into some unexpected
bugs from time to time the two major issues are:
1. zoom accessibility
2. some layouts don't work very nice on larger screen sizes because you end up with very
litte content being visible at a time.
this might all be a bit much for a youtub comment but oh well xD
Those two :roots...yet another "oh, that's smart" moment in your videos. Thanks!
If I understand correctly, that 1rem of the 12vw + 1rem is just a token amount, so you can pinch the screen -- is that right? If so, is there any reason NOT to put similar measurements throughout your CSS? e.g. for the --fs-400, could you put .5vw + .5rem, or whatever the size equivalent would be?
Something that I don't really understand is:
Do I have to adjust the font-size for every element?
Because if I change the font-size of , every rem unit will adjust as well, which I don't want.
It seems, as if I should define all font-sizes via classes, which I think is unnecessary for all regular text. I just want to overwrite the font-sizes at each breakpoint, like I do with h1-h6 and so on.
Seems like your clamp scaling will behave differently depending on the zoom level. The lower & upper limits grow faster than the target (because zoom only affects rem not vw), so I would expect >100% zoom to min-out/max-out at a proportionally wider screens, and
I built a logo name slogan hero in svg and to approve the relations always stay the same gave the svg a relative unit. Works fine for all screen sizes and is super fluid, but is definately no work case for paragraphs 😄
Kev. can you please do a tutorial on css design system/layout/structure. I will really be looking forward to that. thanks
Awesomeness for sure! Q: Why would you not want to do the clamping for all the font settings?
There are ways to do it, but I find it's already finicky enough. Maybe I'll change my mind one day, but I find this balance works well for me :)
@@KevinPowell Is the lack of IE and other niche browser support of clamp() enough reason to be wary of using it?
@@DarKcS2 IE11 was the last IE version and isn't even receiving security patches any longer... non-chomium edge on the other hand is the new problem child... other than people that insist on their custom browser flavor of some weird webkit clone.
Great! ♥♥♥ :-) Thank you Kevin. Really helpful.
Thanks for the pro tips.
KEVIN SIR LOVE FROM INDIA ♥️🤘
KEEP UP THE GUD WORK 🙏🙇
waoo this just blew my mind
Thank you very much.
That is great when you have only one css file, but I use quite a few css files, one for images one for navigation etc, all my media queries are in one css file, easy to find what you are looking for indeed.
EDIT: all my roots are also within one css file.
I use clamps but let's say the max size is 32px, then when viewing on a 4k large monitor the font is small again and we go back to the media query solution...
What's a "headach"?
Did not quite get that part with adding 1rem to preferred size. like clamp(10px, 20vw + 1rem, 20px). could you elaborate on that Kevin please? Thanks
it's setting the base to 1rem, and adding 20vw to that 1rem number. It just means that if someone zooms in/out, the 1rem will actually be getting bigger/smaller and the size will change :)
@@KevinPowell I see. Thanks :) more clear now
there should be a one css line for responsiveness that will remove the stress of most people (but i know its very hard for one line for responsiveness automatically)
yeah, too many variables and things at play. Plus what fun would that be? 😅