Владимир, да, большинство сложных (и не очень) сайтов, у которых древняя история разработки, обладают мобильной версией. Сделано это для скорости отображения, чтобы не грузить лишние скрипты и стили.
Владимир, открываете консоль, заходите на любой сайт: Google (+ сервисы и т. п.), Rambler, Mail, Facebook, VK, AliExpress, Stripe, Wikipedia, Habr, TJournal и т. д.
Владимир, я один странный принцип выработал: я смотрю на примеры популярных сайтов. Там не используют vw для шрифтов, и я понимаю — почему :))
Использование vw для текста имеет место быть как один из методов. И я его использую, когда хочу превратить текст в по сути картинку, которая в неизменном виде будет отображаться на всех экранах, заполняя одинаковое пространство.
Korsia, такова сущность веб-разработки. Я работаю обычно с несколькими шрифтами, внутренние высоты строк которых я знаю (те же Circe и Gotham Pro).
Как вы хотите понять какую-то универсальную истину, когда все шрифты разные? Браузер выводит высоту строки как он её понимает, он не может учитывать внутреннюю высоту строки глифов шрифта.
Владимир, как вы правильно заметили, это печатный принцип. И в печати он оправдан. И в вэбе он оправдан, когда нужно уместить одинаковое количество информации на все экраны, но это редкий случай.
Смотрите, такой вопрос: какой смысл в большом экране, если на него умещается столько же контента, как на маленьком?
Korsia, вы, конечно, извините, если пользователь выкрутит шрифт до 30 пикселей, то он косой пользователь. Изредка кто-то увеличивает до 18 пикселей. Попробуйте поставить где-нибудь такой шрифт. На любом сайте выйдет херня.
Обычно пользователи увеличивают масштабирование страницы (Ctrl ±). А это совершенно не то же самое, что увеличивать шрифт.
Владимир, я не могу понять, зачем всё же делать на vw даже на простом примере: iPhone 5, 7 и XS Max.
Если использовать px, em, rem, то высота шрифта будет одинаковой и комфортной на всех этих устройствах и текст будет занимать всё пространство планомерно.
Если я задам его в vw, то текст будет иметь разные размеры везде, занимая одинаковое пространство по ширине (т. е. на одной строке будет всегда одинаковое количество текста).
Тем самым мы теряем все плюсы увеличения экрана по ширине. Как бы текста должно помещаться больше, т. к. экран шире, но нет.
О чем говорил выше. Тут размеры блока и высота строки подстраиваются под размер шрифта, placeholder поля телефона имеет другой шрифт c большей высотой строки, в iOS курсор имеет правильный размер, заголовок поля может быть в несколько строк и т. п. И все это выглядит одинаково как в IE11 и iOS 8, так и в последних браузерах.
Сказал ли мне кто-то спасибо за все эти автоматизации при переводе собственного дизайна в вёрстку? Не-а.
Korsia, делаю шрифты в rem, если зависимые от родителя -- в em. Отступы делаю в em, line-height -- em. Смотрю в браузере, подгоняю под шрифт. Времени на это теряется не так много, около минуты. Делаю универсальное правило. Всё.
Правильно понимаю, что высота строки шрифта, если ставить её по Avocode, влияет на визуальный отступ так, что эти 55px из-за высоты строки первой строки (да-да) визуально превращаются в больше, чем 55px, поэтому приходится уменьшать?
Шрифты разные, высота строки у них тоже различается, поэтому универсальной формулы нет. Хотя, есть... Как и говорил, если вы знаете разницу в line-height и реальной высоте строки шрифта, то можете сделать отрицательный margin у блока с текстом с нужным значением в em. Тогда вы будете нивелировать эту разницу, а отрицательный margin в силу его относительный размера будет подстраиваться под размер шрифта блока.
P. S. Не делайте шрифты в px и умеренно страдайте pixel-perfect. Я так в своем небольшом фремворке три дня подстраивал высоты строк в формах, чтобы они были идеальными во всех типах input'ов и textarea. Получилось, конечно, и даже в том случае, если для :placeholder был указан один шрифта, а для самого input'a -- другой. Но это куча времени такой педантизм.
Либо делать фон с помощью абсолютно позиционированногг блока внутри родительского контейнера. И его стили делать по тому же паттерну.