타이포그래피) inline요소의 높이, line-height

글자 및 inline요소는 우리가 생각하는 높이와 다르게 동작한다.

따라서 속성명도 height이 아니라 line-height이다.

1. 타이포그래피 이론

2. 글자크기의 높이 설정하기

라인의 높이, line-height는 위의 그림과 같이 영역을 차지한다. 즉, font-size + leading영역의 합이다.

leading영역을 없애고 싶다면 line-height: 1;

font 자체에 지정되어있는 여백을 없애는 기능은 없으며, 억지로 line-height을 1보다 적은 수로 줘서 눈대중으로 맞출 수는 있다.

단, font-family가 달라지면 바뀐 폰트의 여백은 또 다르게 설정되어 있을 것이므로 line-height를 다시 맞춰야 한다.

3. inline요소의 높이 설정하기

2번 주제와 같이 여백 하나 없이 글자 크기와 똑같은 font-size도 얻을 수 없고, line-height도 얻을 수 없다.

그래서 inline요소의 height은 적용방법이 좀 색다르다.

line-height가 인라인 요소의 height을 결정하는 열쇠는 맞지만, 전체 디자인적인 height을 정하지는 못한다. 한 줄의 높이이기 때문이다.

따라서 이 둘을 믹스해서 사용해야하며, 정확한 영역의 높이값이 아닌, 몇 줄을 보여줄 것인가로 접근해야 한다.

line-height: 1.5;

height: 4.5em;

em단위는 현재 그 영역의 font-size에 배수를 곱하는 것이고, line-height는 인라인요소를 포함한 한 줄의 높이이기 때문에 어떤 font-size 혹은 어떤 font-family를 가지고 있더라도 이는 3줄만을 담아낸다.