line-height=1 이 의미하는 바는?

출처:  https://simsimjae.tistory.com/331

폰트 위,아래로 가독성을 위해 leading이라는 공간이 있음.

그림에서 보라색 부분이 leading임. 이는 폰트 제작자가 설정해둔 값임.

출처:  https://simsimjae.tistory.com/331

line-height는 그림과 같다. 즉, 위아래 leading까지 다 들어간 값임.

즉, line-height = normal이면 폰트제작자가 설정해둔 leading값이 적용됨.

만약에 line-height를 1로 둔다면? 

이를 다음 그림으로 확인해보자.

출처:  https://simsimjae.tistory.com/331

line-height를 1로 설정한다는것은 폰트사이즈만큼 높이를 갖겠다는 것.

이는 가독성이 매우 떨어진다. 글씨가 다닥다닥 위,아래로 붙어서 글을 읽기가 힘듦.

위의 알파벳 y를 보면 하단으로 삐져 나온것이 보이는데 이러한 공간(leading 영역)까지 고려한다면 line-height 값은 1보다 큰값으로 설정하는 것이 옳다. 

---

주의할 점은 line-height값을 px값으로 설정하여, 크기를 고정하지 말것

line-height = 1.5 이면, font-size * 1.5 로 line-height 값이 설정되지만,

line-height = 16px 으로 한다면,  font-size 와 상관없이 line-height은 16px 으로 일정해진다. 

이때 font-size가 16보다 크다면, font는 제대로 표현되기 힘들것이다.주의하자.

---

출처 : simsimjae.tistory.com/331