Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.2 Responsive Headers With FitText

Now that we understand the limits of using viewport units for text sizing, let’s talk about a JavaScript library that will resize our text for us. In this lesson, you will learn how to create responsive text using FitText.

Relevant Links

2.2 Responsive Headers With FitText

Hello, and welcome back to Essential JavaScript Libraries for Web Typography. Now that we understand the limitations of using viewport units to resize our text, let's talk about a couple of JavaScript frameworks that make this very easy for us. And the first one we're gonna talk about is called FitText, and you can find the website for that at fittextjs.com. And this does just what we've been talking about. It allows you to responsively resize your text based on the width of the parent element. And what's happening in the background here is that FitText is basically just performing some calculations based on the width of the parent element to determine what size to make the text. So as you resize your browser window, it's constantly performing those calculations over and over again and resizing your text accordingly. So if I turn on my web developer tools here in Chrome and then resize the viewport, we can see that text automatically resizing to fit the width. And again, it's very similar to what the viewport width unit did for us in CSS, but it's a lot more flexible and doesn't have a lot of the drawbacks or limitations of using the viewport with the unit. So let me close our web developer tools here. And you'll notice that this FitText website, it's just a one page site and there's no documentation here. Usually with a JavaScript library, if you don't see documentation on the website, you'll see it on their GitHub page. And you'll see here there is a link to download on GitHub. So we can click on that to take us over to their GitHub site. And as we scroll down a little bit, we can see this README file which has all of the documentation we need. So this is very simple to use, we're going to discover that in just a moment. But you'll notice first of all that it does use jQuery. So you need to make sure to include jQuery before you include the FitText library. And then using it is as simple as pointing to the item in jQuery that you want to apply these transformations to or that you want to automatically resize, and then call the FitText method on that item. And we'll do that for ourself in just a moment. Now, we're not gonna be downloading the FitText JavaScript file for this course. We're gonna be using a CDN link instead. But if you want to download it for yourself so that you can do it locally without using the CDN or if you want to upload it to your own website so you can do it there without using the CDN, then obviously you can download that file here. So let's jump into CodePen, and you can find the link for the starting pen in the course notes for this lesson. And if we jump to our settings for this code, then you'll notice a couple of things. First of all, if we go to the CSS tab, you'll notice that we're linking to Bootstrap as well as a Google font called Lobster. And then in our JavaScript tab, we're pointing to jQuery and then Bootstrap and then we're pointing to the CDN link I mentioned before. So if you wanna copy that link, you can find it here in the Pen Settings for any of your favorite JavaScript libraries or plugins that you might want to link to this. What you can always do is search on Google for the name of that plugin, and then CDN. So I search for FitText CDN, and I was able to find a content delivery network that hosted this for us. So that makes it a lot easier. And once we've done that, we can close our settings and then create a new copy of it using the Fork button. So once we have our new copy of this particular CodePen, we can go in and start making changes to it. So all we're really concerned about for the purposes of this lesson is the font size of our heading here. And as the FitText website warns, don't use this plugin for paragraph text. It's not designed for that, it's designed for big, bold heading text. So don't go trying to use it on your paragraphs. So we're just gonna focus on our h1 here. We have an h1 tag with our heading in it and then some Lorem ipsum text below that. And one neat little trick if you don't already know it, in CodePen, if you want to insert a bunch of this nonsense text here, you can just type in the word Lorem and then hit Tab and it will fill that out for you. And if that's not enough text, you just do it again, Lorem, Tab, and it'll create another copy of it. So that's a quick way to fill out your content in CodePen without having to go to a different website to find this Lorem ipsum text. So now that we've looked at our initial setup, let's jump in to our JavaScript and let's look at just how easy this is to use. So we're gonna use jQuery to point to our h1 tag and, if we want to, we can give it an ID or a class. Let's give it a class of title1. And then we'll jump back into our JavaScript. And to point to that in our JavaScript, we type the $ and then inside parenthesis and inside quotation marks, we're gonna type in the CSS selector we would use to point to that h1. And again, we gave it a class of title1, so in CSS, we would point to that by typing dot and then the name of the class, which is title1. And then after that, all we need to do is type .fitText, with a capital T in text, open and close parentheses, semicolon to end our statement. When we do that, it resizes our text. And you'll see that it doesn't necessarily fit the width of its container by default, but we can fix that in just a moment. For now, let's just resize this, and you'll see that the font size does change as we change the width of the parent container. Now, as we get larger, you'll see it doesn't change, because the parent container's width isn't changing. And so that's one of the benefits of using a JavaScript plugin like this instead of the viewport width unit. If we use the viewport width unit, then even though this container had a maximum width, that font size would keep growing as we kept increasing the size of the browser, which would not look good. But with this plugin, it's all based on the size of the parent container. So now let's talk about what FitText calls the compressor. The compressor is simply a numerical value that we're gonna put inside the parentheses of our FitText method that's going to turn up or turn down the amount of compression that's applied to the text size. And by default, that compressor is set to a value of 1. So if we set it to 1 here, nothing is going to change. So we can increase or decrease that text size by changing this value here. And if this value goes down, for example if we go to 0.75, you'll notice that the text size actually gets larger. So it goes in the opposite direction here. And the idea is that the higher that value is, the more it's compressing the size of the text. Okay, so as we resize it now, you'll see that it stays at a width that's relative to the size of its container. But it's still not taking up the full width of the container, so we can bring this down a little bit more to maybe 0.72 and then basically just keep adjusting this value here until that font size breaks to the next line, and then we can just readjust it the other direction. So let's bring that up to maybe 68. And there we go. That gets it close enough for government work. So now we can resize that and we'll see that our our text is staying the full size of the parent container. Now, if we wanted to go smaller, we could do a value larger than 1, we could 1.25. And you'll see that that value gets even smaller. So keep in mind that this FitText doesn't necessarily have to take up the full width of its container. You can play around with those settings to make it take up as much of that parent container as you want to. But whatever value you set there, it is going to resize responsively as you resize the browser. So again, let's bring that back down to a value of 0.68, which seems to work for us. And now no matter how large we make that parent container, that text is going to take up the same amount of width. Now let's say for the sake of argument that in our HTML, we wanted a sub heading here, maybe an h2 tag here with a class of subtitle1. And we'll just put some text here. I like my text responsive. So now we have a subtitle here, and we want it to take up the full width as well. So we're gonna use that same class of subtitle1. Let’s copy that and then jump into our JavaScript. And we'll do this the same way. We'll use a jQuery selector to point to that class of subtitle1, we'll apply the FitText functionality to it like so, and then we wanna resize it. Now, here, we want it to get smaller because it's too wide as it is, so let's bring that down to or bring that up to a value of maybe 1.25. And then we can play with that number until we have our text where we want it. So maybe 1.2, and then that gets it about where we want it. But let's go to our CSS here, and for that class, that subtitle1 class, let's set our text transform to uppercase so that it's all capitalized. And then after we do that, we're gonna need to change this value a little bit, maybe bring it back up to 1.25. And then just keep adjusting that until we get our text back where we want it. Looks like we're gonna have to go up even more, maybe 1.45, and there we go. We've got it where we want it, you can tweak that a little bit more if you want to, but there we go. So now we can resize. And we might say, you know what, once it gets to a certain point, I don't want the text to get any smaller than that. Well, using this FitText plugin, we can set a minimum and maximum font size. So if I don't want it to get any smaller than a certain size, we can come in here, and then after this 1.45, we'll type, comma, space, and then we'll create an object using a pair of curly brackets. And then inside those curly brackets, we'll point to minFontSize, and you'll notice that Font and Size are both capitalized. And then we'll type colon space, and then inside single quotes, we'll type in the size that we want. So let's say the smallest size that we want is 18 pixels. So now this FitText plugin or library will keep resizing our text, unless the text is going to get smaller than the 18 pixels. At that point, it will just stop resizing it and it will leave it at 18 pixels. So let's start resizing it down further. And you'll notice at a certain point, it breaks to the next line, because it's no longer getting any smaller. So that's a really good way to set a minimum or maximum font size. You could set this to maxFontSize if you wanted to, and if you wanted your max font size to be 18 pixels, you'll see that it stops there. This would make more sense at a larger number, so let's set it to 28 pixels. So as we resize below the point where it's 28 pixels, you'll see that it keeps resizing, excuse me. But after it gets to 28 pixels, it's just gonna stay at that size. And note that you can do both as well. You could do minFontSize as well as maxFontSize. You would do minFontsize: and then we can set it to maybe 16 pixels, and then we have a comma after that, and then we'll have our maxFontSize. So you'll see that it's not getting any larger than 28 pixels. And as we start resizing downward, it'll get to a point where it no longer wants to get smaller and it will just break to the next line. So those are a couple of extra options, excuse me, that you can add using the FitText library. So thank you for watching, and I'll see you in the next lesson.

Back to the top