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 - CSS Tutorial
From the course: Responsive Typography Techniques
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
(Locked)
Exploring typography scale and vertical rhythm4m 8s
-
(Locked)
Implementing a modular scale to create typographic hierarchy6m 23s
-
(Locked)
Vertical rhythm with a base unit4m 38s
-
Sizing your type: Pixels, ems, and rems10m 27s
-
(Locked)
Applying viewport units (vh and vw) to typography6m 30s
-
(Locked)
Applying and choosing our typographic scale8m 1s
-
(Locked)
Challenge: Select and apply a different scale46s
-
(Locked)
Solution: Select and apply a different scale1m 33s
-
(Locked)
-
-
-
-