Some good practice is: (below shows Desktop and then Mobile - by using Font Clamp we can make it responsive for any screen size). H1= 48px 32px H2= 32px 26px H3= 26px 22px H4= 22px 18px H5= 18px 16px H6= 16px 16px Body = 16px 16px
Big thanks! Spent a lot of time on this :) Was building a HTML version but the allow to copy all in one go did my head in, and building in a shareable Google Sheet was annoying, thus resorted to an embedded Excel Sheet instead. The great bit is being able to copy and paste it elsewhere all for record-keeping if you ever need to reflect on what Min and Max values were created.
This is definitely the best video I’ve watched in the last year about CSS. I always fought to get my font size right on different screen sizes … but this is so game changer!! It is now so easy to get the font the right size what ever the screen you are using to visit a website. Thanks a million for sharing that video and sharing your spreadsheet to generate the CSS code for each heading and paragraph. Don’t take it off of your website! I’m using it everyday haha!
Pure AWESOMENESS Imran! I haven't seen anybody on UA-cam teaching us this. Which is ironic as this is a very important area in design. You have saved me hours of work. Thank you. Keep it up mate!
This is great. Is slope and y-intercept always the same value? I would like to make app for clamp, but have been stuck on those calculations and how they apply as well as the different Type scale ratios are calculated.
Hi Imran - great video - I guess I could also copy that to Code Snippets Pro CSS snippets? Right? Does this code only work with Elementor which supports it or does it also work with other page Builder? Cheers Edy
Amazing video as always!!! But I was wondering, how do I achieve the hierarchy of each header size because from your example all the headers were the same size. Do I go per every line item and tinker with the settings before copying?🤔
That's because I didn't alter it, but when using the calculator, you would set your alternate sizes. Some good practice is: (below shows Desktop and then Mobile - by using Font Clamp we can make it responsive for any screen size). H1= 48px 32px H2= 32px 26px H3= 26px 22px H4= 22px 18px H5= 18px 16px H6= 16px 16px Body = 16px 16px
How does clamp work with line height??? I can't seem to figure that part out. the normal font size works great but the line height is way too much! Thanks!
In this scenario be careful as line height can get messy. The rule I like to follow is keep the LH set at the same value as the font or 0.5 higher. So if the font size min is 1rem and the max is 3rem then set the line height to be left as it is so need for clamp - or make it min 1.5rem and the max 3.5 rem.
Hi Imran, thanks a lot for this. Do you have any idea why it wouldn't work on my site, though? When I put line by line into the widget editor, it works fine, but dropping it into the site wide custom CSS has no effect. Why?
Is that because you've already added sizes into any Headers, or set sizes in Global Fonts or Typography? Or are you using a Theme that comes with a built Font system?
Hi, I am wondering about why setting max width bigger than 1140px (elementor default), especially if a whole page is "boxed". On the other hand the smallest breakpoint in elementor is by default 360px. Some stats say that even in 1st world countries there are 360px up to 9% on mobile devices. So my conclusion would be a range from 360 to 1140. Can you give your considerations for a best practice viewport width range?
I believe a common way to set the root font size is to set it to 62.5%. So: html { /* 10px */ font-size: 62.5%; } or if you like to keep things tight: html {font-size: 62.5%; }
@@tripwire8457 Agreed that - html {font-size: 62.5%; } - is the better option. In fact I've removed that part off the sheet so that users can add themselves where required.
Wait wait wait there is a problem your sheet is giving the headings exactly same values like H1 is 16, H2 is also 16 and then upto body, what if I want h1 to be 32px instead of 16🙄
One day I will crack that HTML-Super-Page with built in AI that virtually slaps (your face, butt, or belly-button) when you enter unreasonable values that are only useful for Nokia 3210 screens.
Great cheat sheet, especially with the new custom units in Elementor 3.10. if you want to super-charge the clamp generation without having to copy/paste from a Google sheet and you are happy to dive into SCSS, you can use SCSS mixins for that. You just enter something like "font-size: clamp-calc(16, 80, 1600, 380);" and get the proper output. This way you can quickly change values without needing to go back to a generator sheet. I created a codepen for that. Let me know if I can share it here.
Rule #1 in the dev community: Post your link or past the code. Do NOT talk about how amazing your scripts are and that you could share it but eventually not providing anything. You helped more by not writing any comment. This is really annoying.
@@websquadron That is very kind - I need to apologize for that message - I hope it did not sound rude. I really appreciate you guys building this out and sharing it with us. It's a great tool. I am grateful.
Some good practice is: (below shows Desktop and then Mobile - by using Font Clamp we can make it responsive for any screen size).
H1= 48px 32px
H2= 32px 26px
H3= 26px 22px
H4= 22px 18px
H5= 18px 16px
H6= 16px 16px
Body = 16px 16px
Dude, this is dope! Being able to set it all in one place and copy/paste all of it is super handy.
Big thanks!
Spent a lot of time on this :)
Was building a HTML version but the allow to copy all in one go did my head in, and building in a shareable Google Sheet was annoying, thus resorted to an embedded Excel Sheet instead.
The great bit is being able to copy and paste it elsewhere all for record-keeping if you ever need to reflect on what Min and Max values were created.
This is definitely the best video I’ve watched in the last year about CSS. I always fought to get my font size right on different screen sizes … but this is so game changer!! It is now so easy to get the font the right size what ever the screen you are using to visit a website. Thanks a million for sharing that video and sharing your spreadsheet to generate the CSS code for each heading and paragraph. Don’t take it off of your website! I’m using it everyday haha!
Pure AWESOMENESS Imran! I haven't seen anybody on UA-cam teaching us this. Which is ironic as this is a very important area in design. You have saved me hours of work. Thank you. Keep it up mate!
My pleasure!
This is great. Is slope and y-intercept always the same value? I would like to make app for clamp, but have been stuck on those calculations and how they apply as well as the different Type scale ratios are calculated.
You can Google the exact calc :)
Fantastic job, Imran! Your hard work and dedication are truly appreciated. Keep up the great work!
Cheers mate.
this channels consistency and cool info brings me such joy to my job lol literally. thankyou ❤❤❤
Thanks for the love, and if you ever spot me doing anything wrong, do let me know.
Hi Imran - great video - I guess I could also copy that to Code Snippets Pro CSS snippets? Right? Does this code only work with Elementor which supports it or does it also work with other page Builder? Cheers Edy
Built for Wordpress as it's just standard CSS :)
Use it anywhere where code/css can be added.
Wow, you have some obsession with clam... cheers for it, new sub here
Gracias excelente información ... Saludos desde Colombia....
Very helpful channel/site.
Very useful, I have a question that how to set the font line height with Clamp?
You may need to add it into the Custom CSS with the following syntax {line-height: etcetra;}
You are a Star Imran, very useful, this will save so much time. Big thanks.
Amazing video as always!!! But I was wondering, how do I achieve the hierarchy of each header size because from your example all the headers were the same size. Do I go per every line item and tinker with the settings before copying?🤔
That's because I didn't alter it, but when using the calculator, you would set your alternate sizes.
Some good practice is: (below shows Desktop and then Mobile - by using Font Clamp we can make it responsive for any screen size).
H1= 48px 32px
H2= 32px 26px
H3= 26px 22px
H4= 22px 18px
H5= 18px 16px
H6= 16px 16px
Body = 16px 16px
@@websquadron many thanks for this, you're a star 🌟
just found this - excellent work Imran. Did i hear you have done something similar for padding?
Yup - see this:
ua-cam.com/video/aiZdDRqEfII/v-deo.html
How does clamp work with line height??? I can't seem to figure that part out. the normal font size works great but the line height is way too much! Thanks!
In this scenario be careful as line height can get messy. The rule I like to follow is keep the LH set at the same value as the font or 0.5 higher.
So if the font size min is 1rem and the max is 3rem then set the line height to be left as it is so need for clamp - or make it min 1.5rem and the max 3.5 rem.
awesome stuff, now i just need to check if it over rides pervious elementor or theme settings or not
Let me know!
Hi Imran, thanks a lot for this.
Do you have any idea why it wouldn't work on my site, though? When I put line by line into the widget editor, it works fine, but dropping it into the site wide custom CSS has no effect. Why?
Is that because you've already added sizes into any Headers, or set sizes in Global Fonts or Typography?
Or are you using a Theme that comes with a built Font system?
Hi, I am wondering about why setting max width bigger than 1140px (elementor default), especially if a whole page is "boxed". On the other hand the smallest breakpoint in elementor is by default 360px. Some stats say that even in 1st world countries there are 360px up to 9% on mobile devices. So my conclusion would be a range from 360 to 1140. Can you give your considerations for a best practice viewport width range?
I tend to go for 360 and 1100 generally.
@@websquadron thx, you may have heard my sigh of relief 😁
Very well done.. thanks for a VERY valuable tool.. Yes it's not pretty at all.. it's BEAUTIFUL!
Thank you very much!
Great video mate, Thanks very much
Difference between clamp and clamp repeat size tabs?
Repeat tab allows you to enter once at the top and it passes down the max and min thresholds
@@websquadron Thx
Thanks imran! very helpfull.
Awesome Boss
Told you it was coming :)
@@websquadron Take love boss💗💗🥀🥀
Would we need to make Root = 10 when working in Bricks?
Yes, but I have removed the Root HTML part temporarily just to have another think about it, as some may get that wrong.
I believe a common way to set the root font size is to set it to 62.5%. So:
html {
/* 10px */
font-size: 62.5%;
}
or if you like to keep things tight:
html {font-size: 62.5%; }
@@tripwire8457 Agreed that - html {font-size: 62.5%; } - is the better option.
In fact I've removed that part off the sheet so that users can add themselves where required.
Dope!
Wait wait wait there is a problem your sheet is giving the headings exactly same values like H1 is 16, H2 is also 16 and then upto body, what if I want h1 to be 32px instead of 16🙄
There are 2 tabs.
One will repeat the max and min and the other lets you enter independent values. The sheets are fine
Nice job my friend
One day I will crack that HTML-Super-Page with built in AI that virtually slaps (your face, butt, or belly-button) when you enter unreasonable values that are only useful for Nokia 3210 screens.
@@websquadron LMAO
Great cheat sheet, especially with the new custom units in Elementor 3.10. if you want to super-charge the clamp generation without having to copy/paste from a Google sheet and you are happy to dive into SCSS, you can use SCSS mixins for that. You just enter something like "font-size: clamp-calc(16, 80, 1600, 380);" and get the proper output. This way you can quickly change values without needing to go back to a generator sheet. I created a codepen for that. Let me know if I can share it here.
Please share it with us!🙏🏻
Please share
Rule #1 in the dev community: Post your link or past the code. Do NOT talk about how amazing your scripts are and that you could share it but eventually not providing anything. You helped more by not writing any comment. This is really annoying.
UG! help! I use this Clamp Generator all the time - I just went there it is now read only - begging - please unlock this 🙂
It should be interactive. I’ll check again
@@websquadron That is very kind - I need to apologize for that message - I hope it did not sound rude. I really appreciate you guys building this out and sharing it with us. It's a great tool. I am grateful.