Font Clamp Crash Course

[@StarleneBreiter]

As always, your videos are super helpful, thanks so much!

[@QuaverloveStudio]

Great refresher. Thanks. Imran.

[@drafted-swiss]

Thank you so much Imran! This was super helpful for me! One question though: would you use clamps on Line Height too? To get a somewhat pleasing result, would you increase the numbers for the line height in your calculator to ensure readability? Thank you again for the topnotch content you providing to us!

[@websquadron]

You can and I covered that in a separate video. My tip is that if your Min Font is 16px then add +5 to set the line height to be 21px, or if the Max font is 40px, then set the line height to be 45px. Or to keep it simple, set it to be 1em for all.

[@MbonisiM]

2:53 thank you for the packs, i will try it out if I manage to get a client It is so detailed for ease understanding. Cheers😁

[@websquadron]

You will get clients. Slow and steady.

[@ohia5654]

Nice! I was just writing CSS for this for WordCamp Granada. You should come!

[@websquadron]

Next time!

[@caknuckler]

This is in the websquadron course which I highly recommend. A problem I have is I don’t know what size fonts should be on mobile , desktop etc. lots of conflicting info out there. I’ve set all my h1,h2 etc to certain sizes in Global fonts but mostly just guessing. Anyway this is great stuff as usual.

[@chideradigitalfreak]

According to Material Design guidelines for UI UX, the recommended font sizes for desktop, tablet, and mobile devices for heading elements (h1 to h6) are as follows: 1. Desktop - h1: 96px - h2: 60px - h3: 48px - h4: 34px - h5: 24px - h6: 20px 2. Tablet - h1: 60px - h2: 48px - h3: 34px - h4: 24px - h5: 20px - h6: 16px 3. Mobile - h1: 48px - h2: 34px - h3: 24px - h4: 20px - h5: 16px - h6: 13px These font sizes are part of the Material Design system and are optimized for readability and visual hierarchy across different screen sizes. Adhering to these recommendations can help create a consistent and user-friendly design experience for your website or application. Remember, these are suggested font sizes and can be adjusted based on your specific design needs and preferences. The goal is to ensure that the text is easily readable and maintains a clear hierarchy within the content. You can do a Google search about material design system.

[@xenicmark]

If I remember correctly, the desktop viewport size is the default viewport. Everything inherits from that. Even the ultra-wide viewport sizes. So if make any other layouts for wider viewports, they still inherit from the desktop. I learned this the hard way after doing all these calculations and having to go back and do them all over again.

[@websquadron]

Yup buts that why you set the max and min there :)

[@DavidBenamou]

Thank you so much. Very usefull and perfectly explained. As ever....

[@websquadron]

Glad it was helpful!

[@JulietteBurns-zq7dj]

Hi Imran, thanks for another lucid explanation. One question: do the Elementor breakpoint settings override font clamp settings? Should I clear them? Thanks.

[@websquadron]

Always clear them and add for clamp for the Desktop

[@DMLeBeau]

I have used it before, and it works great. I never used it for images.

[@websquadron]

Can work really well when you have an image needs to shrink. If you're using % size, then it won't matter.

[@rg-web-design]

Here's a challenge for you! Sometimes, I like to keep a header logo or an image at a certain VW. So, as the screen width shrinks, the VW of the logo / image increases. Is there a calculation for a 'reverse clamp' for such scenarios?

[@websquadron]

Can you give me an example; So when the screen width is 1200px, then the image size is x%. And when it grows to 1600px then the image size is y%

[@rg-web-design]

@@websquadron Yeah, so lets say I have a header logo. At 400px, it needs to be 10vw but at 1100px, it needs to be 20vw. How would you calculate a clamp for that?

[@websquadron]

VW Clamp !

[@websquadron]

@@rg-web-design Here you go! kzbin.info/www/bejne/jGOoiIZ5nrp2mbcfeature=shared Enjoy!!!

[@rg-web-design]

@@websquadron Cheers, but I gave the wrong example! What I meant was that at desktop, the VW should be 10 and on mobile it should be 20, so it INCREASES as the screen shrinks. Like a 'reverse clamp'. Sorry for the confusion, but I hope that clears things up!

[@chibuzorstanley8888]

Great Video!! Thanks for sharing 💪🏽🫡 Can this also be used for line height?

