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!
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.
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.
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 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 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
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 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'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!)
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.
I have another method that works quite well for me. First, on root, I add a base font size with viewport width units, and then media queries that change that base font size. For example, for large screens "font-size: 1vw", but for smartphones "font-size: 3.5vw". Then I set everything using clamp usually, just to make sure that everything is in line and doesn't get oversized. Example "font-size: clamp(16px, 1rem, 22px);" It works great for me, and everything scales almost fluidly when resizing the window. I also use this root font size for margins and padding as well in some cases.
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
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.
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.
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)
This is a great approach thanks Kevin, the vars, I have been struggling to get my clamps just so with this last project I am working on and am thinking I will drop it for the custom variables approach for future projects and give the IE browser a fallback. One thing I'd like to add, the mobile body text needs to be 1.3 times bigger than desktop because people tend to hold the mobile screen further from their face.
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.
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?
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
What do you think about using an alphabet like the phonetic alphabet --fs-alpha: 10rem; --fs-bravo: 5rem; --fs-charlie: 4rem; --fs-delta: 3.5rem; do you think this is silly 😅
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...
@@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.
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 😄
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
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?
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
“frontend friends.” for months i thought he was saying “friend and friends.”
Mind = blown 😮
As always, great stuff. I think min, max, and clamp are pretty awesome.
this
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.
it's nice to see a video with material about which you knew for 6 months already
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!
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.
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 😊
Kevin, you are my savior! Yet another amazing video ❤️Thank you so so much and I wish you an amazing new year!
Thanks for this video Kevin. Just used (clamp) for one of my designs after this. Super helpful.
I've never heard about clamp, I loved it, thanks for the video.
Thanks!
Thank you so much!
Thank you, Kevin, that was precisely what I was looking for. I have subscribed for more. :)
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: ua-cam.com/video/pautqDqa54I/v-deo.html
Awesome as always. You never disappoint!!!
I am so happy I found this channel 😭
I love your approach. Great job.
Objective and Useful video! Thank you!
Man, why is this guy so awesome with CSS.
People really gotta clamp down on text like this :D
Yet another great video Kevin! Thank you.
Great, helpful staff. Love how you explain what I shouldn't use. Made my day. Thank you!!
As always, outstanding. Thanks, Kev!
Wooooow, you rock!!!
Your videos are awesome, clear and to the point.
Really good stuff. I'm learning a ton from your videos. Thanks for putting them together.
Excellent technique with the clamp + calc (implied)! :) Thanks!
This is so helpful. Thank you so much!
Amazing stuff as always, thanks a lot!
He has video for my every css doubt
Amazing work man, you have taught me a lot of things from your videos! Keep it up!!
good point about VW and accessibility issues.
I think the fall in love with CSS bit has drastically changed!
Defo my favourite UA-cam coder ♥️
This is fantastic, thanks so much for these fun vids
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.
Neat! I've tried to do this with .less and never was able to, this is really nice!!
Danke!
Thanks so much!
@@KevinPowell We have to thank YOU! I realy love your style, the length of your videos and your content.
What a great solution!!! I really enjoyed this vid (whilst eating breakfast ha ha). Thanks Kevin 👍🏻
謝謝！
Thank you so much!
thank you for help me : )
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
awesome, exactly what I neeeded
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!
Great video, thanks Kevin
Thank you for this video. Really helpful.
this video is awesome thanks a lot Kevin
Wonderful.
Understandable.
Incredibly useful.
Thank you.
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.
Wow This is Great Man ❤️
Ok, honestly I rarely ever say that but today I actually learned something I didn't know about..,
CSS Variables - a great invention!
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!)
Amazing video, thank you so much.
whats with 499 and 599 and 699. almost every time you have you remove 99 to replace it with 00?
Wow, that ‘clamp()’ 🤯 i didn’t know about it. Merci
bienvenue!
Wow this is great! Thank you thank you thank you!!
Literally saved my day!!
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
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?
the answer i was searching for.
I have another method that works quite well for me.
First, on root, I add a base font size with viewport width units, and then media queries that change that base font size. For example, for large screens "font-size: 1vw", but for smartphones "font-size: 3.5vw".
Then I set everything using clamp usually, just to make sure that everything is in line and doesn't get oversized. Example "font-size: clamp(16px, 1rem, 22px);"
It works great for me, and everything scales almost fluidly when resizing the window. I also use this root font size for margins and padding as well in some cases.
What clamp generator tool do you use?
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
Woah, clamp() is native CSS? Awesome!
I think scss is moving to native css.
awesome job dude, thanks.
Really good stuff., thank You!
LOVE that t-shirt!
Killer tutorial !
damn that is smart, never thought about root on media queries
Loved the t-shirt... and tutorial of course...
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?,
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.
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? 😅
This is a great approach thanks Kevin, the vars, I have been struggling to get my clamps just so with this last project I am working on and am thinking I will drop it for the custom variables approach for future projects and give the IE browser a fallback. One thing I'd like to add, the mobile body text needs to be 1.3 times bigger than desktop because people tend to hold the mobile screen further from their face.
Thank you Kevin!
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.
What's a "headach"?
Thats awesome🔥🤯
Great! ♥♥♥ :-) Thank you Kevin. Really helpful.
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?
Pure gold right here.
I like your css content
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
All fonts - make in Rem < and @media maybe change just a ----- Rem?
What do you think about using an alphabet like the phonetic alphabet
--fs-alpha: 10rem;
--fs-bravo: 5rem;
--fs-charlie: 4rem;
--fs-delta: 3.5rem;
do you think this is silly 😅
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...
Why do you always use hsl for colors? Is it a pereference thing?
Thanks for the pro tips.
pure gold
Great solution. And by the way you have exactly 350.000 followers by now.
🥳🥳
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.
scss and custom properties are like gems in a gemstone collection of css properties.
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 😄
What about line-heigth? Can we use clamp() with it?