Верстка с использованием VW, отличие от PX, %, и других величин

Работа с VW отличаеться от % тем что в первом случае Вы отталкиваетесь от размеров viewport'a, а во втором от размеров ближайшего родительского элемента.

VW:

// ширина viewport'a равна 300px 

html {
   width: 100vw; // 300px
}

body {
   width: 50vw; // 150px
}

body div {
   width: 50vw; // 150px
}

%:

// ширина viewport'a равна 300px 

html {
   width: 100%; // 300px
}

body {
   width: 50%; // 150px
}

body div {
   width: 50%; // 75px
}

Я не встречал ситуации когда кто то использует VW для задания размеров шрифта, при работе с ними обычно используются относительные величины, такие как REM и EM.

REM равен размеру шрифта, заданного для html и/или body:

html {
   font-size: 16px;
}

body {
   font-size: inherit;
}

div {
   font-size: 1rem; // 16px
}

span {
   font-size: 2rem; // 32px
}

EM рассчитывается относительно размера шрифта родительского элемента:

div {
   font-size: 16px; // 16px
}

div span {
   font-size: 0.5em; // 8px
}

Справка по CSS Размерам