Как расчитать межбуквенное расстояние из Photoshop

Все очень просто.

В CSS мебуквенное расстояние обозначается, как letter-spacing.

Свойство letter-spacing определяет расстояние между текстовыми символами.

Другими словами, это способ задать интервалы в тексте. Поддерживает такие значения, как:

  • inherit — использует свойство элемента-родителя.
  • normal — использует значение по умолчанию.
  • length — определяет значение в единицах измерения.

Вычисление интервала из Photoshop

Photoshop не показывает единицу измерения межбуквенного интервала — значение определяется на основе размера шрифта. Джастин Марсан вывел такую закономерность: 1000 в Photoshop соответствует 1 em в CSS.

    Формула для расчета letter-spacing в em:

    X / 1000 = Y

    Где X — значение интервала в Photoshop, а Y-то же значение, выраженное в em для CSS.
 Есть и формула для расчета значения в пикселях: 

 X * S / 1000 = P

Где X — значение интервала в Photoshop, S — размер шрифта в пикселях (при работе в 72 dpi), и P — значение интервала для CSS. 

 

Em и px: что выбрать?

Со старыми версиями Webkit это было сложным решением, потому что в Safari, Chrome и других браузерах/приложениях (использующих Webkit) значения округлялись в меньшую сторону, отображая 0.9px как 0px. С обновлением Webkit всё стало гораздо проще: значение в em корректно отображается в основных браузерах (Firefox, Safari на iOS, IE9) и округляется до ближайшего целого, если значение указано в пикселях.

 

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *