Как правильно выравнивать шрифт по макету(пример внутри)?
Добрый день ! Имеется макет вот такой:
Стрелочка 1 - базовая линия шрифта.
Стрелочка 2 - line-height, который к сетке отношения не имеет.
Сетка в макете 4px и 20px. Выравнивание шрифта у дизайнера по нижней границе текста.
Я ума не приложу как такое выравнивание сделать ?
Кстати, многие дизайнеры не заморачиваются, и высоту строки в макете ставят лишь бы текст встал на место.
Поэтому обращать внимание на этот параметр не стоит. Ну или по крайней мере не следует его слепо копировать из макета. Надежнее самому линейкой измерить расстояние между базовыми линиями строк.
Может так нагляднее будет.
На мой взгляд, вот идеальный случай:
line-height - 24px, верхний и нижний край текстового блока в сетке, но "строчка"(не знаю правильного названия нижней границы шрифта) уже выбивается из сетки. Такое позиционирование приятно и удобно.
В случае же с моим с первым скрином, "строчка" как раз находиться на сетке, но границы текстового блока не попадают. Этот вариант требует проверять позиционирование каждой строки относительно соседних блоков и выставлять margin-bottom и margin-top, а следовательно привязываться к соседним блокам. И "строчка" выпадет из сетки. Вот я и думаю над решением или методологией позволяющим выравнивать "строчку" по сетке.
Это неряшливость дизайнера или закравшаяся случайно неточность. Достаточно округлить. По умолчанию та же Фигма ставит текстовые объекты по пиксельной сетке, включая базовую линию.
Средний
