Как в вебе считать отступы в типографике?

Question

[FilimonovnaAnna]

Как все-таки правильно дизайнер должен ориентироваться на отступы при работе с типографикой?
Всегда придерживалась подхода, при котором отступ считается от базовой линии шрифта. Но когда перешла в другую компанию, frontend-разработчики здесь просят представлять текст в виде прямоугольника, высота которого равна: интерлиньяж - размер шрифта + высота текстовой строки от верхнего выносного до нижнего выносного элементов. Такой подход более профессионален, или все же при верстке это не столь значимо?

Answer 1

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

Оба примера на скриншоте в вопросе неверны. Отступы нужно считать от одной базовой лини и до другой базовой линии. Курим https://material.io/design/typography/understandin...

Для этого расставляем baseline grid - регулярную сетку (квадратную или строчную) - и укладываем все тексты в нее - чтобы базовые линии были строго на горизонтальных направляющих сетки.

Остальное сделает программа (рекомендую фигму). Текстбокс вполне может не вписываться в baseline grid, главное сам текст, оптически. Верстальщики уже будут отталкиваться от периметров текстбоксов.

Comments

[Oleg Dobrygin]

MaxKorz, никогда не слышал про разный рендер шрифта в фотошопе и браузере. Вы имеете в виду антиалиасинг? Так его включить можно.

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

MaxKorz, ты просто не понял сути написанного, рекомендую перечитать еще раз. И материалка создавалась не для андроида. Не только для, точнее.

Answer 2

[Алекс Глебов]

Разработчики говорят так, как задается отступ в css.
На скрине синим текстовый блок, зеленым - его отступ

открыть

Т.е в таком виде им и нужны от вас параметры текста
В первом варианте отступы придется на глаз подбирать.

Answer 3

[Shadowman69]

Лайк за "бдиректора") Второй подход более правилен, но морочится дольше. Если придерживаться первого способа, то Ваши блоки будут на 30-40 пикс. больше, чем нужно по макету, за счет неучета line-height и за счет разной отрысовки элементов в разных браузерах. Это я с точки зрения верстальщиков сужу, хотя так сложнее верстать, бо нужно считать отступы вручную. Но если есть текст в несколько строчек и важен line-height, то этот второй способ правилен, так как с этим свойством стоит считаться.

Comments

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

Второй подход более правилен

Нет.

[Shadowman69]

Нерон Лордов, почему же?

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

Shadowman69, см. мой ответ к вопросу.