Join Val Head for an in-depth discussion in this video Applying viewport units (vh and vw) to typography, part of Responsive Typography Techniques.
…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 a bit tough to picture exactly what these…
- Deciding between self-hosted and hosted web fonts
- Sizing your type with pixels, ems, and rems
- Applying and choosing a typographic scale
- Creating a font stack
- Maintaining line lengths
- Using media queries to set natural typographic break points
Skill Level Intermediate
1. Comparing and Choosing Web Fonts
2. Establishing Rhythm in Your Typographic System
3. Creating Type Prototype Pages
Establishing the font stack7m 32s
4. Setting Type for Readability Across Screen Sizes
5. Helpful Online Tools and Scripts
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.