Как правильно выравнивать шрифт по макету(пример внутри)?

Question

[Георгий Котов]

Добрый день ! Имеется макет вот такой:

Стрелочка 1 - базовая линия шрифта.
Стрелочка 2 - line-height, который к сетке отношения не имеет.
Сетка в макете 4px и 20px. Выравнивание шрифта у дизайнера по нижней границе текста.
Я ума не приложу как такое выравнивание сделать ?

Comments

[Сергей delphinpro]

Я ума не приложу как такое выравнивание сделать ?

Такое выравнивание в браузере, внезапно, по умолчанию! И ничего не нужно делать.
Надеюсь, не перевернул ваш мир..

[Сергей delphinpro]

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

Answer 1

[Михаил Проскурин]

Почему line-heigh не имеет отношение к сетки? Отступы отсчитываются по линии шрифта, которая генерируется автоматически, по размеру line-heigh.

Comments

[Георгий Котов]

Может так нагляднее будет.
На мой взгляд, вот идеальный случай:
line-height - 24px, верхний и нижний край текстового блока в сетке, но "строчка"(не знаю правильного названия нижней границы шрифта) уже выбивается из сетки. Такое позиционирование приятно и удобно.

В случае же с моим с первым скрином, "строчка" как раз находиться на сетке, но границы текстового блока не попадают. Этот вариант требует проверять позиционирование каждой строки относительно соседних блоков и выставлять margin-bottom и margin-top, а следовательно привязываться к соседним блокам. И "строчка" выпадет из сетки. Вот я и думаю над решением или методологией позволяющим выравнивать "строчку" по сетке.

Answer 2

[Дмитрий Марков]

Можно выровнять так align-items baseline
Главное что бы контейнер был display flex

Answer 3

[Сергей Тилион]

Это неряшливость дизайнера или закравшаяся случайно неточность. Достаточно округлить. По умолчанию та же Фигма ставит текстовые объекты по пиксельной сетке, включая базовую линию.