Задать вопрос
@Fajamaja
ui

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

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

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

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

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

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

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

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

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

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

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

Решение: забыть о процентах, указывать line-height только в пикселях (именно в Фигме, о CSS разговор отдельный).
Ответ написан
1 комментарий
1 комментарий
Nekto_Habr
@Nekto_Habr
Чат дизайнеров: https://t.me/figma_life
По-моему гораздо проще, эдак раз в миллион, указывать междустрочный интервал в пикселях, а не процентах. Так и вписываешь в поле: 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
Ответ написан
12 комментариев
12 комментариев
Chipr
@Chipr
UX/UI designer
Это тема, которой мы занимались совсем недавно со своим коллегой. Если кратко, то libe-height лучше задавать в px, выставлять размер текстоовго блока равным размеру кегля и выравнивать текст по центру текстового блока.
Ответ написан
Комментировать
Комментировать
@ludr
Figma и типографика? — Где вопрос?
Как в итоге правильно? — На оснований чего подводить итог? До этого «вопроса» только первый «вопрос».
Правильно задать вопрос: «Как правильно задавать вопросы?»

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

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

Не надо думать, что Mikalai Bulava ответил на ваши «вопросы». У него просто похожая на вашу каша в голове.
Ответ написан
6 комментариев
6 комментариев
@Bronewi4ok
Решение для верстальщика есть, но фигма тут конечно сбоку остается) В фигме задать line-height в пикселях. А верстальщику нужно и импортировать макет в Avocode, в котором давно уже можно ставить безразмерные единицы для line-height. Все пересчитается автоматически из значений, указанных в пикселях и будет работать именно так, как ожидает верстальщик. Но стоит учесть, что svg иконки, которые были из чего-то там конвертированы или криво слеплены, навернуться. Так же некоторые файлы шрифтов придется залить ручками, но это один раз на весь проект ctrl+c/ctrl+v
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
UX/UI-дизайнер
ZephyrLab • Москва
от 100 000 ₽
Ведущий UI/UX-дизайнер
OLOVO.agency
от 100 000 до 140 000 ₽
UI/UX Designer
Oneclick LIFE • Москва
от 200 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать мобильную версию сайта Next.js/React
19 апр. 2024, в 11:54
500 руб./в час
Реализовать Парсер сайта
19 апр. 2024, в 11:48
10000 руб./за проект
Собрать сайт на Vue / Laravel
19 апр. 2024, в 11:14
65000 руб./за проект
Ещё заказы