[CSS] letter-spacing 자간조정 / line-height 행간조정

[CSS] letter-spacing 자간조정 / line-height 행간조정

행간은line-height속성에서 지정합니다.

값 지정 방법에는 몇가지 있지만 가장 추천한 것은 px등의 단위를 쓰지 않고 수치만으로 지정하는 방법입니다. line-height: 1.5같은 식입니다. 수치만으로 지정하면 문자의 높이를 1로 폰트 크기에 따라서 행간을 계산할 것입니다.

 

예를들어 line-height:1.5로 하면 문자 높이의 1.5배의 행간이 됩니다.

추천은 line-height:1.5-2 사이

 

1.5-2.0사이로 하면 읽기 쉬운 행간에 됩니다. 이 범위에서 취향에 따라 행간을 설정하면 될 것입니다.

자간(글자 간격)은 letter-spacing라는 속성으로 설정합니다.

letter-spacing속성이 문자와 문자 사이의 공간을 지정합니다.

 

letter-spacing값의 지정에도 몇 패턴인가 있지만, 추천은 "em"이라는 단위로 지정하는 것입니다. em에서는 문자의 높이에 대한 비율로자간을 지정합니다. 1em이라고 문자의 높이만큼 자간이 됩니다. 0.1em이라고 하면 "문자 높이의 1/10의 크기"의 자간이 생기는 것이 됩니다.

추천값은 0.05-0.1em 입니다.

초기밧이라도 충분히 읽기 쉬운 자간이라 그냥 둬도 괜찮습니다. 지정을 하는 경우는 0.05-0.1em정도의 범위에서 정하는것을 추천합니다.

 

0.1em정도로 해서 잡는 것을 추천합니다.

letter-spacing 속성

값 지정 방법은 이하와 같이 됩니다.

• normal← 초기치
  → 브라우저가 자동적으로 자간을 정하고, 실제 글자간 0
• 수치+px
  → 정해진 px수에서 자간을 지정
• 수치+em← 추천!
  → 상대적 비율을 지정하면, 폰트 크기에 응하고 자간이 정해진다

초기값은 normal이기 때문에 특별히 아무 것도 지정을 하지 않으면 normal로 되어 있습니다. normal에서는 브라우저가 자동으로 정해주는 것으로 되어있는데, 실제로 normal에서는 글자간 제로(letter-spacing: 0)로 되어있습니다.

"em"에서 지정하는 것이 추천

letter-spacing도 px로 지정하기보다 텍스트 크기에 맞게 자간을 바꾸어 주니까 상대적 비율로 지정하는 게 좋습니다. 
letter-spacing의 경우 상대적 비율로 지정할 때는 단위에em를 사용합니다.

"em" 개념

1em="문자의 높이"입니다. 가령 0.1em이라고"문자 높이의 1/10의 크기"의 자간이 생기는 것이 됩니다. 0.5em이라고 "문자 높이의 1/2크기"의 자간이 됩니다.

값을 마이너스로 하면 자간이 좁아진다

값은 0보다 작은 해도 적용이 됩니다. 하지만 그 경우 아무것도 지정하지 않을 때보다 자간이 좁아집니다. 예를 들어, 자간을- 0.1em로 해봅니다.

html 코드
<p>이는 지문입니다(지정 없이)</p>
<p class="font_space">이는 지문입니다(-0.1em)</p>

CSS 코드
.font_space{letter-spacing:-0.1em}