타이포그래피에서 CSS 문자 간격과 "추적"을 계산하는 방법은 무엇입니까?

타이포그래피에서 CSS 문자 간격과 "추적"을 계산하는 방법은 무엇입니까?

---

일부 요소에 대해 "트랙 100"을 지정하는 레이아웃에 대한 그래픽 디자이너의 지침이 있습니다. CSS letter-spacing에서 "추적"에 해당하는 속성입니다.

추적 값이 주어지면 CSS 값으로 픽셀 단위로 어떻게 표현합니까?

---

픽셀을 사용해야합니까? 내가 찾은 전환은 1000의 추적 값은 CSS에서 1 em과 같으므로 추적 100은 0.1 em이어야합니다.

편집하다

EM에서 픽셀로 이동하려면이 사이트 PXtoEM.com을 사용하십시오 . 특정 경우 0.1 em은 2px로 변환됩니다. 그러나 이것은 16pt 글꼴을 기반으로하므로 사용중인 특정 글꼴 크기에 맞게 조정해야합니다.

---

요약 : 추적을 1000으로 나누고 em's

---

약간의 배경 letter-spacing은 항상 텍스트에 적용되므로 상대적인 길이 단위를 사용해야합니다. AS는 font-size사용자에 의해 또는 계단식으로 변화 할 수있다.

텍스트 길이 의 가장 좋은 단위는 em단위입니다.

이 단위는 요소의 계산 된 글꼴 크기를 나타냅니다. font-size 속성 자체에 사용되는 경우 요소의 상속 된 글꼴 크기를 나타냅니다. CSS 길이-Mozilla 개발자 네트워크

추적이 다른 이유는 무엇입니까?

Adobe의 Photoshop, Illustrator 및 InDesign과 같은 레이아웃 앱 em은 추적에 '를 사용 하지만 디자이너가 쉽게 사용할 수 있도록 단위를 조작합니다. 더 쉽게하기 위해 1000 배를 곱 합니다.

변환 전체에 다시 추적 em의

이렇게하려면 추적 번호를 1000으로 나누어 CSS가 사용할 수있는 전체 em으로 단위를 되 돌리면됩니다.

그래서 50/1000 = 0.05em.

CSS / SCSS로 계산

SCSS 를 사용 하고 있고 재사용 가능한 솔루션을 원한다면 여기 mixin이 있습니다.

// 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. 사용자가 텍스트 크기를 변경하면 사이트 디자인이 원하는대로 표시되지 않거나 읽을 수 없게됩니다.

또한 브라우저는 그래픽 디자인 프로그램이 수행하는 방식과 다른 텍스트를 렌더링합니다. 디자이너가 구현 검토시 추적 / 문자 간격을 조정하더라도 놀라지 마십시오.

---

추적 전환 CSS '글자 간격'

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

---

대부분의 경우 위의 답변은 충분히 정확하지만 사용되는 1000은 글꼴의 Em 크기가 1000이라고 가정하며 항상 그런 것은 아닙니다. 전각 크기가 1024이고 일부는 심지어 2048 인 글꼴을 보았습니다. 분명히 영향을 미칠 것입니다.

Font Forge 와 같은 내부에서 글꼴 을 연 다음 요소-> 글꼴 정보 메뉴 항목 및 일반 탭을 선택하여 글꼴의 전각 크기를 확인할 수 있습니다 .

---

글꼴 크기가 픽셀 인 경우 다음 공식을 사용할 수 있습니다.

tracking* font-size/ 1000 =letter-spacing

참고 URL : https://stackoverflow.com/questions/2760784/how-to-calculate-css-letter-spacing-vs-tracking-in-typography