Make your Fonts Responsive with Font Clamp - Shrink and Enlarge - Elementor Wordpress Tutorial

Using Elementor's breakpoints for Desktop, Tablet, Mobile Font Sizes is fine but you will notice jumps in the fonts as you shrink and grow your page size.

How can you make it more responsive?

With... FONT CLAMP!

And this video will take you through HOW and WHY :)

Make your Fonts Responsive with Font Clamp - Shrink and Enlarge - Elementor Wordpress Tutorial

We love to create - share - respond - and deliver.

Hire us to work on your Website!

[stevemarrs]

This solves my issue from earlier this week - will sit and go through my font sizes at the weekend.

[jaoortega]

I can't express my appreciation enough.. this solves a lot of my issues.. thank you brother for bringing this up..

[WilhelmC]

Great video about font responsiveness! Thank you!

[saucydee]

Fantastic. I'm going to fix this tomorrow!

[NOALNOM]

Another super clever way to set clamp globally is this:

h1, h2, h3, p {
font-size: clamp(
var(--fluid-type-min, 1rem),
calc(1rem + var(--fluid-type-target, 3vw)),
var(--fluid-type-max, 1.3rem)
);
}

h1 {
--fluid-type-min: 2.5rem;
--fluid-type-max: 5rem;
--fluid-type-target: 5vw;
max-width: 15ch;
}

h2 {
--fluid-type-min: 2rem;
--fluid-type-max: 4.5rem;
--fluid-type-target: 4vw;
}

h3 {
--fluid-type-min: 1.5rem;
--fluid-type-max: 2.5rem;
}

h2, h3 {
max-width: 30ch;
}

p {
--fluid-type-min: 0.9rem;
--fluid-type-max: 1rem;
--fluid-type-target: 2vw;
max-width: 60ch;
}

// AMAZING HUH?

[mazlanhalim]

Font clamp is a cool css function, thanks for sharing Imran.

This is good for headings, not for long texts where you can't adjust the line height based on size of the font.

[theskatingchoreographer]

First one to like, first one to watch, first one to comment, first one to enjoy (yet again) your amazing content my friend! I'm on the top of my game and so you are ;)

[NOALNOM]

Containers Queries are another gift from God 🎁😍😅😍😍😍

[PicSta]

Clamp is like min, a desired size, and a max size for the text. The min and the max are pretty much self-explanatory, but the two values for the desired width is the important part. The vw unit alone causes issues with zoom sizes (scaled resolutions) but the rem unit makes it zoomable. Try to zoom the text without the rem for the middle value, it fails. I hope this helps to understand it even better.

[mrrobotweb]

thanks a million, , this helped me with my work.

[borisnieminen]

Thanks Imran, that was great, cheers

[elevateyourcreativeness]

Is there any improvement on SEO scores using clamp vs pixels or rem? Moreover for accessibility issues?

[NOALNOM]

Clamp function is like a gift from God 🎁😍😅

[johnboyd]

I found that within the app, I can change the PX to REM. I'm hoping this will make it even more usable.

[lucylink]

I can't tell you the amount of time I have spent fiddling about making a standard, reusable/adaptable set of @media queries for big text areas in the last couple of months. And along you come with this. I just dumped mine, this is brilliant and you sir are a hero.
One question, if you are going to use this site-wide, what do you put in the global styles? Or do you just leave them unset?

[ekikoo]

Hi! Could this idea be implemented to nav menus that have many pages, to prevent that on smaller laptop screens the menu items stack into two rows? Assuming there's a logo on the left side, and social icons on the right side of the menu column... Thanks!

[elevateyourcreativeness]

Can’t the clamp code be placed where you would normally choose font size

[nemo]

hello, can we hope for an update of this same tutorial ? because with 3.10 we can do it natively but I can't find any documentation

[sanjeevd]

Font clamp not working different devices. Exa samsung galaxy mobiles not working any solution ?