Как правильно измерять расстояния от шрифта до шрифта/блока при верстке? Есть ли закономерность?

Вы говорите о двух разных вещах: то, как это выглядит в дизайн-программе и то, как это выглядит в реальных движках браузеров.

Конечно там будут различия — в отступах, в размере шрифтов, в методе рендеринга шрифтов, в межбуквенном пространстве, в реальной высоте строки (внутренней высоте строки шрифта) и т. д.

P. S. calc(55px - ((46px - 26px) / 2)) — не слишком ли это для расчёта отступа? :)) Можно вообще высоту строки и шрифта вгонять в переменные и получить универсальный класс с калькуляцией этого всего, но зачем это надо…

SmthTo, знаете, я это прекрасно понимаю. Каждый браузер отображает шрифт по своему и прочее-прочее. Мне хотелось бы послушать опытных людей, кто как высчитывает эту разницу, потому что лично я теряю на это очень много времени, а хотелось бы его не терять. Есть же в этом мире верстальщики, которые снимают параметр один раз, указывают его в css и идут дальше, ничего не корректируя))

P.S. Что Вы предлагаете? Как сами снимаете параметры шрифтов и заносите разницу в отступы?

Обычно размеры в макете соответсвуют реальным... указываю line-height для текста из макета, и отступ тоже из макета, и вуаля... не знаю, почему у вас расхождения) по идее отступ указывается авокодом уже с учётом line-height, хотя на скрине действительно кажется, что какой-то line-height маленький для 46px

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 -- другой. Но это куча времени такой педантизм.

О чем говорил выше. Тут размеры блока и высота строки подстраиваются под размер шрифта, placeholder поля телефона имеет другой шрифт c большей высотой строки, в iOS курсор имеет правильный размер, заголовок поля может быть в несколько строк и т. п. И все это выглядит одинаково как в IE11 и iOS 8, так и в последних браузерах.

Сказал ли мне кто-то спасибо за все эти автоматизации при переводе собственного дизайна в вёрстку? Не-а.

Pyatachok, Авокод прописывает тупо высоту шрифта, можете сами посмотреть на скриншоте - высота выделенной области 25px, font-size: 25px. Line-height он не показывает.

Korsia, а это что?

SmthTo, блин, вот этот "не делайте шрифты в px" ломает всю мою систему мировоззрения(( Честно говоря, я не совсем поняла Ваш принцип. Вы перегоняете px в em, указывая в body размер шрифта родителя? И в чём тогда разница, если это по сути конвертация? А если не указываете в body, то как делаете кнопки, другие элементы с position:absolute и четко заданной высотой? В таких случаях увеличение размера шрифта - опасность выпадения за пределы блока.

Шрифты разные, высота строки у них тоже различается, поэтому универсальной формулы нет. Хотя, есть... Как и говорил, если вы знаете разницу в line-height и реальной высоте строки шрифта, то можете сделать отрицательный margin у блока с текстом с нужным значением в em. Тогда вы будете нивелировать эту разницу, а отрицательный margin в силу его относительный размера будет подстраиваться под размер шрифта блока.

- ну это по сути то, от чего я пытаюсь уйти, от докучивания и подгонки.

SmthTo, Это высота строки. Только как она распределяется, Вы знаете? Я - нет. Размер шрифта 25px, часть line-heigh идет сверху шрифта, часть- снизу. Где-то в паддинге родителя сверху заложена часть этого line-heigh. Как понять, какая часть? Ровно половина по расчётам не подходит. Получается чуть больше.

Korsia, line-height — относительная единица.

line-height 100% = font-size.

Другое дело, что реальная высота строки шрифта всегда отличается от заданной (она меньше указанной). Сделано это, чтобы текст не слипался.

SmthTo, по поводу картинки, которую Вы приложили. Что будет, если шрифт станет еще больше, вот докрутит пользователь до 30px к примеру, разве текст не станет выпадать за блок? Я поэтому боюсь привязывать em в таких случаях.

SmthTo, Всмысле. Вы имеете ввиду указывать ту же высоту строки, что и размер шрифта, если строка одна? А переполнение контента? Вот добавит пользователь чего-то еще по своему усмотрению, оно благополучно слипнется в двух строчках. РРррррр..!!!!!

Другое дело, что реальная высота строки шрифта всегда отличается от заданной (она меньше указанной). Сделано это, чтобы текст не слипался.

Посмотрите на скриншот к посту. Размер высоты штрифта по авокоду ровно-ровно равен font-size, потому что использован запас под прописные буквы и хвостики типа "р". Я так понимаю, что не все шрифты сделаны с таким запасом. У меня были случаи, что при 100% line-height шрифты слипались при переносе((( А если есть шрифт в несколько строк, а за ним еще один в несколько строк, как посчитать марджин между ними, если у обоих есть своя высота строки? Я пока только погоняю.

Korsia, вы, конечно, извините, если пользователь выкрутит шрифт до 30 пикселей, то он косой пользователь. Изредка кто-то увеличивает до 18 пикселей. Попробуйте поставить где-нибудь такой шрифт. На любом сайте выйдет херня.

Обычно пользователи увеличивают масштабирование страницы (Ctrl ±). А это совершенно не то же самое, что увеличивать шрифт.

Korsia, я не об этом. Я о том, как высота строки считается.

line-height: 1 — это 1 em, т. е. высота шрифта. А em — относительная к px единица. Вот и считайте.

SmthTo, так разницы нет. Хоть я укажу ее в px, хоть em. Я не знаю, как эта высота строки распределяется над шрифтом/под шрифтом. 50% сверху/снизу не подходит. Приходится подгонять. В этом вся загвоздка.

Korsia, такова сущность веб-разработки. Я работаю обычно с несколькими шрифтами, внутренние высоты строк которых я знаю (те же Circe и Gotham Pro).

Как вы хотите понять какую-то универсальную истину, когда все шрифты разные? Браузер выводит высоту строки как он её понимает, он не может учитывать внутреннюю высоту строки глифов шрифта.

SmthTo, очень жаль((( Не подскажете, что такое глифы шрифта?

Korsia, хе-хе-хе :))

https://ru.m.wikipedia.org/wiki/Глиф