Figma и типографика?

Как в итоге правильно?
Высота строки 30 пикс, размер кегля 18 пикс. В фигме, задавая отступ в процентах - 160% шрифты выходит за рамки строки.

Вот пример: 5c44947a9dcd8945416839.png

Где-то прочитал, что стандартный размер строки в шрифте идет 120%, следовательно выставляю 140% и более-менее попадаю в заданный ритм. Но из-за выравнивания по верхнему краю строка начинается выше.

Вот пример: 5c4495331bee2043592130.png

Если опустить строку на пару пикселей, то встает все как нужно. Но, метод явно костыль. Объясните как правильно?

Вот пример: 5c4496b120c90631786323.png

Еще вопрос - Сколько строк должен занимать двухстрочный заголовок? Обязательна ли привязка к базовой линии?

Вот пример: 5c4495fdbfe8b860383978.png

Ну и самое главное как во всем этом безобразии быть верстальщику. Получается он на глаз мерит интерлиньяж и отступы?
  • Вопрос задан
  • 3881 просмотр
Пригласить эксперта
Ответы на вопрос 5
dom1n1k
@dom1n1k
В отличие от CSS, Фигма считает процентную line-height не от кегля (font-size), а от высоты строки по умолчанию, которая прописана внутри шрифта. Например: если у моего шрифта высота строки по умолчанию 120%, а в Фигме я укажу 140%, то по факту получится 120*140=168% от font-size.

Никакого стандарта на счет умолчального line-height нет. Обычно это 120-130%, но далеко не всегда. Исключений довольно много, отcюда будет постоянный бардак. Решение разработчиков Фигмы откровенно странное и неудачное.

Решение: забыть о процентах, указывать line-height только в пикселях (именно в Фигме, о CSS разговор отдельный).
Ответ написан
Nekto_Habr
@Nekto_Habr
Жёстко и правдиво: https://vms-blog.ru
По-моему гораздо проще, эдак раз в миллион, указывать междустрочный интервал в пикселях, а не процентах. Так и вписываешь в поле: 40 рх например. И настрой горизонтальные линейки, а потом подвинь текстбокс так, чтобы базовая линия покоилась на линейке (не забывая про правильный интерлиньяж, кратный размеру линеек). И всё. Проблемы вообще нету.
Ответ написан
@be_a_man
Во-первых делать шрифт кратный сетке. Сетка 8px, шрифт 16/24/32/36 и т.д.
Далее подгонять на глазок), шрифты разные и отображаются по-разному в редакторе и браузере ВСЕГДА (Хоть и рендерит фигма в канвасе). Верстальщику подгонять. UPD: или смотреть вкладку CODE в фигме. Спасибо ludr

Кстати ровняйте по базовой линии лучше.

Сравните. Один и тот же шрифт в фигме и браузере.

1) Настройка сетки в фигме
5c4543865ef44224096392.png

2) Заголовок в фигме
5c4543932e028966074856.png

3) Абзац в фигме
5c45439ba0ff6730430861.png

4) Браузер с настройками из фигмы
5c4544dc19230378296886.png

5) Браузер подогнанный line-height
5c4543a70febc718438736.png
Ответ написан
Chipr
@Chipr
UX/UI designer
Это тема, которой мы занимались совсем недавно со своим коллегой. Если кратко, то libe-height лучше задавать в px, выставлять размер текстоовго блока равным размеру кегля и выравнивать текст по центру текстового блока.
Ответ написан
@ludr
Figma и типографика? — Где вопрос?
Как в итоге правильно? — На оснований чего подводить итог? До этого «вопроса» только первый «вопрос».
Правильно задать вопрос: «Как правильно задавать вопросы?»

У вас серьёзно хромает матчасть по типографике. Выводы и вопросы, которые вы пытаетесь делать и задавать на основании некорректных базовых знаний, абсурдны, дело не в Фигме. Подтяните типографику и вопросы к Фигме в этом аспекте пропадут.

Верстальщику в Фигме нужно идти во вкладку Code.

Не надо думать, что Mikalai Bulava ответил на ваши «вопросы». У него просто похожая на вашу каша в голове.
Ответ написан
Ваш ответ на вопрос

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

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