[@websquadron]

Yes, I add 5px or 0.325REM for the Line Height

[@chibuzorstanley8888]

Great, Thank you@@websquadron

[@eafdafev]

Love the tool, but I'm sorry to say I cannot seem to edit the green sections in the excel workbook. I've tried 3 browsers without any luck. Did a permission level change on the excel workbook and those green sections are no longer editable? Thank you

[@websquadron]

Thanks for letting me know. OneDrive for some reason removed the 'interaction' setting. Not sure why? It's been manually added now :)

[@SuburbanPhilosophy]

nice trick but tbh, how many normal users shrink windows of browsers? in special now when 70% of trafic come from mobile devices?

[@websquadron]

In the old days, people would try to build sites for many mobile devices, but with Font Clamp your text will appear reasonably sized whether the mobile is 350px width or 490px.

[@PameFigueroa]

Thank you! I have a question, please if you can help me with this, what happen with the bigger screens? like 1920x1080? what happen in between the 1920 and the 1100? because in the 1920 the font size of a screen of 1110 looks very small. thank you again! you are a great guide, the best

[@websquadron]

You could set the maximum to be 1920 or higher and it would also depend on if you are building with boxed width or full width

[@PameFigueroa]

other question takes breaks my head... how to deal with the height of browser navbar in responsive design? because all its calculate if there was not a browser navbar and all devices had it, all users have to watch the website in browsers with navbars! in vh for examples, do not work exactly in 100% of heigth, please if you can help me with this too, thank you!

[@PameFigueroa]

@@websquadron thank you so much, if you can help me with the other question please, i dont get anything about that subject, thank you again!!

[@pburmester]

Great video, as always. One question, shouldn't the min and max value be in relation to the size of my Elementor containers? Also, don't you think this should be some Elementor native function? Thanks again Imran!

[@websquadron]

4 June 2024

[@pbella29]

Hey - great video. When using Elementor, where can you paste this as CSS rather than entering one-by-one in the editor? Many thanks!

[@websquadron]

Site Settings - Custom CSS, or you can add to Appearance > Themes > CSS.

[@meisterleise]

Hey imran, thank for this video. I'm using this fluid font styling since several years. Your website calculator is very nice. Anyway I miss one important thing: the fluid calculation for the line-height. And one more thing: how did you build the calculator? would be very cool to see a tutorial about that one day! 😉

[@websquadron]

I tend to add 5pm or 0.325 rem for line height. So if your max size is 5 rem then the line height is 5.325

[@meisterleise]

@@websquadron Hmm - I think that's not good. If your e.g. H1 uses the fluid system the line-height should be fluid also. When your h1 goes from 2.7rem to 4rem the line-height should not be fixed 4.325, because it would look ugly to the 2.7rem - don't you agree?

[@clintt5266]

I'm confused by the Global Fonts styling vs Typography. As I understand it, Typography (H1, H2, H3 etc) is for *SEO* and not necessarily styling. For example, sometimes you want your headline big, but it's not something that you want Google to think is the most important thing on your page - so a smaller sized text block lower on the page might have all the SEO text you want to tag as H1. I've always felt having H1 largest by default is not a good strategy.

[@websquadron]

See this: kzbin.info/www/bejne/qqrGaKt-qsZpjNEfeature=shared

[@randbaldwin]

When do you see font sizes jumping? When you resize your browser window? I love smooth scaling fonts, but I don't sit there and resize my browser to see what happens if I'm just browsing. My browser is what it is and I see it at that size. Most people just show up and see what they see. What is important is that what they see is good. What is less important is how it acts if they gradually resize their browser.... Who does that besides us dev geeks?

[@websquadron]

4 June 2024

[@websbox]

font size ok. There's no problem with that. what about line heights?🤔

[@websquadron]

You can do the same there too. I tend to set my Line Height to be 5 PX or 0.325 REM. So if your Font is 16 PX (1 REM), then line-height set at 21 (1.325 REM).

[@aranchin-yo6wy]

Do you only apply thos to one viewers size say desktop size anf then it will adjust or do i we have to put the formula in everysingle breakpoint?

[@websquadron]

Just desktop and it passes through

[@aranchin-yo6wy]

@@websquadron awesome! Thank you