An interesting technique.
Myra Guerrier

My first idea was similar: Use viewport units only for font-sizes and percentage values for everything else. But there were a few drawbacks:

  1. If you want to use flexbox, you can’t use percentages for paddings or margins on flex items.
  2. Let’s say you need a consistent value (i.e. an SCSS variable) in your layout, for example for horizontal paddings. The problem is, that percentage values are always relative to another quantity, for example a length. To see what this means, let’s take a look at an example:


<h1>Hello World</h1>


$hrz-padding: 5%;
padding: 0 $hrz-padding;
padding-left: $hrz-padding;

You might think that the article and the h1 have the same padding-left, but that’s not the case.

Let’s say the viewport width is 1000px: The article is 1000px wide and has 50px horizontal padding. Since the h1 is nested in the article, it is only 900px wide, thus its padding-left is only 45px.