문자 간격 (추적)을 CSS로 설정할 때 쓰기

이게 뭐야?

XD의 "문자 간격", photoshop의 "추적"...
단위 모르겠잖아! 라고 계속 생각했지만 조사하면 해결했기 때문에 메모.
드디어 Sass 연습을 포함하여 쉽게 걸도록 했기 때문에 그것도 메모.

▼ phothoshop(대단하지만.)

▼ XD (이쪽도 대단하다.)

계산 방법

(트래킹의 값÷1000)×1em로 계산할 수 있다고 한다.

Sass

mixin이나 common

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

사용하고 싶은 곳

.sample-txt{
 letter-spacing: tracking(トラッキングの値);
}

@mixin 라고 고민이지만, tracking(20)라든지가 디자인으로부터 가져오고 있다고 알기 쉬울까~라고 생각해.

링크

참고 사이트

Photoshop 문자 설정을 CSS에 떨어뜨리는 단계와 도구