There are different ways to handle font-sizing for different screens. In this video, learn about how to incorporate fluid typography using new viewport units.
- [Instructor] In the previous lesson,…we talked about responsive typography…and used media queries to change the font sizes,…but when we go from one breakpoint to another,…there is an abruptive switch from one size to the other.…This isn't necessarily a bad thing,…we can assume that most people don't view websites…by resizing the browser the way we…do when we're testing our webpages.…However, there is a way…to create fluid typography using viewport units.…There are four viewport units.…Vw represents the viewport width.…
Vh represents the viewport height.…Vmin is the smaller value of the viewport's width or height…and vmax is the larger value…of the viewport width or height.…Viewport refers to the browser's window size.…Viewport units are a percentage…of the browser's viewport dimensions.…So that means 1vw is equal…to 1% of the viewport's width,…so 10vw is 10% of the viewport's width and so on.…The vh unit works the same…except it refers to the viewport's height.…
Vm refers to the smaller value of the viewport width…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- 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.