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

2.3 Responsive Text With FlowType.js

FlowType is very similar to FitText in the way it functions, but it provides a couple of different options which give us a different measure of control. In this lesson, you will learn how to use FlowType to adjust the sizing of your heading and paragraph text.

Relevant Links

2.3 Responsive Text With FlowType.js

Hello and welcome back. In this lesson, we're gonna talk about another JavaScript library that's very similar to FitText and this one is called FlowType.js. Now just like FitText, FlowType allows you to very easily create responsively sized text that changes size based on the width of its parent element. But FlowType does have a couple of other options that make it worth talking about both of these libraries individually. And then depending on what your specific needs are, you can choose which one you wanna use. Now if you remember when we talked about FitText, the makers of FitText very strongly recommend against using that framework to resize the text in a paragraph. It's designed just for headlines, for a large, big, bold text. FlowType, on the other hand, does encourage the use of this particular library with paragraph text as well as heading text. And if you go to their website, which you can find at simplefocus.com/flowtype, you can see a demonstration. So if we come down to this little demonstration section here, we can drag the slider back and forth and just see how the text responds. So you'll see that not only is the heading text changing but the paragraph text is changing size as well. And the idea here, as you can see and in this paragraph, is that your text is gonna be much more legible if it contains between 45 to 75 characters on each line. And using FlowType to dynamically resize your text allows you to keep your character count to anywhere between 45 and 75 characters, or however many characters you prefer. And just like FitText, FlowType also allows you to specify a minimum and a maximum font size. But it also allows you to specify a minimum and maximum width at which it will continue to resize your text. So if it goes beyond those boundaries, then your text won't be resized anymore. So it allows you again, to set limits on font size as well as the width of the container. So again, those are the basics of FlowType and and you can go to their GitHub page to either download the framework or just to read more about it in the README.md file here. It gives you all the options that you can set for the FlowType library. And just like before, instead of downloading the FlowType library in this course, we're gonna be using a CDN link. So if you open up the starting pen,which you can find the link for in your course notes for this lesson. We can go to our settings and we can see in our CSS that we're using bootstrap as well as a couple of Google Fonts, and then in our JavaScript, we're using jQuery and the FlowType. And just like with most other JavaScript libraries, you can do a search online for FlowType CDN, and you can find probably a couple of different places that host this particular library. So once we open that up, go ahead and click on Fork to create your own copy of it and let's take a look at what we've got so far. So right now, our text is just behaving like normal text, we've got a header and some paragraph text. And you can see all of that in our HTML, which is using some bootstrap markup. And then in our CSS, and this part's very important, we want to set our font sizes to a sensible default. So that if somebody has JavaScript turned off for whatever reason, they can still see what we see here. So here, you can see in the body of our document we've set our base font size to 14 pixels. And then we've set our h1s to 4ems and have applied a couple of other basic styles as well. And from this point on, everything we're gonna do is gonna be in the JavaScript window. So if we open that up, you'll find that this functions very similarly to FitText. The first thing we're gonna do is we're gonna use jQuery to point to the element we want to apply this functionality to. And if we go to our HTML, we can see that our heading is contained inside an h1 element. So let's go back to our JavaScript, and inside quotation marks, I'm just gonna type h1. And then after the closing parenthesis for that selector, I'm gonna type .flowtype, all lowercase, and then open and closed parentheses semi-colon to end our statement. Now as you can see, our default font size now looks really bad for that h1. If we resize our browser, we can see that it does resize itself as we resize the browser. But that's obviously not the size that we want it, we want it to be a lot larger. Well, in FitText, we were able to just throw a number inside the parentheses here, but for FlowType we actually need to create an object to contain all of our properties. So inside our parentheses I'm also gonna put a set of curly brackets for that object. And then, inside those curly brackets, we can enter in the properties that we want to specify. And to change the size of our font, we're gonna use a property called fontRatio and ratio is capitalized. And I'm gonna start off by setting that to a value of 10. And this is very similar to FitText in that when we make this ratio smaller, the text will get larger. So if I change this from 10 to, let's say 20, you'll notice that our text gets much smaller. If on the other hand, we cut in half to 5, then you'll see it gets much larger. So we can play around with this number, until we get our text where we need it to be. That's a little too large, so let's try maybe 4.5. And again, you can just play around with those numbers until you get them where you want them. And so now we can resize our viewport, and as we resize it, the text inside is resized as well. So let's say, we wanted to do the same thing for paragraphs. We can just skip a couple of lines and do the same thing. So we'll point to our paragraphs and then we're gonna say .flowtype and we'll see what the default size does for us. And again, it's way too small, so we're gonna create an object inside our flowtype parentheses. And inside that object, let's set our font ratio. I always like to start at a value of 10 and go from there. So 10 is way too large, so let's bring that up higher to make it smaller. We'll set it to 20 and that looks a little bit more legible. We can bring that up even more if we want to, maybe around 25, and that looks pretty good. I'm actually gonna bring that back up a little bit, maybe about 22, until we get something that's pleasant on the eyes and easy to read. And once we get that set, you'll notice that as we resize our browser, the text size is changing as well. So you can keep your lines of text to a particular character count, or at least within a certain range of characters, in order to make it more legible. Now with something like this, there's obviously gonna come a point when the text gets too small and it just hurts the eyes to read. So we might wanna get to a point where maybe we don't allow it to resize anymore, we wanna keep that text at a certain size. So in order to do that, we can do it one of two ways, we can either set a minimum font size, or we can just set a minimum container size. So if we wanted to set a minimum font size, we could type comma, go to the next line and then use the minFont property, colon space, and then set it to whatever value we wanna set it to. And so with FlowType, we can just enter in a number here and it will interpret that as pixels. So if I don't want it any smaller than let's say, 14 pixels, we'll just type in the number 14. Then as we make it larger, we'll see the text resizes, but once it gets to 14 pixels, it's gonna stop there. And you'll see that the wrapping changes as we continue to resize it because the font is no longer changing size. So we can set a minFont that way, or we can set it up to resize based on the width of the parent container, or the container itself. So if we wanted a minimum width of maybe 400 pixels, and nothing smaller than that would be resized, we would say minimum colon space 400. So let's see how that works. We're gonna scroll down and you'll see that our text is not resizing at this point, it's just re-wrapping. But once it gets up to a width of 400 pixels, and we're talking about the width of the container, not the width of the browser. Once it gets up to at least 400 pixels, you'll see that it starts to resize. And so we can make that threshold smaller simply by reducing this number to, let's say 200 pixels. So now it will continue to resize until it gets down to width of 200 pixels and then it will start re-wrapping that way. So there are a number of different options you can set here, there's also a maximum value. So if we wanted to set the maximum value at which the text would continue resizing, we could set it to, let's say 600 pixels. So once we start making it larger, you'll see that the text keeps resizing until we get to 600 pixels. And I've got a pretty small resolution here, so I can't really get to 600 pixels. Let's change that to 500 and then hopefully, there we go. We can see that once it gets here, to at least 500 pixels wide, if we start making it larger, that text is no longer gonna get larger. It's just going to rewrap based on the width of the container. So those are a few different options available with the FlowType framework. And again, it's very similar to the FitText framework, it just has a couple of different options available to it. So thank you for watching and I'll see you in the next lesson.

Back to the top