CSS 한글 웹폰트 자간(letter-spacing) 자동으로(상대적으로) 조정하기

https://uxdev.org/entry/%ED%95%9C%EA%B8%80-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%EC%9E%90%EA%B0%84letter-spacing-%EC%9E%90%EB%8F%99%EC%9C%BC%EB%A1%9C%EC%83%81%EB%8C%80%EC%A0%81%EC%9C%BC%EB%A1%9C-%EC%A1%B0%EC%A0%95%ED%95%98%EA%B8%B0

CSS 한글 웹폰트 자간(letter-spacing) 자동으로(상대적으로) 조정하기

 

CSS letter-spacing의 적용:  em의 사용 권장

CSS의 경우 한글 폰트를 대상으로는 letter-spacing을 보통 -1px ~ -2px로 주는 것이 일반적입니다. 다만 이 경우 폰트 사이즈가 커지는 경우에 값을 다르게 설정해 주어야 하는 것과 같은 불편이 있습니다. 텍스트가 커져도 동일한 비율로 자간이 좁아지는 방법이 있으면 더욱 편하게 작업이 가능할 것입니다. 이럴 때를 대비해서 em 유닛을 쓰는 것을 저는 추천드립니다. 특히 적용 scope를 em 유닛을 통해서 전체 개체에 적용하게 함으로써 시간을 절약할 수 있습니다. 16px를 본문 기본 폰트 사이즈로 산정할 경우 1/16인 0.0625em를 이용하면 -1px의 효과를 전체 텍스트에 적용할 수 있습니다. 값을 더 늘려야 하는 경우 2/16 또는 1/14 등의 산술을 통해서 값을 변화시킬 수 있습니다. em은 자신 또는 직계 부모 개체의 font-size 값을 바로 상속받아 동일한 배율로 값을 산정하는 단위입니다. rem은 문서의 기본 폰트 사이즈만을 상속받으므로 여기에서의 사용은 다소 부적절합니다.

 

(내용추가) 동일한 %의 자간을 설정하길 원한다면, 예를 들어 모든 텍스트에 -4%의 자간을 설정하고 싶다면  0.4em을 모든 텍스트에 적용해 주면 자동적으로 상대적으로 비율이 조정되는 효과를 낼 수 있습니다.

 

부끄럽지만 em 유닛에 대해 오늘 처음 알았다.