Как перевести letter-spacing в процентах из Figma в px?

Question

[Anarchy]

Есть макет figma где все шрифты имеют letter-spacing в процентах. Допустим в figma letter-spacing указан 5%. Получается, что для текста 18px параметр letter-spacing будет равен .9px, а для текста 64px параметр letter-spacing будет равен 3.2px (выяснил методом подгонки). Как реализовать это на вёрстке непонятно, потому что если брать em (допустим letter-spacing: calc(1em / 20);) то размер letter-spacing у всех текстов одинаковый, вне зависимости от размеров шрифта. Тут на хабре предлагали использовать vw в letter-spacing, но это тоже не то. Не приходит на ум адекватная альтернатива процентам. Возможно можно в самой figma как-то массово перевести % в px?

Comments

[Ankhena]

Мне не нравится то, что я пишу, но при такой записи будет для каждого свой, в зависимости от размера шрифта.
Либо повторять для каждого селектора (тоже не фонтан)

* {
letter-spacing: 1.2em;
}

[Lynn «Кофеман»]

> выяснил методом подгонки
:facepalm: Кажется в школе окончательно перестали учить проценты…

Внезапно 64 * 0.05 = 3.2

Answer 1

[alexiusgrey]

я на глаз в пиксель-перфекте переводил. вообще получалось 150% как 23 пикселя

Comments

[Anarchy]

Наверно от выбранного шрифта зависит. Но там вообще все тексты с измененным letter-spacing, на глаз всё это подгонять - ну его нафиг))

Answer 2

[Максим Морев]

потому что если брать em (допустим letter-spacing: calc(1em / 20);) то размер letter-spacing у всех текстов одинаковый, вне зависимости от размеров шрифта

Это неправда, величина будет разной при двух условиях:

1. У текста действительно разный размер шрифта
   
2. Правило корректно применено к обоим блокам
   

У вас, полагаю, проблемы со вторым - ибо одинаковый размер шрифта сложно не заметить.

Вот вам codepen: https://codepen.io/morevm/pen/gOebabV
Вот инструкция по инспектированию:


Посмотрите для обоих элементов. Одинаковое значение?

Кстати, calc(1em / 20)) - какая-то максимально неинтуитивная запись.

letter-spacing: .05em; /* 5%  */
letter-spacing: .2em;  /* 20% */

Возможно можно в самой figma как-то массово перевести % в px?

Честно, я бы задонатил тому, кто сделает так, чтобы в Фигме нельзя было использовать px

Comments

[Ankhena]

У вас, полагаю, проблемы со вторым - ибо одинаковый размер шрифта сложно не заметить.

Попробуйте сделать дочерний элемент с другим размером шрифта. Он унаследует letter-spacing, но в px (тот размер в px, который получился для родителя после перевода из em). Т.е. получится одинаковым в px для разных размеров шрифта.
А пропорциональным он будет, если снова дочернему писать тоже самое значение в em.

[Максим Морев]

Ankhena, ну да, логично, не подумал об этом.
Универсальный селектор по детям решает проблему, или я и тут что-то упускаю?

[Ankhena]

Максим Морев, решает. Но это же дебильный селектор :(