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

Question

[Korsia]

Здравствуйте. Такой вопрос. Есть ли четкие правила, по которым по макету можно вымерять точное расстояние от шрифта до шрифта/блока? При работе с шрифтами постоянно приходится подгонять на глаз разницу расстояний, и это, честно говоря, откровенно надоело, отнимает кучу времени. В фотошопе/авокоде прописываются размеры шрифта и высоты строки, всегда учили отнимать от второго первое, делить на два и вот вроде разница, которую нужно учитывать, но на практике это всё равно дает погрешность.

Пример.

Авокод показывает padding-top: 55px.
font-size: 26px;
line-height: 46px;
По идее паддинг надо бы высчитать так: 55 - (46-26)/2 = 45px.
По итогу padding-top: 42px, если подгонять по макету.

Нет более точного способа измерять расстояния?

Comments

[Rustam Bainazarov]

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

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

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

[Korsia]

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

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

[#FFFFFF]

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

[Rustam Bainazarov]

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

[Rustam Bainazarov]

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

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

[Korsia]

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

[Rustam Bainazarov]

Korsia, а это что?

[Korsia]

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

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

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

[Korsia]

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

[Rustam Bainazarov]

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

line-height 100% = font-size.

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

[Korsia]

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

[Korsia]

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

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

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

[Rustam Bainazarov]

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

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

[Rustam Bainazarov]

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

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

[Korsia]

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

[Rustam Bainazarov]

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

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

[Korsia]

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

[Rustam Bainazarov]

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

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

Answer 1

[Нерон Лордов]

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

Ох, какая же это попа-боль :( Лично я отмеряю от базовой линии. И всем верстальщикам рекомендую делать так же. У меня в макете заложена определенная сетка (раньше юзал регулярную, теперь - горизонтальные линейки) + пиксельная сетка - вот их включаешь в макете (если, конечно, они туда заложены...) и можно на глазок посчитать расстояния.

Comments

[ihabia]

Нерон Лордов, подниму вопрос, т.к. сам этим столкнулся и честно говоря, немного в замешательстве. Ладно Авакод, я вот делал в фотошопе ... там такой жесткий прикол или я вобще не вкурил. Когда нажимаешь на элемент, то он выделяется рамкой (если стоит галочка соответствующая). Нажимаю значит на название шрифт Georgia. которому задан размер 16px, измеряю 12px, ну если захватить невыделенный пиксель- 13px.

Решил посмотреть, что быдет если я введу букву с нижним хвостом, например "j" ... Опа, и фотошоп уже показывает выделенный объект как 15px, если захватить невыделенный пиксель, то ка раз 16.

Но чет возьми, если бы я не попробовал, так бы и мерил от первоначального? Но это как бы ладно, там ещё указан интерлиньяж - 19,2 px .. И где его искать там, он в фотошопе не отображается, от куда мерить?

[Korsia]

ihabia, на сколько я поняла, в Фотошопе, да и в Авокоде размер шрифта 15px - это размер от самой высокой точки самой высокой буквы шрифта (типа I, L, ну и русские апперкейсы), до самой низкой точки самой низкой буквы (y, j, g и т.д.). Если у Вас есть слово "Дом", к примеру, то верхняя часть места, выделенного под шрифт, будет заполнена полностью, а нижняя - нет (т.к. есть буквы ниже, чем закорючки буквы Д - р, у и т.д.). Если текста в строке много, и в нем перечислены основные буквы алфавита, то мерять будет просто. Если нет, и текст короткий, то придется ломать голову. Я перестала парится, вбиваю св-ва текста и в разработчике подгоняю отступы вручную, потом переписываю в редактор. Так оказалось быстрее, чем высчитывать.

[Senseich]

вбиваю св-ва текста и в разработчике подгоняю отступы вручную

Korsia, Подгоняешь? т.е. ты пользуешься чем то для сверки? я имею ввиду расширения на подобие пиксель-перфект или как подгоняешь? поделись с начинающим )

[Korsia]

Senseich, да, банальный PixelPerfect. Ставлю на глаз падинги/марджины, замеряя в авокоде, потом накладываю изображение и подгоняю разницу вручную через разработчик. Ставлю курсор мыши на значение падинга/марджина в правом окне стилей в разработчике, и жму alt+"вверх" или alt+"вниз", и значение плавно меняется. Так меняю, жду, когда совпадет с наложенным макетом, и переписываю новое значение в редактор. Вроде всё.

[Senseich]

Korsia, спасибо, возьму на заметку.

Answer 2

[dom1n1k]

В фотошопе/авокоде прописываются размеры шрифта и высоты строки, всегда учили отнимать от второго первое, делить на два и вот вроде разница, которую нужно учитывать, но на практике это всё равно дает погрешность.

Да, погрешность будет, потому что реальная высота букв не равна font-size, она меньше. А font-size - это размер кегельной площадки, то есть включая запас на всевозможные выносные элементы (заплечики). Реальная высота букв варьируется от шрифта к шрифту, но в среднем по больнице заглавную и строчную можно грубо принять за 70 и 50% от font-size соответственно. Если хочется абсолютной точности, можно специальными инструментами выяснить эти величины для конкретного шрифта.

Но вообще этим вычислениям пора кануть в лету, потому что ФШ (с его неудобным для верстальщика управлением текстом) уходит со сцены веб-дизайна. В новых приложениях типа Фигмы и Скетча такой проблемы нет, там высота контейнера текста равна line-height, поэтому ничего вычислять не нужно - сколько отступ есть, столько и делаем.

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