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

Question

[Fajamaja]

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

Вот пример:

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

Вот пример:

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

Вот пример:

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

Вот пример:

Ну и самое главное как во всем этом безобразии быть верстальщику. Получается он на глаз мерит интерлиньяж и отступы?

Comments

[EYPPNM]

на глаз мерит интерлиньяж и отступы?

верстальщики пользуются pixelperfect наверное плагином для chrome, не знаю я не верстальщик

[Сергей delphinpro]

Ну и самое главное как во всем этом безобразии быть верстальщику

Говорю как верстальщик: делайте как хотите, главное соблюдайте вертикальный ритм. Грамотные макеты с вертикальным ритмом верстаются без всякого пиксел перфекта, буквально на глазок
Знаем базовые параметры (шрифт и высота строки основного текста), по ним на глаз видно размер отступа - 1/2, 1/4 и т.п
просто пишу @include margin-leader(1/2) и все получается пиксель-перфектно.
В общем соблюдайте ритм. В пикселях, процентах или попугаях - неважно верстальщику.

[antimodern]

EYPPNM,

верстальщики пользуются pixelperfect наверное плагином для chrome, не знаю я не верстальщик

Нет, так делают только ненавидящие себя ничтожества

Answer 1

[dom1n1k]

В отличие от CSS, Фигма считает процентную line-height не от кегля (font-size), а от высоты строки по умолчанию, которая прописана внутри шрифта. Например: если у моего шрифта высота строки по умолчанию 120%, а в Фигме я укажу 140%, то по факту получится 120*140=168% от font-size.

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

Решение: забыть о процентах, указывать line-height только в пикселях (именно в Фигме, о CSS разговор отдельный).

Comments

[iwebdesigner]

В отличие от CSS, Фигма считает процентную line-height не от кегля (font-size), а от высоты строки по умолчанию, которая прописана внутри шрифта.

Уже нет

Answer 2

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

По-моему гораздо проще, эдак раз в миллион, указывать междустрочный интервал в пикселях, а не процентах. Так и вписываешь в поле: 40 рх например. И настрой горизонтальные линейки, а потом подвинь текстбокс так, чтобы базовая линия покоилась на линейке (не забывая про правильный интерлиньяж, кратный размеру линеек). И всё. Проблемы вообще нету.

Answer 3

[be_a_man]

Во-первых делать шрифт кратный сетке. Сетка 8px, шрифт 16/24/32/36 и т.д.
Далее подгонять на глазок), шрифты разные и отображаются по-разному в редакторе и браузере ВСЕГДА (Хоть и рендерит фигма в канвасе). Верстальщику подгонять. UPD: или смотреть вкладку CODE в фигме. Спасибо ludr

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

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

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


2) Заголовок в фигме


3) Абзац в фигме


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


5) Браузер подогнанный line-height

Comments

[dom1n1k]

Ответ неправильный. "Подгонять на глазок" - плохо.
Даже если вы подберете нужное значение для одного конкретного шрифта, вы потом получите гемор в случае если понадобится заменить шрифт на другой.

[be_a_man]

dom1n1k, в любом случае гемор получите при замене шрифта. Поделитесь алгоритмом, чтобы его не получить.

[dom1n1k]

Совсем избежать гемора не получится, но можно сильно его уменьшить. В частности, можно сохранить неизменную line-height. На приложенном скрине line-height плывёт (на глаз подобрано?). Это означает, что дизайнер любит трудности.

[be_a_man]

dom1n1k, и там и там font-size 16px, line-height 24px. Line-height измеряется от base-line до x-height-line. Но вот беда body-height у шрифтов разный и одинаковый line-height у разных шрифтов визуально выглядит по-разному. А если еще учитывать длину текстового блока (чем длиннее, тем line-height надо больше давать), то как, если не на глазок подбирать значения?

[dom1n1k]

Line-height измеряется от base-line до x-height-line

Шта? o_O

[be_a_man]

dom1n1k, очепятка), от baseline до baseline, там еще другая мысль была, не дописал. Но это не меняет того, что одинаковый lh смотрится по-разному у разных шрифтов.

[dom1n1k]

Высота строк и базовые линии совпадают пиксель в пиксель и по привязкам - чяднт?

[dom1n1k]

одинаковый lh смотрится по-разному у разных шрифтов.

Да, такое бывает, особенно если взять очень разные шрифты. Но это абсолютно не оправдание для "процентов на глазок".
Если я решу, что мне нужно увеличить lh, то я её увеличу. Cознательно. А при подогнанных процентиках она будет жить собственной жизнью, рандомно и непредсказуемо.

[be_a_man]

dom1n1k, я же про визуальное восприятие, разная геометрия, выносные разной длины и т.д.

[be_a_man]

dom1n1k,

Если я решу, что мне нужно увеличить lh, то я её увеличу. Cознательно.

на глазок?

[dom1n1k]

На глаз я буду оценивать восприятие, а вот задавать размеры точно - в пикселях.
Чтобы не было вот так, как на экране. Потому что для разных шрифтов эти магические константы дадут непредсказуемо разные высоты.

[be_a_man]

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

Answer 4

[Mikalai Bulava]

Это тема, которой мы занимались совсем недавно со своим коллегой. Если кратко, то libe-height лучше задавать в px, выставлять размер текстоовго блока равным размеру кегля и выравнивать текст по центру текстового блока.

Answer 5

[ludr]

Figma и типографика? — Где вопрос?
Как в итоге правильно? — На оснований чего подводить итог? До этого «вопроса» только первый «вопрос».
Правильно задать вопрос: «Как правильно задавать вопросы?»

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

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

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

Comments

[be_a_man]

Кстати да, вкладка код же есть))

[be_a_man]

Но честно говоря, не понятно как фигма рассчитывает line-height, поделитесь если знаете.

[be_a_man]

EYPPNM,

[Константин Давыдов]

be_a_man, https://intercom.help/figma/text/working-with-text...

[ludr]

be_a_man, всё из-за того, что font-size – это абстрактное значение, которое привязано к шрифту, т.е. одинаковый font-size с разными гарнитурами дает элементы разной высоты. Font-size на экране, это что-то вроде кегельной площадки в металлическом наборе.

Внутренние направляющие это верхняя и нижняя граница шрифта Lato, внешние — то же самое, но для Catamaran.
Вот здесь подробнее.

[dom1n1k]

font-size это вполне конкретное значение.

Answer 6

[Bronewi4ok]

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