From the course: Responsive Typography Techniques

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Applying viewport units (vh and vw) to typography

Applying viewport units (vh and vw) to typography - CSS Tutorial

From the course: Responsive Typography Techniques

Start my 1-month free trial

Applying viewport units (vh and vw) to typography

“

CSS has some new units for sizing elements relative to the viewport size. These work quite differently from pixels, ems, and rems that we looked at before, but they're a very interesting option for responsive design. These new units are vh for viewport height, vw for viewport width, as well as vmin and vmax, which work out to be whichever is the maximum or minimum of the two above. We can use these new units to size our typography relative to the viewport, and when we do that, we end up with type that scales continuously with the size of our viewport. One unit of these viewport values is equal to 1% of that viewport axis. So one unit of viewport height is equal to 1% of the total viewport height. One unit of viewport width is equal to 1% of the total viewport width. And then one unit of vmin is equal to 1vw or 1vh, whichever is smaller. So it starts to get a bit confusing. And of course, as would follow from that, 1vmax is equivalent to 1vw or 1vh, whichever happens to be larger. It's…

Contents