Как рассчитать CSS межстрочный интервал v.s. «отслеживание» в типографии?

Question

У меня есть инструкции от графического дизайнера для макета, который указывает «дорожку 100» для некоторых элементов. В CSS letter-spacing это эквивалентное свойство для «отслеживания».

Учитывая значение для отслеживания, как вы можете выразить это как значение для CSS в пикселях?

Answer 1

Вы должны использовать пиксели? Конверсии, которые я нашел, это значение отслеживания 1000, равное 1 em в CSS, поэтому в вашем случае отслеживание 100 должно быть 0,1 em.

EDIT

Чтобы перейти от EM к пикселям, используйте этот сайт PXtoEM.com . Для вашего конкретного случая 0,1 em конвертируется в 2px. Однако это основано на шрифте 16pt, так что вам придется подстраиваться под конкретный размер шрифта, который вы используете.

Answer 2

TL; DR: разделите трекинг на 1000 и используйте em 's

---

Немного фона о letter-spacing всегда применяется к тексту, поэтому мы должныиспользуйте относительную единицу длины.Поскольку font-size может изменяться пользователем или даже каскадом.

Единица длины best для текста равна em.

Этоединица измерения представляет собой вычисленный размер шрифта элемента.Если оно используется в самом свойстве font-size, оно представляет унаследованный размер шрифта элемента. Длина CSS - Сеть разработчиков Mozilla

Почему отслеживание отличается?

Макетные приложения, такие как Adobe Photoshop, Illustrator и InDesign em в своем трекинге, но управляют устройством, поэтому дизайнерам легче играть.Чтобы сделать это проще, они раз это на 1000.

Преобразование отслеживания обратно в целые em

Чтобы сделать это, нам просто нужно разделить номер отслеживания на 1000, чтобы вернуть единицу к целому em, который может использовать CSS.

Итак 50/1000 = 0.05em.

Вычисление этого в CSS / SCSS

Если вы используете SCSS и хотите многоразовое решение - вот миксин.

// Convert illustrator, indesign and photoshop tracking into letter spacing.

@function tracking( $target ){
  @return ($target / 1000) * 1em;
}

@mixin tracking( $target ){
  letter-spacing: tracking( $target );
}

Чтобы использовать вышеперечисленные функции, вы можете просто сделать это.

.example {
  @include tracking(50);
}

В качестве альтернативы вы можете просто встроить математику без миксина, чтобы он был менее абстрактным:

.example{
  letter-spacing: #{(50/1000)}em;
}

Выходные данные для приведенных выше примеров будут следующими:

.example {
  letter-spacing: 0.05em;
}

Примечание: Не следует использовать значение в пикселях, поскольку пиксели фиксированы и ломаются, когда:

1. Дизайнер меняет размер шрифта.Вам нужно будет пересчитать значение.

2. Если пользователь изменит свой размер текста, дизайн вашего сайта не будет отображаться должным образом или даже не будет читаться.

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

Answer 3

Отслеживание конверсии CSS «межбуквенное расстояние»

1 =1/1000 em
100 =100/1000 em =0.10 em
200 =200/1000 em =0.20 em

Answer 4

По большей части приведенные выше ответы достаточно точны, однако, 1000, которые используются, предполагают, что ваш шрифт имеет размер Em, равный 1000, и это не всегда так. Я видел шрифты, которые имеют размер Em 1024, а некоторые - даже 2048, что, очевидно, окажет влияние.

Размер шрифта можно узнать, открыв его внутри чего-то вроде Font Forge , а затем выбрав пункт меню Элементы -> Информация о шрифте и вкладку Общие.

Answer 5

Если у вас есть размер шрифта в пикселях, вы можете использовать следующую формулу:

tracking * font-size / 1000 = letter-spacing