9. Text | Notion

0. 서체의 기준선 목록

위 이미지에서는 어센더와 디센더가 여백없이 이상적으로 글씨를 감싸고 있지만, 일반적으로는 아래 이미지 처럼 어센더와 폰트, 그리고 디센더 사이에 공간이 조금 남아 있는 편 입니다. 이는 폰트를 디자인하는 디자이너가 제작할때 여유 공간을 주기 때문인데요, 이러한 이유로 폰트의 종류마다 여백의 크기가 모두 다릅니다.

동일한 font-size에 line-height을 제거한 폰트의 모습. 위에서부터 순서대로 Apple SD Gothic Neo, Noto Sans KR, 주아체가 적용되어 있습니다. 폰트마다 여백의 크기와 위치가 모두 다른것을 확인 할 수 있습니다.

또한 전통적인 출판물에서 leading의 높이는 윗 라인의 베이스라인과 아래 라인 베이스라인 사이의 거리를 의미합니다. 그러나 웹 컨텐츠에서 leading은 윗 라인의 디센더와 아래 라인의 어센더 사이의 거리를 의미하며, line-height의 높이를 폰트 사이즈로 빼고 나머지 값을 반으로 잘라 각각 어센더 위와 디센더 아래에 배치하는 half-leading이란 개념이 사용됩니다.

1. line-height

글자 라인의 높이를 지정하여 텍스트 라인과 라인 사이의 간격(leading)을 조정할 때 사용합니다.

line-height의 단위

normal : 기본 값 입니다. 폰트의 font-family 에 따른 글자의 기본 높이입니다. 사용하시는 font-family에 따라 기본 line-height 값이 다르다는것에 유의하세요.
number : 숫자로 값을 설정할 수 있습니다. 1은 font-size 값 만큼의 라인 높이를 의미합니다. 2는 font-size 값의 두 배를 의미합니다. 소수점을 지원합니다.
px, em, % : 해당하는 유닛 단위에 맞춰 라인의 높이가 설정됩니다.

px : px로 고정된 값을 적용합니다. 폰트의 사이즈가 변할 경우를 대비하지 못하기 때문에 잘 사용하지 않습니다.

em : 부모 요소의 font-size에 비례한 값을 적용합니다. px과 마찬가지로 요소의 폰트사이즈가 변하면 대비 할 수 없습니다.

% : 요소 자신의 폰트 사이즈를 기준으로 값을 설정합니다.

<p>Hello World!</p>

/* line-height 값을 다양하게 사용해보시면서 각각의 특성을 파악해보세요 */
p{
  font-size:14px;
  background-color:black;
  color:white;

	line-height:normal;
  line-height:1;
  line-height:50%;
	line-height:14px;
	line-height:2em;
}

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>line-height</title>
    <style>
        .container {
            width: 300px;
            height: 300px;
            font-size: 16px;
            border: solid 1px black;
            /* 1. 고정 값으로 주었을 경우 : two, three 확인 */
            /* line-height: 10px; */

            /* 2. em으로 주었을 경우 : 역시나 two, three 확인, 더 큰 font를 자식 요소에서 사용했을 경우 UI가 깨짐 */
            /* line-height: 1em; */

            /* 3. 1값을 사용했을 경우 개발자 도구 열어서 확인해보면 contents 높이가 32px 그러나 만약 line-height가 없다면 42.86! leading 영역이 폰트의 위 아래로 존재하기 때문, line-height 1은 이 leading 영역을 없앰(폰트 높이에 딱 붙게됨), leading 영역까지 포함하여 nomal */
            /* line-height: 1; */
        }
        .one {
            font-size: 10px;
            border: solid 1px black;
        }
        .two {
            font-size: 20px;
            border: solid 1px black;
        }
        .three {
            font-size: 30px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <h1>hello world</h1>
    <div class="container">
        <div class="one">hello world</div>
        <div class="two">hello world</div>
        <div class="three">hello world</div>
    </div>
</body>
</html>