The clamp() CSS function and Responsive Typography

All right, we're going to learn about the clam function and how to use it to make our typography responsive. So just to walk you through the code right now, I only have this simple paragraph here and in my CSS I just have a bunch of media queries to resize this text on different text sizes. Above this I have some other stuff but we don't need to worry about that. That's just some stuff from Tailwind and Next.js. We need to concern ourselves with these styles right here and use media queries. Let's see what this looks like. So you can see we have a headline here and if I resize my screen it does shrink right here for instance. It does get smaller and right here as well but this approach has a few problems. First it's just not smooth enough because you can see it just it's like a sudden change right here. it's not smooth and it's not dynamic and also it takes way too many media queries way too many lines to actually make it work so this is just messy and not really maintainable so instead of this what i'm going to do is i'm going to remove all of these media queries i'm just going to comment all of these out. This one and this one and lastly this one as well. And instead of all of this, I'm just going to go, okay, comment this one as well. Go up here in my paragraph and change the font size to use this new clamp function which what it's going to do is take these values, 2.25 rem and 1.35 rem plus 3 viewport width units and lastly 3.75 ram. Now if I do that and save that and let's go and see what we have now and you'll see a change immediately. First the text resizes itself without any media queries. As I resize my screen the text changes as well. We don't have any more media queries and also the resizing is a lot more smoother now so with media queries you have this sudden change in the text size but with this function you don't need to worry about that it's all very smooth and very like dynamic and not only does this look and feel much better but it also takes up just one line of code so instead of all these media queries all you need is just one simple line of code and you can make your entire text responsive with that. So here I just put some values that don't really mean anything right now. What exactly is this clamp function and what is it actually doing and what do these values even mean? We're going to talk about this clamp function in CSS and specifically how we can use it to make our text responsive and as you can see in just one line of code. And with all of the features that modern CSS has given us, we don't really need to use all of these media queries anymore. We don't need to use these for making our text or anything else responsive. We have a ton of other features just like this clamp function to make elements on our websites responsive without using media queries at all. And when it comes to responsive text, at least, this clamp function has become the standard way to write text on the web now. And everybody using it So we going to go over what this function is what kind of values it accepts how it works why it works and how we can use it in any of our own projects really So the clamp function is basically a CSS function that looks something like this If I go down here, and this is bad syntax, by the way, but just to illustrate an example, it takes three arguments, a minimum value, a let's call this a variable value and a maximum value and so it takes three values these min and max values are basically the minimum and maximum size that your font size can grow to so if you look at this paragraph it has a minimum value of 2.25 ram which means that this text will never be smaller than 2.25 ram same thing over here with the maximum value we have a maximum value of 3.75 ram set over here which means that this paragraph will never be larger than 3.75 rem and this variable value in between this is going to tell the browser how to like scale this this font size up and down within these minimum and maximum boundaries so to make this more practical let's create a heading element right here and i'll give it a font size of let's say clamp 2 rem which means it will never be smaller than 2 rem this is the minimum value and for the variable value i'll give it 6 viewport width units i'll explain what these units are in a second but for a maximum value let's give it 5 rem so this will not be larger than 5 rem and let's go back over here and create a headline over here and let's just say this is a heading 1 okay save that get back up here and you can see as I shrink this it shrinks as well and it will never be smaller than 2 rem if I inspect this and go over here and find the font size you can see it's 32 pixels which is equal to 2 rem and if I increase the screen size it will do the same thing over there as well it will never be larger than 5 rem which is the maximum value that we defined so let's talk about this viewport width unit right here because it's easy to understand what the minimum and maximum values are doing okay my text is not going to be smaller smaller than this or larger than this it's easy to understand that but what is what is this uh viewport width unit and what is this variable growth rate in the middle so let's talk about that so this weeds a view viewport width unit basically means the width of your viewport or basically your screen so basically these screen size and i can control this just by dragging this dev tools or by just getting a larger screen but this is basically the screen width and the cool thing about this is that it can change dynamically with the screen size so if i just remove all of these styles and let's just start fresh up here. I'll give my paragraph a font size and we won't use clamp this time. We'll just say let's say six viewport width units. Save that and I can remove this heading. Let's just have a paragraph. Save that and go up here. You can see I'm not even using the clamp function anymore but we still have responsive text But this does have some issues Since there no like minimum and maximum values that we define this can become really really small on small screens You can see right here, it just shrinks into basically nothingness. And on large screens, again since it has no limit, it can become extremely large. So it does give us one advantage, which is that it makes our text responsive. As I resize my screen, the text resizes with it and we don't need any media queries and text still resize it itself but this does have two major issues and the clamp function allows us to fix both of them at the same time. So the first problem is that this viewport width unit it doesn't allow us to define a minimum and maximum value which is why it can just shrink and grow to insane sizes basically. So that's why we need clamp first of all to define a minimum and maximum boundary for our text so it doesn't grow or shrink too much and secondly you can see as I resize this the growth rate is way too fast it's growing and it's shrinking really really fast and that's just not good so we need to control that a bit more and clamp will allow us to do that so going back to my code let's look at another example let's remove this and use clamp over here again again I'll say my minimum size should be 2 rem, my growth rate should be 6 viewport width units, and my maximum size should be 5 rem. And now at the very least I have some minimum and maximum values and it's not going to go anywhere beyond those minimum and maximum boundaries that I defined. So we've solved the first issue which is having a minimum and maximum boundary for our text. Next we need to fix the growth rate because we don't want it to grow or shrink way too fast. We want it to be a bit more slow, a bit more dynamic. So to do that we're going to use a calculator online which you can find right here. And by now you should have a pretty good understanding of how this clamp function works under the hood. It just needs a minimum value, a maximum value and a growth rate which defines how how fast or how slow your text is going to grow within those minimum and maximum boundaries that you define so to calculate this I'm going to go over to Google and I'm going to type clamp calculator and I usually just use this function calculator from Mark Bacon you can just google clamp calculator and basically there's a hundred others if you want to use something else but this basically just takes a couple of inputs and then it will give you a clamp function that you can just copy and paste into your css code so we just need to fill out these four inputs we need to give it a maximum and a minimum font size we already covered that just look at what the smallest font size is that you want and what the maximum font size you want is and then just put those over here so let's say i'm going to give it let's say 2.25 ram for the minimum size and 3.75 for the maximum size and now you also need to give it the minimum and maximum viewport range which basically just means how small or how large your screen is going to get so for the minimum screen size this is usually just going to be your mobile breakpoint or how small your screen is going to get I just going to put 480 pixels over here and the maximum screen size this is usually just going to be your large screens or desktop break points and i'm just going to put 1280 pixels over here now if i do that this is going to give me this clamp value and i can just copy that and paste that in my code right here replace this with this new one and the cool thing about this is that i don't have to like figure out the growth rate the optimal growth rate on my own i can just use this calculator and just plug in some values and it will give me the best growth rate for my text automatically so if i go back to my browser up here you can see that this actually does work and it does resize the text and it would actually look good on mobile and desktop both and this is actually a really good size to have for a headline it looks good on both desktop and mobile now one thing to discuss over here is this ram value in between we are adding a ram value to the viewport width units over here instead of just using three viewport width i'm saying three viewport width plus 1.35 ram and the reason i'm doing this is because viewport width units on their own are not accessible. So if I zoom in my screen, if I don't have the rem value here, the zooming is not going to change my text and that's just not accessible. That's why we use the rem value over here. So if I just remove all this and just to show you one more example, if I have let's say one rem, six viewport width, and let's say 3 rem of maximum size if i save that and notice i didn't add a rem value over here in between in the middle value here if i go back here let's look at the font size that we have over here and finally it's 48 pixels which is 3 rem so we're on at the maximum size so let's shrink this a bit and now we're at some random value that's coming from this viewport width unit if i zoom in my screen now it doesn't change it you can see that i can keep zooming till about let's say 250 and it doesn't change anything once i go beyond 250 it does zoom in and change the text size but until then it doesn't really do anything and that's just not accessible so to fix that we need to add a rem value to it and that basically fixes it so if i remove this and go back over here where we do add the ram value to the viewport width and save that if i zoom in now you'll see it works perfectly and if someone has eyesight issues and they want to zoom the screen in they can actually do this and it does work for them as well so that's the reason we need to use a ram value in everywhere basically and if we don't use it it's not accessible if we do use it then we have a more accessible website and with this handy little calculator that we have over here we just need to plug in some inputs and it will give us the best client value to use for our text and we can basically just use this for all of our text our headings subheadings body text small text all of it and we don't need any media queries we just need a single line of code and we can make all of our text responsive and completely like reliant on the screen width for resizing anyway that's all we had to cover use this in your projects and have fun