Корректная работа свойств vw и vh

Не могу понять как работает свойство vw и vh
На css-tricks пишет:
1vw = 1% of viewport width; 1vh = 1% of viewport height
Но, например, у меня ширина окна 768рх, по этому когда я выставляю font-size: 100vw по логике размер шрифта должен заполнить 768рх, или нет? А то у меня залезает значительно дальше 768рх.
P.S. Уже не одну статью перечитал, и никак не могу понять как корректно вычислить зависимость расширения экрана от значения vw/vh
Пример в песочнице: https://jsfiddle.net/obats/wf6vu3a8/

Ответ

Вот тут хорошо написано по этому поводу:
Что такое «размер шрифта»? Это вовсе не «размер самой большой буквы в нём», как можно было бы подумать. Размер шрифта – это некоторая «условная единица», которая встроена в шрифт. Она обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой. То есть, предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.
Так что измерить размер шрифта с помощью каких-то стандартных формул не получится, более того разные шрифты имеют разные размеры этих запасных отступов.
Сам обычно использую для шрифта метод подбора, он заключается в том, что в отладчике подбирается подходящее значение в px соотносимое со значением в vh или в vw, а дальше уже используется коэффициент. Например, если 14px = 2.8vh, то получается коэффициент 5, сл-но 20px/5 = 4vh.
UPD.
В роли отладчика для сравнения шрифтов выступает обычный браузерный отладчик, например, в Chrome. Пишите в css так:
.class { font-size: 14px; font-size: 2.8vh; }
А дальше уже играете с чекбоксами в отладчике включая/выключая нижнее значение и подгоняя размер в vh, пока перестанете замечать разницу от включения/выключения.