@Korsia
Верстальщик

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

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

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

Нет более точного способа измерять расстояния?
  • Вопрос задан
  • 532 просмотра
Решения вопроса 1
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
Я дизайнер, не верстальщик, но в курсе про цирк с цыганами в отступах шрифтов. К сожалению, оборачивание текста в рамку разнится не только между графическим редактором и браузером, не и между различными графическими редакторами...

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

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

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы