Basic vw text enlargement

As we have seen in previous examples, the most straightforward typographical gesture we can make is to assign a vh or vw value to a block of text, or, better yet, to its containing element, or even to the html element.

In this example, we are setting the global font-size of the html element to 2vw, or 2% of the viewport width.  We're setting the body font size at 1em to maintain that ratio as a default.

html {
  font-size: 2vw;

body {
  font-size: 1em;

This gives us, no surprise, correspondingly larger text the wider the browser gets.  It also gives us increasingly illegible text as the browser gets smaller.  It's an extreme solution, that ends up causing more trouble than it solves:  We end up with text that's too small for phones, and way too big for big monitors, leaving only a small region where the text is "just right" ...