Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 Viewport Units

Viewport units in CSS allow us to create text which fluidly resizes based on the size of the browser. In this lesson, we’ll discuss the use of the vw unit in CSS and why it’s not always the best solution.

Relevant Links

2.1 Viewport Units

Hello and welcome back to Essential JavaScript Libraries for Web Typography. In this section, we're going to cover a couple of different JavaScript libraries that are designed to dynamically and responsively resize your text based on the size of that text's parent element. Now until a few years ago there was no way in HTML and CSS to create text that fluidly resized based on the browser width. You could do some resizing using media queries and things like that, but there was no real simple way to do it fluently. However, CSS3 now provides us with the Viewport units, which allows us to do this to a certain extent but it does have some limitations. So before we jump into these JavaScript the libraries, I wanna talk about the VW unit or the Viewport Width unit for sizing your text. You can find the starting pen for this in your course notes for this lesson. And once you open up that starting pen, let's click on the Fork button up here at the top to create our own copy of it so that we can make changes to it. So here we have a simple h1 tag with some text in it and then in our CSS, I wanna talk about the VW sizing unit. So in our CSS, in the h1 rule here, I wanna create a font size property and I'm gonna set it to 10 VW and again, that VW stands for Viewport Width. Now this Vewport Width unit represents a certain percentage of the width of the browser. Ideally 100 VW is supposed to represent 100% of the width of the viewport. However, you can't always use that as a way to determine what value you're gonna put here, for example, if we just had five characters here, 1, 2, 3, 4, 5. We can't just set the font size to 20 VW and hope that it's gonna take up the whole width and we see here that it does not. So really when you're using this viewport width unit, you've gotta experiment with it a little bit. Now let's change our text back to where it was, flexible font size and we can see that 20 VW is a little too large. So we can bring that down, maybe about 14, and that gets as close to where we want, we can experiment a little bit more until we get it exactly where we want it. So we can even try 14.5 and if it's still fits within the width, then we're doing good. Now the great thing about this, is we can now resize our viewport and our text will resize with it, and that works great. So for the most part, this is a really powerful way to create fluid text that resizes itself, but it doesn't always work the way we want it to and it does have some limitations. First of all, the Chrome browser won't print elements that use Viewport units for font size, so if you want that text to be printed, if the user decides to print out the page, then that's not gonna work well for you. Also, Viewport units don't always work right in Internet Explorer if the text is in an iFrame, or if the browser is zoomed in. Also, Firefox is the only browser that interprets a value of 100 VW correctly. All other browsers assume that that 100 VW or 100% percent of the width of the viewport includes the with of the scroll bar on the right. So this sometimes inadvertently causes the browser to create horizontal scroll bars where they're not needed. And then another huge limitation of using the VW unit is that your text isn't always gonna represent a certain percent of the width of the browser. You might have a couple of different break points in your responsive web design. And if you're using those break points as the width of the parent container of your text, then using the viewport width unit won't work well for your font sizes, it won't resize them the way you want them to. So if we're dealing with limitations like this, then we might need to look to other solutions. And that's what we're gonna talk about in the next couple of videos. We're gonna talk about two different libraries fittext.js and flowtype.js, which allow us to resize our text automatically based on the width, not of the browser but of the parent container of that text. And so that gives us a lot more flexibility when creating text that we need to resize itself responsively. So we'll get started with that in the next lesson. Thank you for watching.

Back to the top